• From: Minneapolis, MN
  • Registered: 2008-07-24

Topic: CSS Drop Down Menu Issue

I feel like I'm the only one using this forum... is that bad? Sorry I'm just still kinda new to CSS and I've got a lot of questions. I've been working on a site for a client which has a fancy drop down menu. I've been working on it, but I need help with the last element of it.

It's supposed to look like this (An image)

Here's what I've got so far (A website)

The first two links, About and Services are working right now. Services looks the nicest, but is missing the bottom, the About menu I'm experimenting around trying to get the bottom to work. What I'm trying to do is add a <span> around the inner menu to give me something to attach that bottom curved background image to.

Wondering if anybody could give me any advice, is the <span> the right way to go about this? Do you know of a better way? It's a tricky menu because it's rounded, and transparent.

Thanks for your help!

TheJester12's Website

  • From: Somerset, UK
  • Registered: 2007-06-21

Re: CSS Drop Down Menu Issue

The span might work, but it would need to go outside the <ul> not inside it (as that's invalid!) 

You've also got a couple of other invalid bits of code that would be worth ironing out: http://validator.w3.org/check?verbose=1 … testing%2F (for the onLoad, it should onload - xhtml is all lowercase)

You also might be able to add a class to the <ul> (so ul and ul.bottom do different things...) or add a class to the last <li> and hang it on there.

James Cooper --  God loving, banjo playing, geek!

jpc101's Website

  • bccarlso
  • Little Bit of Everything
  • Offline
  • From: Tacoma, WA
  • Registered: 2006-05-22

Re: CSS Drop Down Menu Issue

Yeah, usually adding an extra <span> or <div> allows you to put the bottom of an image in like that. Basically the Sliding Doors technique from ALA: http://www.alistapart.com/articles/slidingdoors/ and http://www.alistapart.com/articles/slidingdoors2/

Also, not sure if you're building it for IE6 as well, but things are rendering pretty off in that browser... hmm

ben † www.ben-carlson.com † twitter

bccarlso's Website

  • From: Minnesota
  • Registered: 2008-05-18

Re: CSS Drop Down Menu Issue

Just wanted to say that I really like the design. It's very clean. I'll play around with some suggestions and get them back to you soon.

Psalm 91 :: Still working on my personal site...

striving2overcome's Website

  • From: Minneapolis, MN
  • Registered: 2008-07-24

Re: CSS Drop Down Menu Issue

Thanks for the comments all, I will put the <span> back outside of the <ul> and try messing with it more. I think my main problem is with the position element of the css, I can't figure out how to get it to attach outside of the menu. Seems like it either disappears, or is inside of the menu itself.

I realize that I need to spend more time getting it to work consistently in all browsers, haven't done that yet. Thanks for the heads up though.

Thanks for the compliment striving... I'm excited about the site as well.

TheJester12's Website

  • From: Minneapolis, MN
  • Registered: 2008-07-24

Re: CSS Drop Down Menu Issue

Hey everybody, me again... This learning CSS process has been arduous and painful. I can't believe this is the supposed best way to design a website.

My navigation is almost working with the exception of IE6, still need to look into that more. But right now I'm just frustrated by small inconsistancies between browsers. Thanks for the ideas about the <span> that has seemed to work.

Wondering if anyone can answer my questions about why IE7 and IE6 will display a background color of a div, but Firefox just ignores it? The footer on the page is supposed to be light grey, stretching all the way across the page. Yet Firefox doesn't display that color at all. So frustrating.

Can anyone please help? http://www.jessesutherland.com/clients/testing/

TheJester12's Website

  • Registered: 2007-01-03

Re: CSS Drop Down Menu Issue

Not sure if you know this already, but there are several markup issues with duplicate id's used on the page. There are two "sidebarbox" and two "sidebarboxinside" ids used on the page.

ID's can only be used on a page once, while classes can be used more than once. If you want to use the styling in sidebarbox and sidebarboxinside more than once,

1. change the stylesheet to reference them as classes instead of ids (.sidebarboxinside instead of #sidebarboxinside).
2. change the markup to reference them as <div class="sidebarboxinside"> instead of <div id="sidebarboxinside">


Once you correct the markup issues, hopefully some of the display issues will be resolved.

HTH

"Change is inevitable, growth is intentional" - Glenda Cloud

Deborah's Website

  • Registered: 2005-11-02

Re: CSS Drop Down Menu Issue

First, it gets better.
Second, the guys are right: validate markup before working on CSS.
Next, if IE shows a background & FF does not, it's usually because IE is *incorrectly* clearing a float for you. If so, search this forum or Google for "clearing floats".

As for how to learn, building a site and learning as you go is the hard way, and there are now better resources:
* Try the Web Standards Curriculum, available free from Opera.
* Or the book "Build Your Own Website the Right Way..." from SitePoint by Ian Lloyd.

"I was blind, but now I see!"  John 9:25

Montgomery's Website

  • Registered: 2007-01-03

Re: CSS Drop Down Menu Issue

To follow up on Montgomery's post, I've found Opera's Web Standards Curriculum to be well-organized and easy to understand.

"Change is inevitable, growth is intentional" - Glenda Cloud

Deborah's Website