simple css question

Discussion in 'HTML' started by ojorus, Oct 22, 2008.

  1. ojorus

    ojorus Guest

    ojorus, Oct 22, 2008
    #1
    1. Advertising

  2. ojorus

    dorayme Guest

    In article <>,
    ojorus <> wrote:

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

    --
    dorayme
    dorayme, Oct 22, 2008
    #2
    1. Advertising

  3. ojorus

    ojorus Guest

    Done! :)

    Now, any ideas?

    ojorus

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

    > In article <>,
    > ojorus <> wrote:
    >
    >> 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.
    >




    --
    Sendt med Operas revolusjonerende e-postprogram: http://www.opera.com/mail/
    ojorus, Oct 22, 2008
    #3
  4. ojorus

    rf Guest

    "ojorus" <> wrote in message
    news:eek:...
    > 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.
    rf, Oct 22, 2008
    #4
  5. ojorus

    dorayme Guest

    In article <>,
    ojorus <> wrote:

    > Done! :)
    >
    > Now, any ideas?
    >
    > ojorus
    >
    > På Wed, 22 Oct 2008 10:59:46 +0200, skrev dorayme
    > <>:
    >
    > > In article <>,
    > > ojorus <> wrote:
    > >
    > >> 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.
    > >


    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!

    --
    dorayme
    dorayme, Oct 22, 2008
    #5
  6. ojorus

    dorayme Guest

    In article <uEDLk.7714$>,
    "rf" <> wrote:

    > "ojorus" <> wrote in message
    > news:eek:...
    > > 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.


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

    where there is provision for IE6

    --
    dorayme
    dorayme, Oct 22, 2008
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    713
    clintonG
    Dec 24, 2004
  2. Replies:
    6
    Views:
    549
    Jonathan N. Little
    Mar 18, 2006
  3. AF
    Replies:
    17
    Views:
    599
    Nije Nego
    Aug 9, 2006
  4. Replies:
    29
    Views:
    878
    Ben C
    Mar 21, 2008
  5. richard
    Replies:
    12
    Views:
    753
    dorayme
    Mar 9, 2010
Loading...

Share This Page