Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Sponsored Links



HTML- simple css question

Software Development


Reply
 
Thread Tools Search this Thread
  #1  
Old 25-10-2008
Member
 
Join Date: Oct 2008
Posts: 161
HTML- simple css question
  

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
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?

Reply With Quote
  #2  
Old 25-10-2008
Member
 
Join Date: Mar 2008
Posts: 232
Re: HTML- simple css question

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.
Reply With Quote
  #3  
Old 25-10-2008
Member
 
Join Date: Feb 2008
Posts: 102
Re: HTML- simple css question

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.
Reply With Quote
  #4  
Old 25-10-2008
Member
 
Join Date: Mar 2008
Posts: 232
Re: HTML- simple css question

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.
Reply With Quote
  #5  
Old 25-10-2008
Member
 
Join Date: Feb 2008
Posts: 102
Re: HTML- simple css question

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

where there is provision for IE6
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "HTML- simple css question"
Thread Thread Starter Forum Replies Last Post
Question about SanDisk sansa Clip Zip playlists question VARIJ Portable Devices 8 27-01-2012 01:14 PM
Driver question -PCI Simple Communications Controller Bailee Windows Software 4 21-08-2010 06:30 AM
Simple Workgroup question. technonot5000 Networking & Security 3 02-11-2009 02:40 PM
How to define HTML Validator and services provided by HTML Validator Aldous Software Development 3 22-09-2009 01:12 PM
Simple MYSQL Normalization question - input requested ByteCoder Software Development 1 19-02-2009 12:14 PM


All times are GMT +5.5. The time now is 10:28 PM.