1

こんにちは、これは私が構築する必要があるものです:モックアップ

私はナビゲーションバーで立ち往生しています.CSSは次のとおりです。

/* CSS ドキュメント */

body {background:#fff url(bg.jpg) repeat-x; margin:0; padding:0; height:1800px; font-        family:Arial, Helvetica, sans-serif;}

#wrapper {width: 1000px; margin: 0 auto;}

#header {height: 400px; width: 1000px; display: block; position: relative; }
#header .logo {position: absolute; width: 374px; height: 221px; display: block; float:     left; cursor: pointer; background: url(logo.png) 0 0 no-repeat transparent; top: 55px;     left: 10px;}
#header .contact-info {position: absolute; width: 293px; height: 133px; display: block;     float: left; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat transparent;     top: 100px; left: 700px;}

ul.mn {
position: absolute;
float: left;
top: 316px;
width: 316px;
margin: 0;
padding: 0;
list-style-type: none;
}

ul.mn li {
float: left;
}

ul.mn li a {
display: block;
float: left;
height: 73px;
margin-left: 6px;
}

ul.mn li a.mn1 {
width: 104px;
background-image: url('mn1.png');
background-position: 0 0;
}

ul.mn li a.mn2 {
width: 212px;
background-image: url('mn2.png');
}


ul.mn li a.active, ul.mn li a:hover {
background-position: 0 73px;
}

そしてHTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RW-Fliesen</title>
<link rel="stylesheet" type="text/css" href="style.css" />



</head>

<body>

<div id="wrapper">

<div id="header_wrapper">

    <div id="header">

        <a href="index.html" class="logo" title="Logo"></a>

        <div class="contact-info" title="contact-info"></div>

        <ul class="mn">
        <li><a href=" " title="" class="mn1 "></a></li>
        <li><a href=" " title="" class="mn2 "></a></li>
        </ul>






    </div>

</div>





</div>



</body>
</html>

ナビゲーション要素が 1 つしかない場合はすべて問題ないように見えます: 要素が 1 つだけの Navi

しかし、2 番目のナビゲーション要素を追加すると、Navi は次のようになります。複数の要素を持つ Navi

どうすれば修正できますか？

4

2 に答える 2

0

最初の投稿で参照したモックアップ サイトを模倣しようとしていたと仮定します。メニューバーに対応する css コードのセクションを次のように調整する必要があると思います。あなたが提供したもの: 

ul.mn { position: absolute; float: left; top: 316px; width: 978px; margin: 0; padding:0; list-style-type: none; }

私が提案していること：

ul.mn { position: absolute; float: left; top: 316px; width: 850px; margin: 0 auto 0 10px; padding:0; list-style-type: none;}

定義済みの各ボタン div の合計幅によって決定される幅を反映するように幅を 978 ピクセルから 850 ピクセルに変更したことに注意してください。次に、すべての余白を 0 に設定する代わりに、上部 0 を右に設定することを提案しました。 auto、bottom 0、および left 10px (あなたのモックアップから私が認識したことから、メニューの左側はロゴの左側と整列するためです)。これらの変更を行うことで、メニュー バーをヘッダー div のベースにうまく配置することができました。

少なくとも私には、進捗状況をお知らせください。私は常にアイデアを共有し、他の人がどのように問題にアプローチするかを学びたいと考えています. 私はそれが私たち全員をより賢くすると信じています。

幸運を祈ります、スティーブ

于 2013-04-25T22:55:43.697 に答える