| margin/Spacing between header and navigation
How do I remove it? |
kimmi_baby
msg:4152731 | 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>© 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
|
dreamcatcher
msg:4152790 | 8:50 am on Jun 15, 2010 (gmt 0) |
Have you tried setting the margin/padding to 0 on the ul tag?
ul {
margin:0;
padding:0;
}
dc
|
iambic9
msg:4152800 | 9:01 am on Jun 15, 2010 (gmt 0) |
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.
|
|
|
