0

既存のナビゲーションに影響を与えずに配置できないレスポンシブ Web サイトがあります...

WordPressサイトに次のコードがあります...

http://alanbrandt.com

クライアント側 HTML

<!-- wrapper -->
<div class="wrapper">
    <!--[if lt IE 8]>
        <p class="chromeframe">Your browser is <em>ancient!</em>  <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
    <![endif]-->
    <!-- header -->
    <header id="header-main">
        <!-- logo --> <a id="rel-top"></a>

        <div id="logo"> <a href="http://alanbrandt.com">
                            <!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
                            <h1 id="logo"><img src="http://alanbrandt.com/wp-content/themes/alanbrandt/images/logo.svg" alt="Alan Brandt Photography"></h1>
                        </a>

        </div>
        <!-- /logo -->
        <!-- nav -->
        <nav id="nav-main" role="navigation">
            <ul>
                <li id="menu-item-161" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-161"><a class="expandStories top" href="http://alanbrandt.com/stories">Stories</a>
                </li>
                <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://alanbrandt.com/about-me/">About me</a>
                </li>
                <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://alanbrandt.com/portfolio/">Portfolio</a>
                </li>
                <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://alanbrandt.com/prices/">Prices</a>
                </li>
                <li id="menu-item-16" class="ContactMenu menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://alanbrandt.com/contact/">Contact</a>
                </li>
                <li class='last'>
                    <form role='search' method='get' id='searchform' action='http://alanbrandt.com' class=''>
                        <fieldset>
                            <input type='text' value='' name='s' id='s' placeholder='Search' />
                            <input type='submit' id='searchsubmit' value='Search' />
                        </fieldset>
                    </form>
                </li>
            </ul>
            <div class='cf'></div>
            <div id="language"> <a href="http://alanbrandt.dk">Dansk</a> | <a href="http://alanbrandt.com">English</a>

            </div>
        </nav>

以下の CSS を使用して Dansk|English のリンクを配置すると、ユーザーはナビゲーション リンクをクリックできなくなりますか???

CSS

.language {
  position:relative;
  left:340px;
  top:-27px;
}

誰かがこれを行う方法を説明できますか。私は開発者ではないので、詳細を教えてください... :)

前もって感謝します... ：）

4

1 に答える 1

0

言語 div の幅 (既定では 100%) を設定しておらず、ナビゲーション ブロックの上に言語 div を移動する負の値を使用しているため、ユーザーはナビゲーション リンクをクリックできません。

私の解決策は次のとおりです。

CSS:

  .wrapper {
   margin: 0 auto;      /* Center your contents */
   max-width: 780px;    /* Set the maximum width for your wrapper! */ 
   width: 100%;
   }

  #language {
   position: relative;
   top: -27px;
   float: right;        /* You're floating the div to the right */
   width: 100px;        /* Now you've set the width on the language div */
   }

これは、問題を解決する 1 つの方法にすぎません。さらにサポートが必要な場合はお知らせください。 これがどのように見えるかです

于 2013-09-09T18:50:45.980 に答える