CSS div標籤格式錯誤出現

的第一個問題是，有我的旗幟，我的導航欄之間的差距，即使我沒有什麼它們分隔條件CSS div標籤格式錯誤出現

下一個問題我已經是我的導航欄應延長藍色，直到頁面結束（或我的情況下爲970px），但是每個li元素只有藍色

第三，div標籤似乎沒有正確地工作，因爲當我展開我的頁面我將下一個div標籤移動到這一個的右邊。

我的CSS代碼

#button { 
    padding: 3px; 
} 
#button li { 
    display: inline; 

} 
#button li a { 
    font-family: Arial; 
    font-size:14px; 
    text-decoration: none; 
    float:left; 
    padding: 10px; 
    background-color: #4169E1; 
    color: #fff; 
    } 
#button li a:hover { 
    background-color: #E30800; 
    margin-top:-2px; 
    padding-bottom:12px; 
}

，這裏是我的html

<body leftmargin="50px" rightmargin="50px"> 
<img src="banner.jpg" width="970" height="120" /> 

<div> 
    <ul id="button"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Contact </a></li> 
    <li><a href="#">Resum&eacute;</a></li> 
    <li><a href="#">Help</a></li> 
    </ul> 
</div> 

<div> 
<table width="970" cellpadding="5px"> 
<tr height="270"> 
    <td width="700"><div class="slider-wrapper theme-default"> 
     <div id="slider" class="nivoSlider"> <img src="demo/images/nemo.jpg" alt="" /> <a href="http://dev7studios.com"><img src="demo/images/up.jpg" alt="" title="#htmlcaption" /></a> <img src="demo/images/toystory.jpg" alt="" title="This is an example of a caption" /> <img src="demo/images/walle.jpg" alt="" /> </div> 
    </div> 
    <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div></td> 
    <td width = "270"><img src="demo/images/nahum-pachenik.jpg"></td> 
</tr> 
<table> 
</div> 
<hr color="#4169E1"/> 
<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script> 
</body>

來源

2013-07-16 stothek

爲什麼人們仍然使用'

'來製作佈局-_- –

因爲這個人第一次只是在學習HTML/CSS –

嗨@stothek，如果這是你需要的，你能否標記我的答案是正確的。 –

回答

的jsfiddle：http://jsfiddle.net/Hjc2e/

html,ul{ 
    /*clear any default margin or padding, research css reset*/ 
    /*this is how you get the <ul> to line up flush with your image*/ 
    margin:0; 
    padding:0; 
} 
body{ 
    /*width 100% for content and you can control you width with the left and right margins of body*/ 
    margin-left:50px; 
    margin-right:50px; 
} 
#button li { 
    background-color: #4169E1; 
    float:left; 
    list-style-type:none; 
    text-align:center; 
    /*Must calculate width of menu based on width of list items in menu, 4 items thus 25%*/ 
    width:25%; 
    height:40px; 
/* so that text lines up vertically center padding-top is always half the height*/ 
    padding-top:20px; 
} 
#button li a { 
    font-family: Arial; 
    font-size:14px; 
    text-decoration: none; 
    color: #fff; 
    } 
#button li a:hover { 
    background-color: #E30800; 
    margin-top:-2px; 
    padding-bottom:5px; 
}

<!--no need for div wrapper and it was adding gap between banner image and menu--> 
    <ul id="button"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Contact </a></li> 
    <li><a href="#">Resum&eacute;</a></li> 
    <li><a href="#">Help</a></li> 
    </ul> 


<div> 
<table width="970" cellpadding="5px"> 
<tr height="270"> 
    <td width="700"><div class="slider-wrapper theme-default"> 
     <div id="slider" class="nivoSlider"> <img src="demo/images/nemo.jpg" alt="" /> <a href="http://dev7studios.com"><img src="demo/images/up.jpg" alt="" title="#htmlcaption" /></a> <img src="demo/images/toystory.jpg" alt="" title="This is an example of a caption" /> <img src="demo/images/walle.jpg" alt="" /> </div> 
    </div> 
    <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div></td> 
    <td width = "270"><img src="demo/images/nahum-pachenik.jpg"></td> 
</tr> 
<table> 
</div> 
<hr color="#4169E1"/> 
<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script> 
</body>

來源

2013-07-16 23:54:26

相關問題