Help with 2 line menu using CSS

stlredbird97 · 03-10-2010, 06:26 PM

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 · 03-10-2010, 10:18 PM

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 · 03-10-2010, 11:18 PM

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

PixelPusher · 03-12-2010, 04:03 PM

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 · 03-15-2010, 03:25 PM

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.../tbm/index.htm

Good luck!

03-10-2010, 06:26 PM	#1
stlredbird97 New Member Join Date: Mar 2010 Posts: 2	Help with 2 line menu using CSS 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

03-10-2010, 10:18 PM	#2
sysgenmedia Bronze Member Join Date: Feb 2010 Location: Huntington Long Island New York Posts: 79	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. __________________ Sysgen Media is a long island website design company. In addition to website design services and Joomla! CMS expertise, we provide Magento consulting, search engine optimization (SEO), website hosting, and general website consulting services. We have a combined 15+ years of experience in website development. To learn more about us visit http://www.SysgenMedia.com. Need a vendor locator, dealer locator, or store locator? Check out our Store Locator extension for Joomla!

03-12-2010, 04:03 PM	#4
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,050	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? __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

03-10-2010, 11:18 PM	#3
Doddlin New Member Join Date: Mar 2010 Posts: 1	perhaps you could use a table with id's on each "tablerow" and then style them in your css?

03-15-2010, 03:25 PM	#5
anna Platinum Member Join Date: Jul 2009 Location: Michigan Posts: 501	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.../tbm/index.htm Good luck!