Forum Moderators: not2easy
I have an image that I am using for a banner.
Directly underneath is a navigation bar in a div tag.
I would like them to touch so that the navigation blends with the banner.
No matter what I try I can't get rid of the whitespace between them.
I tried removing the <p> tags of the banner and replacing with <div> but I still have a whitespace.
This is the code :
<div>
<div align="center"><img src="/climatebanner.jpg" alt="Climate change and global warming articles" width="1017" height="150" border="0">
</div>
</div>
<div id="navcontainer">
<div>
<div align="center">
<ul class="bannernav1" id="navlist">
<li id="active"><a href="/climatebanner.jpg" id="current">Item one</a></li>
<li><a href="/climatebanner.png">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
</div>
Any ideas how I can make it work?
Thanks
Fred
However, you could try:
1. Add an id to the outter div where your image is
2. Set it and it's nested elements to have no margin
3. Set the image to display:block.
4. Set navcontainer and it's nested elements to have no margin
<style type="text/css">
#bannercontainer,
#bannercontainer *
{
display: block;
margin: 0;
}
#navcontainer,
#navcontainer *
{
margin: 0;
}
</style>
<div id="bannercontainer">
<div align="center">
<img src="/climatebanner.jpg" alt="Climate change and global warming articles"
width="1017" height="150" border="0">
</div>
</div>
<div id="navcontainer">
<div>
<div align="center">
<ul class="bannernav1" id="navlist">
<li id="active"><a href="/climatebanner.jpg" id="current">Item one</a></li>
<li><a href="/climatebanner.png">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
</div>
Also, you should consider removing those presentational attributes (align, border, width, and height) to CSS.
[edited by: Fotiman at 4:42 pm (utc) on Jan. 12, 2007]
[edited by: SuzyUK at 9:09 pm (utc) on Jan. 12, 2007]
[edit reason] fixed a bit of the scroll width hopefully ;) [/edit]
<!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>
<title>climate change articles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/CSS/Level1_Verdana.css" rel="stylesheet" type="text/css" />
<link href="/CSS/bannernav1.css" rel="stylesheet" type="text/css" />
</head>
<body leftmargin="0" topmargin="0">
<div>
<div align="left"><img src="/climatebanner.jpg" alt="Climate change and global warming articles" width="1017" height="150" border="0">
</div>
</div>
<div id="navcontainer">
<div>
<div align="center">
<ul class="bannernav1" id="navlist">
<li id="active"><a href="/climatebanner.jpg" id="current">Item one</a></li>
<li><a href="/climatebanner.png">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
<p> </p>
</ul>
</div>
</div>
</div>
Heres the css for the navcontainer
.bannernav1
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #000000;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #A9A9A9;
text-decoration: none;
}
Heres the css for the general body formatting
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 10px;
}
td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #D83A05;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #D83A05;
}
<!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" xml:lang="en" lang="en">
I'll experiment a bit more and see what I come up with.
If this is the case, then Fotiman's suggestion:
3. Set the image to display:block.
vertical-align:bottomon the image should also sort it.
Check out this thread for a lot more info on this phenomenon:
[webmasterworld.com...]
If I remember correctly, you only get this 'white-space' on FF, Opera when using a strict DOCTYPE. A Transitional DOCTYPE on FF sorts the issue.
[developer.mozilla.org...]
<style type="text/css">
#bannercontainer,
#bannercontainer *
{
display: block;
margin: 0;
}
#navcontainer,
#navcontainer *
{
margin: 0;
}
</style>
Seems to have done the trick.
Thanks for your help all.
Fred
