...

View Full Version : Margin/Spacing between Header and Navigation



kimmi_baby
06-15-2010, 07:33 AM
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? I want the navigation to be directly underneath the header.

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

abduraooft
06-15-2010, 09:56 AM
<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 -->
It might be that mysterious gap (http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps)! Try setting display:block; or float:left; to #header img



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum