Stack Overflowのトップナビゲーションメニューに似たCSS

Stack Overflow（質問、タグ、ユーザー、バッジ、未回答、質問）のナビゲーションメニューと似たナビゲーションメニューを作成しようとしています。Stack Overflowのトップナビゲーションメニューに似たCSS

5つのメニューオプション、ロゴを付けてやってみました。これらは容器の上に置かれていた。私はそれらを整列することはできません。

どうやって整列させることができますか？

HTML：

<body> 
    <div id="logoimg"> 
    <a href="http://www.domain.com"> 
    <img src="http://www.domain.com/domain.png" border="0"></img> 
    </a> 
    </div> 
    <div id="navi"> 
<a href="http://www.domain.com/home.php">Home</a> 
<a href="http://www.domain.com/profile.php">Profile</a> 
<a href="http://www.domain.com/settings.php">Settings</a> 
<a href="http://www.domain.com/logout.php">Logout</a> 
</div> 
    <div id="my"> 
    <div id="box"> 
<div id="pic"> 
<div id="myname"> 
    <?php echo "$angelinajolie";?> 
    </div> 
    </div> 
    </div> 

</body>

CSS：

div#logimg { 
    margin-left: 213px; 
    } 

    #box { 
background-color: #FFFFFF; 
margin:0 auto; 
height: 300px; 
width:830px; 
border:1px solid #E2E2E2; 
    }

出典

2010-12-30 AAA

は、あなたがこれまで持っているコードを投稿することができますか？ – scunliffe

私はstackoverlowのナビゲーションメニューのソースコードを見て、あなたのものと比較することをお勧めします。 – Will

なぜ3つのダウンボックスがありますか？それはSOに関する最も詳細な質問ではありませんが、来てください。 –

はこの打撃を与える：

HTML：

<div id="header"> 
    <h1><a href="http://www.domain.com">Name of Site</a></h1> 
    <ul class="nav"> 
     <li><a href="http://www.domain.com/home.php">Home</a></li> 
     <li><a href="http://www.domain.com/profile.php">Profile</a></li> 
     <li><a href="http://www.domain.com/settings.php">Settings</a></li> 
     <li><a href="http://www.domain.com/logout.php">Logout</a></li> 
    </ul> 
    <ul class="nav extra"> 
     <li><a href="http://www.domain.com/logout.php">Ask a Question</a></li> 
    </ul> 
</div>

ラップコンテナのdivの中に全体のこと。サイトのロゴは、おそらくテキストのサイトのタイトルを持つh1でなければなりません（スクリーンリーダーに似ているなど）。リンクのリストは順序付けられていないリストでなければなりません。その構造は物事をうまく保ち続け、CSSは残りのことを行うことができます。

CSS：

#header h1{ 
    float: left; 
    width: 100px; 
    height: 50px; 
}

フロートサイトのタイトル/ロゴとそれに幅と高さを与えます。

#header h1 a{ 
    background-image: url(http://www.domain.com/domain.png); 
    display: block; 
    text-indent: -9999px; 
    overflow: hidden; 
    width: 100px; 
    height: 50px; 
}

これはテキスト道を突きつけた（隠されたのオーバーフローと組み合わせたテキストのインデントプロパティを使用してテキストを隠す、アンカータグにブロックレベル要素を作成し、アンカータグの背景画像としてロゴを配置左に）。

#header a{ text-decoration: none; } 

#header .nav li{ 
    background: #eee; 
    border:1px solid #E2E2E2; 
    float:left; 
    margin-right: 0.5em; 
    padding: 0.2em 0.5em; 
}

ulタグのリスト要素を浮動させて、スタイリングします。

#header .extra{ 
    float: right; 
    margin-right: 0; 
    top: 0; 
    right: 0; 
}

「余分な」ナビゲーションは、左側ではなく右側に移動します。

は、ここでは、アクションでそれを参照してください。http://jsfiddle.net/6F5ky/

出典

2010-12-31 01:00:40 borkweb

ありがとうborkweb。私のロゴは一種のものなので、私はまだ問題を整理しています。私は何かを考え出すでしょう。ありがとう!! – AAA

Stack Overflowのトップナビゲーションメニューに似たCSS

答えて

関連する問題