Hi,
what's happening is that I have a horizontal bar positioned absolutely in the middle of the screen, z-index 0. on top of this will be text links, display set to inline, z-index 1, and they should be on top of the bar stretching across it evenly. but, rather than work the way i want it to, the text links are showing up beneath the horizontal bar and are all bunching up on top of each other on the left side (as in the words are all one on top of the other and you can't click all the links).
I'm viewing this right now in Safari 2.0 but the final solution will someday have to be compatible with NN/FF/IE5.5.
here's my html, navbar.jpg is the horizontal bar:
<div id="navbar">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/Navbar.jpg">
<div id="navlinks">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"aboutus.html">About Us</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"features.html">Features</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"requirements.html">Requirements</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"gettingstarted.html">Getting Started</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contactus.html">Contact Us</a>
</div>
</div>
and here is the css:
/*position the navigation bar in the appropriate location*/
#navbar {
position: absolute;
left: 50%;
margin-left: -336px;
border-left: 1px solid #848484;
border-right: 1px solid #848484;
width: 670px;
margin-top: 0px;
z-index: 0;
}
/*put the text links on top of the navigation bar*/
#navlinks a, a:visited, a:active {
position: absolute;
margin-top: 0px;
display: inline;
z-index: 1;
color: #ffffff;
text-align: center;
}
/*when you mouseover a link in the navigation bar*/
#navlinks a:hover {
background-image: url(images/navbar_mo.jpg);
text-decoration: none;
}
if somebody could help me out i'd really appreicate it, thanks!If you have an image and then a lot of links, why do you expect the links to sit on top of the image? I think what you want is a background.
Here's a menu you may or may not find useful : <!-- m --><a class="postlink" href="http://bonrouge.com/test/list.htm">http://bonrouge.com/test/list.htm</a><!-- m --> .
Take a look at the mark up and see if this helps at all (I think it should). I'd suggest doing something like that and putting your horizontal bar into the background or alternatively (depending how special your bar is) use a background colour.
I hope this helps.This is pretty close to what I want.
I'd prefer to use just a plain background or something and put the links on top of that, but in this case I must use an image. It doesn't make sense to me why this way shouldn't work.Your code says "image, then links" - in that order. It doesn't say "links on image".It doesn't make sense to me why this way shouldn't work.
It can work, but why use absolute positioning, z-index and negative margins when all you apparently require is a background (image) with a list.If it's any help, I've added a background-image to the list. Maybe you want something like this : <!-- m --><a class="postlink" href="http://bonrouge.com/test/list2.htmhey">http://bonrouge.com/test/list2.htmhey</a><!-- m -->,
thanks - this accomplished exactly what i wanted.
what's happening is that I have a horizontal bar positioned absolutely in the middle of the screen, z-index 0. on top of this will be text links, display set to inline, z-index 1, and they should be on top of the bar stretching across it evenly. but, rather than work the way i want it to, the text links are showing up beneath the horizontal bar and are all bunching up on top of each other on the left side (as in the words are all one on top of the other and you can't click all the links).
I'm viewing this right now in Safari 2.0 but the final solution will someday have to be compatible with NN/FF/IE5.5.
here's my html, navbar.jpg is the horizontal bar:
<div id="navbar">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/Navbar.jpg">
<div id="navlinks">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"aboutus.html">About Us</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"features.html">Features</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"requirements.html">Requirements</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"gettingstarted.html">Getting Started</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contactus.html">Contact Us</a>
</div>
</div>
and here is the css:
/*position the navigation bar in the appropriate location*/
#navbar {
position: absolute;
left: 50%;
margin-left: -336px;
border-left: 1px solid #848484;
border-right: 1px solid #848484;
width: 670px;
margin-top: 0px;
z-index: 0;
}
/*put the text links on top of the navigation bar*/
#navlinks a, a:visited, a:active {
position: absolute;
margin-top: 0px;
display: inline;
z-index: 1;
color: #ffffff;
text-align: center;
}
/*when you mouseover a link in the navigation bar*/
#navlinks a:hover {
background-image: url(images/navbar_mo.jpg);
text-decoration: none;
}
if somebody could help me out i'd really appreicate it, thanks!If you have an image and then a lot of links, why do you expect the links to sit on top of the image? I think what you want is a background.
Here's a menu you may or may not find useful : <!-- m --><a class="postlink" href="http://bonrouge.com/test/list.htm">http://bonrouge.com/test/list.htm</a><!-- m --> .
Take a look at the mark up and see if this helps at all (I think it should). I'd suggest doing something like that and putting your horizontal bar into the background or alternatively (depending how special your bar is) use a background colour.
I hope this helps.This is pretty close to what I want.
I'd prefer to use just a plain background or something and put the links on top of that, but in this case I must use an image. It doesn't make sense to me why this way shouldn't work.Your code says "image, then links" - in that order. It doesn't say "links on image".It doesn't make sense to me why this way shouldn't work.
It can work, but why use absolute positioning, z-index and negative margins when all you apparently require is a background (image) with a list.If it's any help, I've added a background-image to the list. Maybe you want something like this : <!-- m --><a class="postlink" href="http://bonrouge.com/test/list2.htmhey">http://bonrouge.com/test/list2.htmhey</a><!-- m -->,
thanks - this accomplished exactly what i wanted.