試圖修復標題導航欄

嘿那裏我想讓我的頁眉導航菜單堆疊在我的頁面頂部......但是當我修復它時，它不會出現。取而代之的是導航的酒吧只有puncts..no頭，沒有導航欄....沒有隻沒什麼背景... 這裏是我的代碼 HTML：試圖修復標題導航欄

</head> 
<body> 
<div id="header"> 
<li><a href="index.html" class="Logo"></a></li> 
<li><a href="index.html"class="Home"></a></li> 
<li><a href="Sugestology.html"class="Sugestology"></a></li> 
<li><a href="TheCreator.html"class="Creator"></a></li> 
<li><a href="InBulgaria.html"class="InBulgaria"></a></li> 
<li><a href="Contacts.html"class="Contacts"></a></li> 
</div>

CSS：

#header { 
position: fixed; 
top: 0; 
z-index: 500; 
height: 80 px; 
width:100%; 
} 

#header li {float:left; } 
#header li a.Logo {width:20%; height:80px; background:url("nav_01.jpg")} 
#header li a.Home {width:20%; height:80px; background:url("nav_02.jpg")} 
#header li a.Sugestology {width:20%; height:80px; background:url("nav_03.jpg")} 
#header li a.Creator {width:20%; height:80px; background:url("nav_04.jpg")} 
#header li a.InBulgaria {width:20%; height:80px; background:url("nav_05.jpg")} 
#header li a.Contacts {width:20%; height:80px; background:url("nav_06.jpg")}

我再次想這個導航是100％的寬度，並在左側是標誌nav_01.jpg至極將導致指數太....在右側的導航欄和這一切當向下滾動時堆疊在頂部....但是這個代碼沒有似乎只有六個fullstops ....

來源

2014-01-22 Nika

你放什麼文件夾中的圖像？也許在CSS中的背景網址是不正確 –

不，他們在HTML文件和CSS文件相同的文件夾 – Nika

請將完整的代碼發佈到JSFiddle。你有這個代碼的一些問題，如缺少UL標籤，我看到的問題最多，LI的寬度是20％x 6 = 120％。 –

下面是正確的代碼：

http://jsfiddle.net/4BJLb/2/

CSS

#header { 
    position: fixed; 
    top: 0; 
    height: 80 px; 
    width:100%; 
    z-index: 500; 
} 
#header ul { 
    padding-left: 0; 
    height: 80px; 
} 
#header li { 
    list-style: none; 
    float: left; 
    height: 80px; 
    width: 16.6%; 
} 
#header li a { 
    display: inline-block; 
    width: 100%; 
    height: 80px; 
    background-size: cover; // >IE9 
} 

#header li a:nth-child(1) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0} 
#header li a:nth-child(2) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0} 
#header li a:nth-child(3) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0} 
#header li a:nth-child(4) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0} 
#header li a:nth-child(5) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0} 
#header li a:nth-child(6) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}

HTML

<div id="header"> 
    <ul> 
     <li><a href="index.html"></a></li> 
     <li><a href="index.html"></a></li> 
     <li><a href="Sugestology.html"></a></li> 
     <li><a href="TheCreator.html"></a></li> 
     <li><a href="InBulgaria.html"></a></li> 
     <li><a href="Contacts.html"></a></li> 
    </ul> 
</div>

來源

2014-01-22 17:16:05

重複「高度」在你的'#header li a' – kevpoccs

感謝您的支持！更新... –

它沒有出現，但它在那裏，當你點擊它重定向你的頁面和頁面的地方是在正確的地方，但backgorun不會出現 – Nika

把一些文字你的div內

也，你需要讓李list-style: none;來擺脫掉puncts

這裏是CSS：

#header { 
position: fixed; 
top: 0; 
z-index: 500; 
height: 80 px; 
width:100%; 
    display: inline-block; 
    float: left; 
} 


#header li {float:left; width:15%; height:80px; list-style: none;} 
#header li a.Logo {background:url("nav_01.jpg")} 
#header li a.Home {background:url("nav_02.jpg")} 
#header li a.Sugestology {background:url("nav_03.jpg")} 
#header li a.Creator {background:url("nav_04.jpg")} 
#header li a.InBulgaria {background:url("nav_05.jpg")} 
#header li a.Contacts {background:url("nav_06.jpg")}

注意：您需要將15％更改爲適合100％的寬度（其中div的數量爲x div的寬度爲< = 100％）其他明智的選擇您將跳出頁面

下面是HTML

<div id="header"> 
<li><a href="index.html" class="Logo">1</a></li> 
<li><a href="index.html"class="Home">2</a></li> 
<li><a href="Sugestology.html"class="Sugestology">3</a></li> 
<li><a href="TheCreator.html"class="Creator">4</a></li> 
<li><a href="InBulgaria.html"class="InBulgaria">5</a></li> 
<li><a href="Contacts.html"class="Contacts">6</a></li> 
</div>

眼見爲實

fiddle

來源

2014-01-22 17:25:00 SULTAN

這種方式數字顯示和他們的背景的一小部分，但只有這個沒有完整的菜單欄 – Nika

試圖修復標題導航欄

回答

相關問題