horizontal menu with images and rollover states

[Abby]

I'm so frustrated, I'm beginning to wonder if I should just abandon my grand plans for a cool website and try something like Wordpress ... I'm just not sure that would be any easier or allow me the freedom to do everything I want to do. Disclaimer: I'm teaching myself CSS, and I'm not any sort of scripter. I'm only touching web dev because I want to redesign my website. Okay. I know how to make a simple horizontal menu using HTML and CSS. But instead of using text, I would like to use images. Each link on the menu is represented by one of three images. Image1A for the active page, Image1B for a link, and Image1C for hover. When the user looks at the menu, there will only be one Image in the "A" state (and that is the page they are currently on). The other image links will be in the "B" state unless hovered over, in which case they go to the "C" state. I've tried a ton of tutorials, and not a single one works for what I'm trying to do ... which should be simple and easy, but apparently it's not. I've checked out source code from other websites, but it looks either too complicated or too different from what I'm doing.I'd link to my site, but I don't want to make this page live yet, since it looks like crap. Suggestions and advice would be much appreciated.

[dsonesuk]

This all depends on:What sort of menu image fixed, or fluid width. Will the text be on the button image itself (meaning individual images for every button), or within the anchor links.Are you planning to use a dropdown menu option.

[ShadowMage]

Exactly what you need to do depends on the things dsonesuk mentioned, but the general idea is this:Create one image with three button styles in it. For example:

|-------------------||-- Active State ---||-------------------||-- Normal State ---||-------------------||--- Hover State ---||-------------------|

Then in your CSS you'd have something like this:.active {background-position: 0px 0px;}.normal {background-position: 0px 25px;}.normal:hover {background-position: 0px 50px;}The bolded values will vary depending on the height of your links/images.

[Abby]

What sort of menu image fixed, or fluid width. Will the text be on the button image itself (meaning individual images for every button), or within the anchor links.Are you planning to use a dropdown menu option.

The menu "bar" (which is invisible) is fluid width, but the items ("buttons") are each the same dimensions of 191 X 59. I need to make sure they don't overlap each other or wrap to the next line when the browser is resized.The text is on the button image itself. However, I'm beginning to think this might just be too difficult. Is it?No dropdown menu options. Really, I thought this would be simple ... somewhere there is a computer gremlin laughing insanely at me. Thanks for any help on this. ShadowMage: I've seen tutorials for the single image with three states, and I'd like to give it a try. However, first I need to make the menu show up and at least begin to work. Right now, I can't even seem to get the buttons visible. Will check back in when/if I get something to work right.

[dsonesuk]

The menu "bar" (which is invisible) is fluid width, but the items ("buttons") are each the same dimensions of 191 X 59. I need to make sure they don't overlap each other or wrap to the next line when the browser is resized.

you will have set min-width: to total combined width of menu buttons

The text is on the button image itself. However, I'm beginning to think this might just be too difficult. Is it?

Depends if want to use fancy fonts with dropshadows etc, this is the only option. if using commonly used fonts arial, verdana, tahoma, that is used widely on every O/S with no effects, then text within anchors willl do fine and less work.#menu_bar{height:59px; min-width:600px;}#menu_bar a{display:block; /*turns element from inline to block element, which we can now define its area*/ width:191px; height:59px; margin: 0 1px;/*1px either side of buttons*/ float:left; /*butts them all together to left*/ line-height:59px; /*vertically aligns text*/ background:url(mybutton.png) no-repeat left top; /*add image to background*/ color:#fff;}<div id="menu_bar"><a href="link1.htm">link1</a><a href="link2.htm">link2</a><a href="link3.htm">link3</a></div>don't think i have forgotten anything, it may need slight adjustments, but should work.

[ShadowMage]

Before you get too far into this, are you using a Strict DTD?

[user4fun]

It it helps you any, this is what the guys helped me out with a few days ago. It is one image that has teh navigation bar (Just one image for active and normal. The hovering will just show the drop down menu)

