SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS Horizontal menus

    Hi guys -
    I have done a search through the threads - and using this one example which was an answer to another guys question::

    http://www.beyondyourdreams.co.uk/CSSTEST2.htm

    (view source has all the code)

    Problem is - when you rollover magazine - the first list item (news)does not fall beneath it but it covers some of the word magazine

    Any ideas?

    Also, to put a black border around each word in the menu do you just use the border attribute in CSS?(so each word is in a block)

    And if i had an image directly below the menu, how would one make the dropdownlist (news ect ) background transparent??,

    Thanks! I looked at the suckerfish Tutorial but their example does not work in my browser!

    I appreciate any quick tips & help!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Only in IE

    It's fine in FireFox. It's something to do with IE doubling pixel values in margins. Try adding this then playing with it until it works.


    PHP Code:
    /* Hide from IE Mac \*/
    html li ul li {
    margin-top4px;
    margin-left4px;
    }
    /*end hide*/ 
    What that does is it allows you to set the margins for IE alone. Of course, the mac version doesn't render the same, so we apply the backslash hack to keep IE Mac from seeing this.
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face ;)

    Ok, thanks!

    Not quite sure what you mean by "playing with it till it works" -
    what else do i need to do??

    Hey if i knew i wouldnt be posting hehehe!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sorry...

    Was in a rush yesterday...

    I meant by changing the values for margin-left and margin-top until it lined up perfectly.
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    For ie you just need to set the top position of the nested ukl correctly.

    Code:
    li ul { /* second-level lists */
     display: none;
     position: absolute;
     top: 100%;
     width: 5em;
     left: 0;
    }
    Heres a simple example with borders around that may help you to understand.

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

    You will find it easier to make the drop downs uniform widths as above as it soon gets very difficult if you want differing widths for each menu item and for each drop down.

  6. #6
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yayay thanks paul a working example!
    I will look at it tonite!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  7. #7
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul -
    Quick one -

    How do you move this menu a little bit to the right?

    I see its in a Nav - but thats attached to the javascript?

    dee
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  8. #8
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Padding- left.. I got it!!!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  9. #9
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Talking to myself here!

    Unfortunately padding - left moved the dropdown list items to the left to so now they are not lined up -

    Any ideas thanks!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Which bit do you want to move exactly?

    The whole menu system or just the words inside the menu?

    If its the whole menu system then you can moxe it using margin-left etc on the style for the ul. You can even absolutely position it wherever you want and it will still stay together. Its best to keep it in the flow though and just use margins to position it where it needs to be.

    If you just want to move the text in the menu then you can use padding left in the anchor styles to move the text over (or use text-indent).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •