Forum Moderators: not2easy
Is such a thing possible with CSS?
Thanx
A basic idea would be to have two separate divs with different z-index's (that controls which div is on top). The bottom div is your tabbed graphic, the top div, your text links.
It may end up being a bit more complicated than that for you (always seems to work out that way), but it's certainly possible.
I've been on the listmatic site but I didn't see any examples that used an image behind text links. I see lots of examples of using css to create horizontal navigation that basically repositions a list and puts colored rectangles behind the links, but I didn't see any example that uses images behind the list. It's quite possible I just haven't seen it yet, there are a lot of examples there. I'll go back and have another look.
puts colored rectangles behind the links, but I didn't see any example that uses images behind the list.
Using images to create your buttons is just as easy. When those list examples you mention on listamatic use background color, and swap out that background color on :hover, you simply slide in a background-image, instead. The only tricky part is making sure that (a) the image fits the dimensions your CSS sets out for the list items and the anchors they contain and (b) the anchors are set to display:block so the background on them fills the list item. Otherwise, this is no trickier than doing a css rollover that changes the background from blue to green.
cEM
Actually what I have in mind is a bit different. I would be displaying one static navbar gif image across the top of the page that has six tabs on the image. I want to float six text links over the six tabs on the one image. I don't need any mouse over effects. I'm going to play around with some of the examples online and see if I can figure it out.
I want to float six text links over the six tabs on the one image.
The generally accepted, semantically valid way to mark up a menu these days is to make it an unordered list, then style that list to be a horizontal bar. If you just want one image set as the nav bar with text links over it, it's just a question of setting that bar as background for the list, then laying the list item right on top of it. Note that if the bar image is sliceable, it may be easier to get your text exactly where you want it by chopping the image up into peices and assigning each peice to a single link, but either way would work.
I'm posting a test page below. The image I used for navbar.gif is a 500px wide top of a rounded rectangle with a vertical divider line every 98px to create 5 "buttons" since the link list has 5 links. The rest is mostly self explanatory; CSS is commented where necessary. Let me know if you have any specific questions.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
*{
margin:0;/*removes margin and padding from all elements, very important when working with lists since different browsers use different defaults*/
padding:0;
}
#container{
width:500px;
margin:0 auto; /*centers*/
}
#navbar{
float:left; /*floating the div lets it contain the floated list items so the background displays behind them*/
width:500px; /*width is necessary for the float*/
background:url(navbar.gif) center top no-repeat; /*sets the one navbar image as background*/
}
#navbar ul{
list-style-type:none; /*removes bullets from the list*/
text-align:center; /*aligns the text to what should end up as the center of each graphical button*/
}
#navbar ul li{
display:inline; /*extra step to get IE to display link list horizontally*/
}
#navbar ul li a{
display:block; /*makes the anchor fill the list item so clicking any part of the graphical button will work, also allows the anchor to take a width*/
float:left; /*the key to making the list horizontal*/
width:98px; /*set to the width of each button part of the image, make sure the combined width doesn't exceed the total width of the navbar*/
line-height:40px; /*set equal to the height of the navbar image. Using line-height, rather than height, will get the text aligned to the vertical center of the button*/
}
#navbar ul li a:link, #navbar ul li a:visited{text-decoration:none;color:#000;}
#navbar ul li a:link:hover, #navbar ul li a:visited:hover{color:#fff;}
</style>
</head>
<body>
<div id="container">
<div id="navbar">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
</div>
</body>
</html>
cEM
[added] I just looked back and saw that you indicated six links, not five. Adapting this to six links shouldn't be any more complicated than adjusting the widths.[/added]
[edited by: createErrorMsg at 3:32 pm (utc) on June 16, 2005]
phpmaven
Home
Page
as opposed to:
Home Page
I tried putting a break in the link text but that pushed the second line down way too far.
Thank you soo much for your help.
phpmaven
Thank you for all your help, you saved me a lot of time.
phpmaven