ul.menu_items {background:transparent url(images/nav_bar.png) no-repeat scroll left 0;float:left;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0 0 0 -5px;padding:0;width:964px;}ul.menu_items li a {background-image:url(images/nav_bar.png);background-repeat:no-repeat;display:block;float:left;height:60px;text-indent:-9999px;}ul.menu_items li a.home {background-position:-50px 0;margin-left:50px;width:105px;}ul.menu_items li a.ops {background-position:-155px 0;width:152px;}ul.menu_items li a.deten {background-position:-307px 0;width:141px;}ul.menu_items li a.cor {background-position:-448px 0;width:167px;}ul.menu_items li a.admin {background-position:-615px 0;width:183px;}ul.menu_items li a.extras {background-position:-798px 0;width:145px;}

I am still trying to figure out how to make the drop down menu come up :-)good luck

[Abby]

Wow, thanks! dsonesuk, this was very helpful. I really appreciate the explanations you wrote for each line of code. I'm playing around with it, and I have some questions.margin:0 1px; If I change the unit of measurement, it jacks up the page. Why can't I have a percentage in there, so the buttons scrunch closer together or further apart if the browser is resized? When I try entering a percentage, the button images start wrapping when the browser gets small. And why does the menu go from horizontal to vertical if I change the units to em?float:left;If I remove this line, or change it to float:top; the menu stacks vertically instead of horizontally. Why is this?One or two things to add:

• text-indent:-10000em;
• outline:none;

I haven't attempted to make hover states for each link yet, or to make it all part of one image. I'll post more later.ShadowMage: Yes, I'm pretty sure I'm using a strict DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

[ShadowMage]

Yes, I'm pretty sure I'm using a strict DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Umm...That's really old...You should be using an html4 dtd or xhtml dtd:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[Ingolme]

Yes, I'm pretty sure I'm using a strict DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Actually, having that DTD is exactly the same as having no DTD at all. It triggers quirks mode in all browsers.

[Abby]

Does this DTD stuff change quickly? I copied mine from W3schools just a month or two ago. (shrug) Oh well, thanks for enlightening me! I've changed it. Okay, I'm still having major problems with my menu. A friend just informed me that I'm trying to make CSS do something it was never intended for. Here's the problem page. The problem menu is at the top. It's a work in progress, so it looks like crap and most of the links don't work. My questions: 1)The red links overlaying the button are the links I want. I can push the text away with a text-indent. But how the devil do I give each link its own button? I tried giving each link its own class, but I must be doing something wrong in the CSS.2)I want the current (active) page to display the hover state instead of the inactive link state. How?3)I want the links to be evenly spaced out along the top bar, and scale with the browser window. How?4) If I redesign the top menu to work better with CSS, what would be a better design? What would you recommend? You can see that I only have three links, although I might add a fourth at some point.

[thescientist]

1) are you saying you want the red links or you want to turn the images/buttons into links? 2) use an id on each page for only the link you want to have a hover state (or try the CSS psuedo-class :active)3) you would probably have to use percentages and some basic math to calculate the width of the links and how much space to put in between them (all adding up to 100). Fort three links with even space in between, give everything a width of 20%4) The most practical and advisable way is typically to use lists and float them to get the list items to render horizontally

[Abby]

1) are you saying you want the red links or you want to turn the images/buttons into links?

I want to turn the images/buttons into links. How? I've tried three tutorials, and copied & pasted other people's helpful suggestions. None of it works. I need to understand if this is even possible using CSS, in order to start from a launching point to learning it through trial & error. I could make working buttons easily in Flash. But I want this to be in CSS/HTML.

2) use an id on each page for only the link you want to have a hover state (or try the CSS psuedo-class :active)

This isn't clear to me. I thought each link should have its own id, in order to (theoretically) work. If you're saying its id should be different from the other two, how so? Maybe this answer will make more sense to me once (or if) I get the images/buttons working.

3) you would probably have to use percentages and some basic math to calculate the width of the links and how much space to put in between them (all adding up to 100). Fort three links with even space in between, give everything a width of 20%

I tried that, and the images end up wrapping to the next line. I'm not sure why. I posted about this above. When the margin-right is given a pixel value (1px or 40px), it works. But if I make it a percentage, it wraps the menu.

