1

最初の問題は、バナーとナビゲーション バーを隔てるものがないにもかかわらず、バナーとナビゲーション バーの間に隙間があることです。

私が抱えている次の問題は、ナビゲーションバーがページの最後 (または私の場合は 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>
4

1 に答える 1

1

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-16T23:54:26.087 に答える