PDA

View Full Version : Gap Problem



CruxCreations
Jul 2nd, 2009, 09:41 PM
I'm working on coding a website for a club im in at college. I'm having a problem with the menu and header tho, for some reason I have a small white gap between the two... I really don't understand why it's doing it. I was just wondering if anyone could please help me to understand what's going on. Thanks :thumbsup:


Here's a link to see what's going on...

http://www.cruxcreations.net/aiga


HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Collins College AIGA Student Group</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

</head>

<body>
<div id="container">
<img src="images/header.jpg" />
<div id="content">
<div id="contentleft">
<img src="images/menu/shadow.jpg" id="menushadow" />
<ul class="menu">
<li class="home"><a href="index.php"></a></li>
<li class="about"><a href="aboutus.php"></a></li>
<li class="members"><a href="members.php"></a></li>
<li class="projects"><a href="projects.php"></a></li>
<li class="calendar"><a href="calendar.php"></a></li>
<li class="resources"><a href="resources.php"></a></li>
<li class="contact"><a href="contact.php"></a></li>
</ul>
</div>
<div id="contentright"><p>test</p></div>
</div>
<div id="footer"><p>footer</p></div>
</div>
</body>
</html>



CSS


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-position: center 0px;
background-color: #003242;
background-repeat: no-repeat;
background-image: url(images/bg.gif);
margin: 0px;
}
#container {
width: 800px;
background-color: #FFF;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content {
background-color: #FFF;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#contentleft {
float: left;
width: 183px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #FFF;
}
#contentright {
float: left;
width: 205px;
}



.menu {
margin: 0;
padding: 0;
width: 165px;
list-style: none;
background: #fff;
}
.menu li {
padding: 0;
margin: 0;
height: 48px;
list-style: none;
background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -1000px;
height: 48px;
background-repeat: no-repeat;
}
.home {background-image: url(images/menu/homeon.jpg);}
.home a {background-image: url(images/menu/home.jpg);}
.about {background-image: url(images/menu/abouton.jpg);}
.about a {background-image: url(images/menu/about.jpg);}
.members {background-image: url(images/menu/memberson.jpg);}
.members a {background-image: url(images/menu/members.jpg);}
.projects {background-image: url(images/menu/projectson.jpg);}
.projects a {background-image: url(images/menu/projects.jpg);}
.calendar {background-image: url(images/menu/calendaron.jpg);}
.calendar a {background-image: url(images/menu/calendar.jpg);}
.resources {background-image: url(images/menu/resourceson.jpg);}
.resources a {background-image: url(images/menu/resources.jpg);}
.contact {background-image: url(images/menu/contacton.jpg);}
.contact a {background-image: url(images/menu/contact.jpg);}
ul.menu li a:hover {background: none;}


#menushadow {
border: none;
float: right;
}


#footer{
width: 753px;
float: left;
background-image: url(images/footer.jpg);
height: 92px;
}

effpeetee
Jul 2nd, 2009, 10:45 PM
This works for me. See the <style type="text/css"> </style> I have added in the head section.

See it here. (http://exitfegs.co.uk/CollinsCollege.html)

Frank

Amend your css to suit. Or you could adjust the header instead. It's a matter of margins. Margins can be negative as well as positive.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.cruxcreations.net/aiga/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Collins College AIGA Student Group</title>
<link rel="stylesheet" type="text/css" href= "style.css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
.menu{margin-top:-10px;
]
</style>}
</head>

<body>
<div id="container">
<img src="images/header.jpg" />
<div id="content">
<div id="contentleft">
<img src="images/menu/shadow.jpg" id="menushadow" />
<ul class="menu">
<li class="home"><a href="index.php"></a></li>
<li class="about"><a href="aboutus.php"></a></li>
<li class="members"><a href="members.php"></a></li>
<li class="projects"><a href="projects.php"></a></li>
<li class="calendar"><a href="calendar.php"></a></li>
<li class="resources"><a href="resources.php"></a></li>
<li class="contact"><a href="contact.php"></a></li>
</ul>
</div>
<div id="contentright"><p>test</p></div>
</div>
<div id="footer"><p>footer</p></div>
</div>
</body>
</html>l>

jrp1
Jul 3rd, 2009, 01:42 AM
And as for shadow.jpg, change it to this:



<img src="images/menu/shadow.jpg" id="menushadow" valign="top"/>


Because on effpeetee's example there's still a small white gap. This should line everything up properly.

abduraooft
Jul 3rd, 2009, 11:14 AM
It might be that mysterious gap (https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps)!