Help with 2 line menu using CSS

[stlredbird97]

I just recently started teaching myself web design (been doing mostly print design for the last 8 years) and trying to utilize CSS. On the site I'm working on I need to create a menu where each category has 2 lines of copy (see attached) and for some reason I can't get it to work inline. I've been trying different list options ul and dl but no luck so far. I don't need a drop down menu or anything, the second line of text will always show, only the top portion will rollover white on hover (which the rollover isn't the problem just getting it to format correctly). I'm getting crazy frustrated, I'm such a noob

Thanks

 

[sysgenmedia]

One quick and dirty way to get this done would be to turn it into 4 graphic pieces (Home / About us, Services / What we can do, Portfolio / What we have done, and Contact / Reach Out) and just place the images next to each other.

Then make another image of each piece where the text is white, and use a quick bit of javascript to do an image swap onMouseOver and onMouseOut.

You could probably toy with CSS for a while to try to get it done, but getting it to work across all browsers with pure CSS would probably be fairly painful.

 

[Doddlin]

perhaps you could use a table with id's on each "tablerow" and then style them in your css?

 

[PixelPusher]

stlredbird97,

I would not recommend using javascript for the menu nor a table! These are both inefficient methods. Tables are not designed for this type of application, and there is no need to use javascript for such a simple task.

Yes you can build it with CSS only and it will work fine in all browsers.

What you will need to use is an unordered list (UL), some anchor tags (A) and a sprite image. By looking at you attachment, the links at the top would be image based and the smaller links underneath would be text based, correct?

 

[anna]

Pixel is right; tables are really bad, and images/java for nav= little to no searchability.

I did the same sort of menu; I would suggest using the sons of suckerfish hybrid menu or a list apart's hybrid tutorial.

also, if you search the threads, I asked the same question a couple of months ago, and got quite a few responses.


**Oh- if you want to pay; projectseven.com has a horizontal menu you can purchase that will do the work for you. Here is the link:

http://www.projectseven.com/products/menusystems/tbm/index.htm

Good luck!