4) The most practical and advisable way is typically to use lists and float them to get the list items to render horizontally

This is what the menu is already doing. My question was about redesigning it. How much interactivity is practical for CSS? Am I trying to make it do too much? I guess I'll do a few more tutorials and see if something clicks. Argh. SOOOOO frustrated!!!

[dsonesuk]

<ul id="topbar"> <li><a class="games" href="#games">Game Credits</a></li> <li><a class="tutoring" href="#tutoring">Tutoring</a></li> <li><a class="resume" href="#resume">Resume</a></li></ul>#topbar a {background:transparent url(game_off.png) no-repeat scroll left top;color:red;display:block;float:left;height:59px;line-height:50px;margin:-2px 4px;outline-color:invert;outline-style:none;outline-width:medium;width:191px;}#topbar a.games:link {background:url(game_off.png) no-repeat left top;}#topbar a.tutoring:link {background:url(tutoring_off.png) no-repeat left top;}#topbar a.resume:link {background: url(resume_active.png) no-repeat left top;}#topbar a.games:hover { background:url(game_on.png) no-repeat left top; } #topbar a.tutoring:hover { background:url(tutoring_on.png) no-repeat left top; } #topbar a.resume:hover { background:url(resume_on.png) no-repeat left top; }Now :active, does not always work as it should, so if the menu is added manually to each page, it might be better to use class instead<ul id="topbar"> <li><a class="games" href="#games">Game Credits</a></li> <li><a class="tutoringactive" href="#tutoring">Tutoring</a></li><!--this is page relates to current page with active class--> <li><a class="resume" href="#resume">Resume</a></li> </ul>#topbar a.games:active, #topbar a.gamesactive { background:url(game_on.png) no-repeat left top; } #topbar a.tutoring:active, #topbar a.tutoringactive { background:url(tutoring_on.png) no-repeat left top; } #topbar a.resume:active, #topbar a.resumeactive{ background: url(resume_on.png) no-repeat left top; }

[dsonesuk]

I want to turn the images/buttons into links. How? I've tried three tutorials, and copied & pasted other people's helpful suggestions. None of it works. I need to understand if this is even possible using CSS, in order to start from a launching point to learning it through trial & error. I could make working buttons easily in Flash. But I want this to be in CSS/HTML.

But they already work as links all you have to do is create the page and add the pagename to the href="" <li><a class="games" href="mygamespage.html">Game Credits</a></li> <li><a class="tutoring" href="mytutoringpage.html">Tutoring</a></li> <li><a class="resume" href="myresumepage.html>Resume</a></li>

[Abby]

IT WORKS!!!!!!!!!!!dsonesuk, I don't know who you are, but I want to kiss you. I'm your new fan girl! Still having some problems, but this gives me something to work with. I was just about to sum up my problem like so: I don't understand why the images show up in the #topbar a and a:hover, but not in the individual classes for each link.So it looks like the solution was to write the classes like this:#topbar a.games:link#topbar a.games:hoverInstead of like any of these bad examples that I tried: #topbar .games a, #topbar .games a:hover#topbar.games a, #topbar.games a:hover#topbar a .games.games a, .games a:hover

[dsonesuk]

you have been defining selector and its class the wrong way round. <li><a class="games" href="#games">Game Credits</a></li>you define element type first 'a' then its class or id a.games, or if id a#games.your method#topbar .games a, #topbar .games a:hoverwould have css trying to find element with id #topbar, then element with class .games, then element of type a, which it will never find.Another Important Point:pseudo classes must be used in specific order:link:visited:hover:activeor to remember them by ' love hate'l = linkov = visitedeh = hovera = activete

[Abby]

Thanks! This is nice, easy to understand information. One more note: I simplified #topbar a.games:link, a.games:visitedto#topbar a.gamesThis seems to work just as well (although you can visit the page to be sure). Someone told me that :link wasn't working for him, when he was testing the code on his own.

[dsonesuk]

don't see why it should not work, anyway, seems to work ok on your site without any problems, i supposed you could have use#topbar a.games:link, a.games:visited, #topbar a.gamesto cover all options