simple css question

D

dorayme

ojorus said:
Hi;

I've got a horizontal two-level menu, where level 2 is shown by mouseover
on a level 1-element.
Code here: http://melistra.com/test/menu.html (CSS:
http://melistra.com/test/style.css)

I want level 2 to always start to the left (as it now does on "produkter",
but not on "om oss").
How can this be done?


Before doing anything about second level, please fix up the basics:

<http://dorayme.890m.com/alt/justPics/pixelfonts.png>

Do not use px for font-sizes in general.
 
R

rf

ojorus said:
Done! :)

Now, any ideas?

Yes. Don't top post.

Secondly, get rid of all the other "pixel perfect" dimensions in there.

In fact get rid of ALL the dimensions. Let the browser size things according
to your content.

With my font size (that I choose) your dropdown menu overlaps the top menu.
Badly.

As to your original question this dropdown menu is *deigned* so that the
dropdown is directly under the dropper. That is why the dropdown is a child
of the dropper. If you want something different you will have to use a
different approach entirely. For a start remove position: relative from
#menu ul li, so the dropdowns now position relative to the next higher
containing block. Probably enclose the top level menu in a containing block
so the dropdowns are relative to that and not to the body. That should get
you started.

Search the archives for this group. Dropdown menus are discussed so many
bloody times it should be an FAQ :)

BTW you should be aware that this simply does not work with IE6. You need to
add a sprinkling of javascript or some devious conditional comment
skulduggery.
 
D

dorayme

ojorus said:
Done! :)

Now, any ideas?

ojorus

På Wed, 22 Oct 2008 10:59:46 +0200, skrev dorayme

Have you actually upped the text size to see what happens to your menu
still?

Do not use px to size elements if fonts will quickly spill out of them
when a user makes the text size. Be careful of using units with
line-height, (you use px).

I tell you these things not to be awkward but because they are
particularly important for drop down menus where space is at a premium.

And please don't top post.

Your "top: 20px" is too small, try 1.5em

If you want all the second levels to start at far left you will lose
simplicity and generality. One thing is possible but I have not studied
your code in detail is this, class the second level sub ul for the
second top item. Eg:


<ul class="secondItemSubs">
<li><a href="page4.html" title="">Strategi</a></li>
etc

and since you know the approx em width of the first top item,
"PRODUKTER", you might be happy to add:

ul.secondItemSubs li {left:-6em;}

to your CSS.

ahem!
 
D

dorayme

"rf said:
Yes. Don't top post.

Secondly, get rid of all the other "pixel perfect" dimensions in there.

In fact get rid of ALL the dimensions. Let the browser size things according
to your content.

With my font size (that I choose) your dropdown menu overlaps the top menu.
Badly.

As to your original question this dropdown menu is *deigned* so that the
dropdown is directly under the dropper. That is why the dropdown is a child
of the dropper. If you want something different you will have to use a
different approach entirely. For a start remove position: relative from
#menu ul li, so the dropdowns now position relative to the next higher
containing block. Probably enclose the top level menu in a containing block
so the dropdowns are relative to that and not to the body. That should get
you started.

Search the archives for this group. Dropdown menus are discussed so many
bloody times it should be an FAQ :)

BTW you should be aware that this simply does not work with IE6. You need to
add a sprinkling of javascript or some devious conditional comment
skulduggery.

In fact look at
<http://www.htmldog.com/articles/suckerfish/dropdowns/>

where there is provision for IE6
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top