1

ここに 2 時間座って、ロゴをナビゲーション バーに合わせて、すべて同じように 1 行に収まるようにしましたhttp://weightshift.com/

私もこの画像を追加しようとしています

http://imageshack.us/photo/my-images/26/logonkg.png/

次の CSS を使用するナビゲーション バーに合わせて、ナビゲーション バーをヘッダーの下に配置しようとするたびに本当に立ち往生しています。レスポンシブ フレームワークを使用して Dreamweaver でこれを作成しています。助けていただければ幸いです。

#menu {
     background:#333;
    height:100px;
}

#h1 {
width: 100px;

}


#menu-wrap {
      margin:0 auto;
    width:1200px;
}

#navigation-main {
    display: inline-block;
    padding:0px;
    color:#fff;
    font-size:24px;
    font-weight:bold;
    margin-bottom:5px;
    float: right;
}

#navigation-main li {
    float:left;
    margin-right:20px;
}

#navigation-main li a {
    display:block;
    color:#fff;
}

#navigation-main li ul  {
    display:none;
    z-index:0;
}

#top-nav-info {
    background:#dddddd;
    float:left;
    width:1200px;
}

#top-nav-sec li a {
    padding:0px;
    display:inline;
    height:42px;
    color:#a19f9f;
}

現在のhtmlで

<body>
<div class="gridContainer clearfix">
  <div id="LayoutDiv1">

    <div id="header">

      <div id="menu">
         <h1> <img src="images/logo.png"> </h1>

                <div id="menu-wrap">



<ul id="navigation-main">
          <li><a href="">Home</a><span class="nav-sec">The Beginning</span></li>
            <li><a href="">Articles</a><span class="nav-sec">Tips, Tricks, Advice</span></li>
            <li><a href="">Tutorials</a><span class="nav-sec">Photoshop Techniques</span></li>
            <li><a href="">Resources</a><span class="nav-sec">Fonts, freebies, wallpapers</span></li>

        </ul><!--end navigation-menu-->
    </div><!--end menu-wrap-->
    </div>
   </div>
  </div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
4

4 に答える 4

1

@Simplifyの答えに加えて、これを行う方法は複数あります。これらのアイテムを左右にフロートさせたい場合は、フロートされた 2 つの要素の幅の合計がコンテナーの幅を超えないようにしてください。

オプション1

JSフィドル

http://jsfiddle.net/bjuGB/1/

HTML

<div class="container">
  <img class="logo" />
  <ul class="nav">
    <!-- nav links here -->
  </ul>
  <div style="clear: both"></div>
</div>

CSS

.container { width: 1000px; }
.logo { 
  float: left; 
  width: 300px;
}
.nav { 
  float: right; 
  width: 600px;
}

また、スタイル付きの div を追加してclear: both、新しい要素がフロートに「収まる」のではなく、新しい行に移動するようにしました。

オプション 2

ここで絶対位置を使用する方が頭痛の種ではないかもしれません。相対位置でコンテナーを定義するようにしてください。

JSFiddle

http://jsfiddle.net/6gnkW/

HTML

<div class="container">
  <img class="logo" />
  <ul class="nav">
    <!-- nav links here -->
  </ul>
  <div style="clear: both"></div>
</div>

CSS

.container {
  position: relative;
  width: 1000px;
}
.logo, .nav { 
  position: absolute; 
  top: 5px;
}
.logo { left: 10px; }
.nav { right: 10px; }
于 2012-12-31T18:53:33.957 に答える
1

float: left与えられた例のヘッダーを再作成するには、ロゴ画像とナビゲーション リンクを含む にfloat: rightを追加するだけです。ul

<img class="left" />
<ul class="right">
    <!-- nav links here -->
</ul>

.left { float: left; }
.right { float: right; }

これは動作中のjsfiddleです。何をしようとしてたの#menu-wrap？あなたが何をしようとしているのかわからず、ヘッダーを壊していたので、私が取り出したのはそれだけです。

于 2012-12-31T17:56:37.557 に答える
1

個人的にあなたのロゴをメニューの外に移動します。それ以外の

<div id="header">

  <div id="menu">
     <h1> <img src="images/logo.png"> </h1>

私はこれをするだろう

<div id="header">
     <h1> <img src="images/logo.png"> </h1>

  <div id="menu">

それは単なる個人的な好みです。次に@Simplifyが言及したように、これらの要素を次のように左右にフロートさせたいと思うでしょう:

<div id="header">
     <h1>Name of Site<img class="left" src="images/logo.png" alt="" /></h1>

  <div id="menu">

クラスを左に置き、alt タグと終了タグを画像 "/" にも配置したことに気付くでしょう。http://validator.w3.org/で時々コードをチェックしても問題ありません。

最後に、これを css ファイルに追加します。

.left { 
float: left; 
}

#menu { 
width: 100%; 
padding: 0; 
margin: 0; 
}

#menu-wrap { 
margin: 0 auto; 
width: 1200px; /* You will need to change this */
float: right; 
}

#header h1 { 
text-indent: -9999px; 
} 

#header h1 img { 
border: none; 
}

テキスト インデントは、適切な seo を維持しながら、h1 テキストを非表示にします。灰色のテキストは無視してください。なぜそれをしているのかわかりません:)

また、メニューの幅が 1200px に設定されていることに気付きました。ページの幅全体をこのサイズにしたいのは確かです。この場合、ロゴが同じ行に収まるように調整する必要があります。例えば。ロゴの幅が 200 ピクセルの場合は、メニューの幅を縮小して、追加した余白やパディングを反映させます。これにより、ロゴとメニューを並べて表示できます。簡単に言えば、これらの要素の両方を 1200px のメイン コンテナーよりも広くしたくない場合、または横に並べてフロートしないようにする必要があります。

また、浮動要素をクリアするクラスを作成する必要があります。私は .breaker を使うのが好きです

.breaker { clear: both; }

追加

<div class="breaker"></div>

あなたの終了メニュータグの後。

于 2012-12-31T19:12:56.447 に答える