Welcome to WebmasterWorld Guest from 54.146.171.44

Forum Moderators: not2easy

Message Too Old, No Replies

margin/Spacing between header and navigation

How do I remove it?

   
5:27 am on Jun 15, 2010 (gmt 0)



Hi,
I'm creating a website and a margin/spacing has appeared between the header and the navigation bar. I've tried setting the margin to 0 and that doesn't fix it. Does anyone know how I can fix it?

This is the HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Looerro Minis Home Page</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>

<div id="wrap"> <!-- This is the div that holds everything together. The whole layout is based inside this div -->

<div id="header"> <img src="trialhorse.jpg"alt="Looerro Miniature Horses Logo- Exceeding Expectations"/> <!-- This is where the header image goes. -->

</div> <!-- This closes the header div -->

<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="horses.html">Horses</a>
<ul>
<li><a href="stallions.html">Stallions</a></li>
<li><a href="mares.html">Mares</a></li>
<li><a href="geldings.html">Geldings</a></li>
<li><a href="foals.html">Foals</a></li>
</ul>
</li>
<li><a href="showteam.html">Show Team</a></li>
<li><a href="showresults.html">Show Results</a></li>
<li><a href="training.html">Training</a></li>
<li><a href="sales.html">Sales</a></li>
<li><a href="contactus.html">Contact Us</a></li>

</ul>
</div>

<div class="cushycms" id="maincontent"> <!-- This is the maincontent div, this is where the important information will go -->
<center><h2>Welcome to</h2></center>
<center><h2>Looerro Miniature Horses</h2></center>

<p><center>Currently Under Construction. Please come back soon</center></p>




</div>




<div id="footer"> <!-- This is the start of the footer div -->
<p>&copy; 2010 All Rights Reserved</p>

</div> <!-- This is the end of the footer div -->

</div> <!-- This is the end of the wrap div -->


</body>
</html>




This is the CSS


@charset "utf-8";
/* CSS Document */



body,
html {
margin:0;
padding:0;
background-image:url(background.jpg);
font-family: Arial, Verdana, sans-serif;

}

h2 {
color:#FFC;
font-family:Verdana, Arial, sans-serif;


}

#wrap {
width:950px; /* This is the width of the wrap */
margin:0 auto; /* This is set to auto so that the layout will be centered */
background: #000000; /* This sets the background colour of the wrap */

}

#header {

background:#ddd;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;

}

#navbar {
font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;
font-size:36px;
width:100%;
margin-top:0px;
padding:0px;
height:63px;
background-color:#FFF;
}

#navbar li {
list-style: none;
float: left;
}

#navbar li a {
display: block;
padding: 7px 8px;
background-color: white;
color: black;
text-decoration: none;
}

#navbar li ul {
display: none;
width: 5em; /* Width to help Opera out */
background-color: white;}

#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: white;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color:#FFC; }


#maincontent {
color:#FFF;
float:right; /* The float left is so that the main div will float to the left. This will make the main and sidebar div
float side by side */
padding:10px; /* This is the padding around the text so that it looks spaced out and even. */
background: #000000; /* This is the background colour of the main div */
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-bottom:1px solid #FFF;
width:930px;


}

p {
text-align:center;
}


#footer {
clear:both;
background:#000000;
color:#FFC;
}



Any help would be appreciated!

Thanks
8:50 am on Jun 15, 2010 (gmt 0)

WebmasterWorld Senior Member dreamcatcher is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Have you tried setting the margin/padding to 0 on the ul tag?

ul {
margin:0;
padding:0;
}

dc
9:01 am on Jun 15, 2010 (gmt 0)

5+ Year Member



By default, web browsers apply all kinds of styling to elements by default, usually minor things like padding, margin and line-height etc.. In this case I'd bet that there is margin on the
div#navbar ul
. Try setting the margin to 0px on the
ul
and see if it fixes it.

As a best practice you should write a block of styles listing all default html elements and setting their margin and padding to 0px, you can take it further and define a standard for fonts, a weight for bolds, line-heights etc.. This will basically remove all of the styling a browser may apply by default, it also evens the playing field across all browsers making it a little easier to write code that will display consistently on different platforms. If you don't fancy writing your own, search for "reset css", there's most likely many good examples.