左のロゴ付き水平液体ナビゲーションメニュー

水平ナビゲーションバーの左側にロゴを浮かべて、液体で表示させるにはどうすればいいですか？similar to this site？左のロゴ付き水平液体ナビゲーションメニュー

私はそれを行う方法についてのチュートリアルを見つけるのが大好きだが、残念ながら私は見つけることができるすべては、これは例で使用したコードそのもの

2011-02-04 dazza_au

あなたが投稿した例では、ロゴの浮動小数点：leftとトップのnav＆menu float：rightがあります。 Chromeの「Inspect Element」（または選択したブラウザの同等の機能）を使用すると、非常に簡単に表示されます。 – Sean

おかげさまでヒープ。私はfirefoxとfirebugを使ってコードを調べていましたが、使用した要素と命名タグをすべて見たときに混乱しました。最終的に私はクロムをダウンロードし、はるかに良いです。それは全体をハイライトし、私のラップトップで少し明確に表示されます。ちょうど満たされていない青い正方形を与えるfirebugにapposedされているように、 –

によって水平方向のメニューの例ですされています;）

<html> 
<head> 
<style> 
.header_box_cmg 
{ 
width:100%; 
margin:0auto; 
padding:0; 
height:125px; 
background:#03a691 url(/views/afl/images/bg/bg_header.jpg) top center repeat-x 
} 
.header_cmg 
{ 
width:920px; 
height:125px; 
margin:0auto; 
padding:0 20px; 
overflow:hidden; 
background:transparent url(/views/afl/images/bg/bg_glow.jpg) top center no-repeat 
} 
.top_options 
{ 
float:right; 
display:inline; 
width:50%; 
overflow:hidden; 
margin-top:20px 
} 
.top_options p 
{ 
font-size:1.1em; 
margin:7px 20px 0 0 
} 
.main_nav 
{ 
width:624px; 
height:50px; 
overflow:hidden; 
float:right; 
display:inline; 
margin-top:22px 
} 
.main_nav li 
{ 
float:left; 
display:inline; 
height:50px; 
margin-left:80px 
} 
.main_nav li.first 
{ 
margin-left:0 
} 
.main_nav li a 
{ 
display:block; 
height:50px; 
text-indent: -9999px; 
background:transparent url(/views/afl/images/bg/bg_main_nav.png) 0 0 no-repeat 
} 
#home{width:36px;background-position:0 0;margin-left:} 
#home:hover, body.home #home{background-position:0 -50px} 
#then{width:61px;background-position: -36px 0} 
#then:hover, body.then #then{background-position: -36px -50px} 
#thep{width:61px;background-position: -97px 0} 
#thep:hover, body.thep #thep{background-position: -97px -50px} 
#thea{width:90px;background-position: -158px 0} 
#thea:hover, body.thea #thea{background-position: -158px -50px} 
#cont{width:53px;background-position: -250px 0} 
#cont:hover, body.cont #cont{background-position: -250px -50px} 
</style> 
</head> 
<body> 
<div class="header_box_cmg"> 
    <div class="header_cmg"> home 
    <h1><a href="http://ambassadorsforlife.org/" title="Ambassadors for LIFE"> 
     <img src="/views/afl/images/ambassadors_for_life.png" alt="Ambassadors for LIFE" title="Ambassadors for LIFE" /> 
    </a></h1> 
    <div class="top_options"> 
    <a href="http://ambassadorsforlife.org/become-an-ambassador/" class="btn_become_ambassador">Become An Ambassador</a> 
    <p class="float-right"><a href="http://my.ambassadorsforlife.org/">Sign in to my account</a></p> 
</div> 
<ul class="main_nav"> 
    <li class="first"><a href="http://ambassadorsforlife.org/" id="home">Home</a></li> 
    <li><a href="http://ambassadorsforlife.org/the-need/" id="then">The Need</a></li> 
    <li><a href="http://ambassadorsforlife.org/the-plan/" id="thep">The Plan</a></li> 
    <li><a href="http://ambassadorsforlife.org/ambassadors/" id="thea">Ambassadors</a> </li> 
    <li><a href="http://ambassadorsforlife.org/contact/" id="cont">Contact</a></li> 
    </ul> 
    </div> 
</div> 
</body> 
</html>

出典

2011-03-01 00:16:48 JAiro

それのおかげで、私は後ですべてのソースコードの中で見ていたが、誰かが単純化されたバージョンを投稿したことを便利。誰かがこの回答を手軽に見つけるかもしれません –

左のロゴ付き水平液体ナビゲーションメニュー

答えて

関連する問題