homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
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>&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

 

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved