CODEWITHSUNDEEP
csshtml
stothek
stothek

Reputation: 9

css div tag formatting errors appear

the first problem is that there is a gap between my banner and my nav bar even though I don't have anything seperating them

the next problem I have is that my nav bar should extend blue until the end of the page (or 970px in my case )but instead it only has blue for each li element

and thirdly the div tags don't seem to be doing their job right since when I expand my page I get the next div tag moving up to the right of this one.

my css code

#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;
}

and here is my 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>

Upvotes: 1

Views: 137

Answers (1)

Brian Ogden
Brian Ogden

Reputation: 19212

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>

Upvotes: 1

Related Questions