picture under menu bar with no space between

L

liunx

Guest
I used css to built a menu bar, where the cursor moves over it, it changes its color. Now, I want to add a line that will run under it, accross the entire screen. I have a picture of a gray line that I want to add under the menu bar. The problem is that when I add it as img, I get a line break between the menu bar and the line, a break that I don't want a have. How do I make the picture to be just under the menu bar (actually touching the menu bar)?
The img I'm using is nothing special. if there is a way to draw the line under the menu without the picture I would be happy.
Here is the code I'm using.
The css code:
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a.nav
{
float:left;
width:5em;
font-size:12px;
text-decoration:none;
color:white;
font-weight:bold;
background-color:#8b8b8b;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a.nav:hover {background-color:orange}
li {display:inline}
a.navi
{
float:left;
width:40em;
font-size:12px;
text-decoration:none;
color:white;
background-color:#8b8b8b;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a.navi:hover {background-color:#8b8b8b}
li {display:inline}
</style>

The html code that I use is:
<ul style="margin-left:7.5cm">
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:4em">home</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#">About Us</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:6em">Contact Us</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:3em">FAQ</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Site Map</a></li>
</ul>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/graydevider.jpg" alt="divider" width="840" style="margin-left:1.5cm"/>

Thanks in Advanced.Add margin-top: 0; padding-top: 0; to the image's style settings.

KDLAHere is my html code, with the additions:

<table border="0" width="900">
<tr>
<td>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/header11.jpg" alt="getcontractor.com" width="444" height="77" usemap="#headermap" border="0" style="margin-left:1.5cm" />
<map id="headermap" name="headermap">
<area shape="rect" coords="10,26,455,81" alt="home page" href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">
</map>
<ul style="margin-left:7.5cm">
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:4em">home</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#">About Us</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:6em">Contact Us</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:3em">FAQ</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Site Map</a></li>
</ul>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/graydevider.jpg" alt="divider" width="840" style="margin-left:1.5cm;margin-top:0cm;padding-top:0cm"/>
</td>
</tr>
</table>

I tried to add the style into the <ul> didn't work. What else can I do?
Thanks, Oz.If your image line is just a solid color, add a border to the declaration for the UL tag. Otherwise, add the image as a background in the UL tag:


ul {
background: transparent url(path/to/img.gif) no-repeat scroll 0 100%;
}Try putting your <ul> in a container <div>, then add a border-bottom setting to the container <div>

#container {margin-left: 1.5cm; width: 840px; margin-bottom: 0; border-bottom: gray 2px solid;}
<div id="container">
<ul style="margin-left:7.5cm">
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:4em">home</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#">About Us</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:6em">Contact Us</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:3em">FAQ</a></li>
<li><a class="nav" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Site Map</a></li>
</ul>
</div>

You might have to alter a few of your settings to accommodate this change.

KDLAFor KDLA's latest suggestion, your UL tag is floated. If you encapsulate that UL tag with a DIV, the DIV will contain nothing. Floated elements are placed out of the normal document flow. A more complete method below may be more to your liking:

<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu Item</a></li>
</ul>
<div id="navSpacer"> </div>
</div><!-- end nav -->


Then in your CSS:

/* If your bottom image is a solid color, use a border. If your bottom
* image is not a solid color, use a background image. */
#nav {
background: transparent url(path/to/image.gif) no-repeat scroll 0 100%;
border-bottom: 1px solid #<some hex color value>;
}

/* The zoom: 1; property and value is not a part of the CSS standard,
* however, this is supported by IE-Win and trips the hasLayout property
* for the <a> tags, allowing the full area to be clickable. */
#nav a {
display: block;
/* Padding, borders and margins for your menu items */
zoom: 1;
}

#nav li {
float: left;
}

#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#navSpacer {
clear: both;
font-size: 1px;
height: 1px;
overflow: hidden;
}It's working!
 
You must log in or register to reply here.
Back
Top