SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict trinity0159's Avatar
    Join Date
    Jul 2002
    Location
    California
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Hover Question

    Could someone please help me with a little problem. If you take a look on the site http://www.ckmeyer.net/healthfoundation/ and hover over the foundation grants link, you see the a pop up menu appears but when you mouse over the pop up menu the purple hover over the foundation grants link disappears.

    My question is does anyone know if it is possible to keep the purple color over the foundation grants link while hovering over the pop up menu? If it is possible how is this done.

    Thanks.

  2. #2
    SitePoint Member Suzy's Avatar
    Join Date
    Oct 2004
    Location
    Scotland
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    yes it's possible

    It involves adding in some more specific selectors..

    I also noticed some other things wrong with the menu notably it looked totally different in FF than it does in IE, not unusual

    Also in all browsers the dropdown links are "underneath" the main list..

    I changed a few things to fix what I saw, but hope this code helps, I have the purple color remaining on the main menu list even when the dropdown is working, which is what i think you wanted?

    I isolated the menu from the table which is why the the .menu column float & height is commented out, you will probably need to put them back


    Code:
    .menucolumn {
       background-color: #CCCCCC;
       width: 180px;
       margin-top: 10px;
    /* float: right; */
    /* height: 95%; */
    }
    
    #mainmenu {
       width: 180px;
    }
    
    #mainmenu ul {
       margin: 0;
       padding: 0;
       list-style-type: none;
       width: 180px; /* Width of Menu Items */
    }
    
    #mainmenu li {
       margin: 0px;
       padding: 0px;
       height: 1.5em; 
       line-height: 1.5em; /* rather than padding-top and bottom */
       width: 180px;
    }
    
    #mainmenu ul li ul {
       position: absolute;
       left: 160px;
       top: -5px; /* this needs to be this for non-ie, IE's value is hacked in below */
       display: none;
       background-color: #33FF00;
       padding-bottom: 5px; /* to replace very bottom margin, using a top and bottom margin on the a was causing margin collapse problems */ 
    }
    
    
    #mainmenu a {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 12px;
       font-weight: bold;
       text-decoration: none;
       color: #000000;
       background-color: #CCCCCC;
       display: block;
       margin-top: 5px; /* all links have a top margin to show background color and then the list itslef has 5px bottom padding to complete the look */
       padding-left: 24px;
    }
    
    /* changed this to the hovered li so that dropdown appears on top */
    #mainmenu ul li:hover, #mainmenu ul li.over {
       position: relative;
    }
    
    /* this sets all hovered li's and links to have the purple background */
    #mainmenu li:hover a, #mainmenu li.over a,
    #mainmenu li:hover li a:hover, #mainmenu li.over li a:hover {
       color: #FFFFFF;
       background-color: #400072;
    }
    
    /* this sets the the intial state of the dropdown back to default until it's hover over again*/
    #mainmenu li:hover li a, #mainmenu li.over li a {
       color: #000000;
       background-color: #CCCCCC;
    }
    
    #mainmenu li:hover ul, #mainmenu li.over ul { display: block; } /* The magic */
    
    /* Holly Hack. IE Requirement \*/
    * html #mainmenu ul li { float: left; height: 1%; }
    * html #mainmenu ul li ul {top: 0; /* IE's top position is different due to margins */}
    * html #mainmenu a {height: 1%; /* to make display: block work properly */ }
    /* End */
    if you need more explanation, or run across problems trying to fit menu into the table, ask away.

    Suzy

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Suzy,

    Thats an excellent and well accomplished solution

    Good work

    Paul

  4. #4
    SitePoint Addict trinity0159's Avatar
    Join Date
    Jul 2002
    Location
    California
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help Suzy.

    I was trying to understand the way the css was working and could you please explain to me a little more about this part of the css

    /* this sets all hovered li's and links to have the purple background */
    #mainmenu li:hover a, #mainmenu li.over a,
    #mainmenu li:hover li a:hover, #mainmenu li.over li a:hover {
    color: #FFFFFF;
    background-color: #400072;
    }

    Thanks again.

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

    I'm sure Suzy will want to explain this fully but I can give you a quick pointer.

    The first part of the code here:
    Code:
    #mainmenu li:hover a, #mainmenu li.over a,
    That refers to your main list (not the sublists) and gives the purple rollover when a list item is hovered and applies the style to the anchor.

    This code:
    Code:
    #mainmenu li:hover li a:hover, #mainmenu li.over li a:hover
    The above refers to the sublists (e.g. li li) A list that is a child of a list. So when a list is hovered the child list with an anchor that is also being hovered will be styled.

    The .over style that is used above in each example is the version for ie that is made to work through the JS function and applies to the same elements.

    Paul

  6. #6
    SitePoint Addict trinity0159's Avatar
    Join Date
    Jul 2002
    Location
    California
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I understand it much better now.

    Trinity

  7. #7
    SitePoint Addict trinity0159's Avatar
    Join Date
    Jul 2002
    Location
    California
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Two more questions. I understand most of what the below code says but my question is when you group elements together the way the elements are grouped below does that mean they all happen at the same time which is what makes the mainlist item stay hovered while the child list is being hovered?

    Code:
    #mainmenu li:hover a, #mainmenu li.over a,
    #mainmenu li:hover li a:hover, #mainmenu li.over li a:hover {
    color: #FFFFFF;
    background-color: #400072;
    }
    My second question is why would I need both a height and a line-height attribute? (I am unfamiliar using line-height, just use to padding.)

    Code:
    #mainmenu li {
     margin: 0px;
     padding: 0px;
     height: 1.2em;
    	line-height: 1.2em; /* rather than padding-top and bottom */
    }

  8. #8
    SitePoint Member Suzy's Avatar
    Join Date
    Oct 2004
    Location
    Scotland
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the pointer.. Paul

    I'll try answer but excuse if I ignore the order of questions as the second one actually helps answer the first

    So second question first.. Grouping the selectors together does not mean that they happen at the same time. This is where the cascade and/or specificity (see link later) becomes important.. unless you overrule one of those selectors later in the cascade with a more specific rule they will always do what what you want.. grouping them only saves you from applying the same ruleset many times..

    #mainmenu li:hover a, #mainmenu li.over a,
    #mainmenu li:hover li a:hover, #mainmenu li.over li a:hover {
    color: #FFFFFF;
    background-color: #400072;
    }

    /* this sets the the intial state of the dropdown back to default until a child li li hovered over again*/
    #mainmenu li:hover li a, #mainmenu li.over li a {
    color: #000000;
    background-color: #CCCCCC;
    }
    Dropdown menus take a wee bit of getting used to CSS hover wise.
    You wanted the hover color to remain on the first list while you were hovering on the second (sub) list.. this is achievable when you know that when you are hovering over a nested list you are actually still hovering over the parent <li> that activates the nest..

    <ul>
    <li class="parent">nested list heading
    <ul>
    <li class="child">dropdown list</li></ul>
    </li>

    </ul>

    so if you were to hover over the words "dropdown list" you are hovering over the child class but you are also still hovering over the parent class as it is not closed yet... so one hover rule will target both...

    That was the easy bit, targetting the hovers, making the parent class have an effect while you hovered over the child class, it's easy because they are both hovered <li>'s therefore no extra specifics are required, i.e. it is the same thing! #mainmenu li:hover a, #mainmenu li.over a targets all hovered links within the #mainmenu list in one fell swoop!

    So in the first instance all <li>'s and links are treated as being hovered (Rule 1 part 1)... but then I presume you didn't want all of the nested hover links to show "active" until you hovered them specifically? So it was a case of make a (non hovered) child <li> of a hovered parent <li> non "active" .. (now it's getting specific ) hence the second rule... (rule 2 part 1)
    #mainmenu li:hover li a, #mainmenu li.over li a

    ..until the child itself become hovered in which case it becomes the hovered child of a hovered child..and that is the second part of the first rule.. #mainmenu li:hover li a:hover, #mainmenu li.over li a:hover because nothing else will match this specific a rule (unless you had another level of nests) you can group it with the same colors you specified earlier.. it doesn't matter if it's grouped or earlier in cascade it's the specificity of the rule that makes it work!

    well OK that's probably double dutch.. but another way would be to check out the recs... SEE: Calculating a selectors specificity..

    or just ask again ..

    Suzy

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Two more questions. I understand most of what the below code says but my question is when you group elements together the way the elements are grouped below does that mean they all happen at the same time which is what makes the mainlist item stay hovered while the child list is being hovered
    When you group elements together its just for ease of use when you are applying the same styles to different elements. It makes no difference say from this.
    Code:
    #test1 {color:black}
    #test2 {color:black}
    Which could be written like this:
    Code:
    #test1, #test2 {color:black}
    There is no implied relationship in the statement as the comma just separates the styles completely.

    The child list stay hovered because you are applying the style to the child lists anchor. You are also applying the style to the childs parent. They could be in separate style blocks of their own and would still work.

    My second question is why would I need both a height and a line-height attribute? (I am unfamiliar using line-height, just use to padding
    When you set the line-height to the same height as an element then the text is vertically aligned within the line-height by default. Therefore it is vertically aligned within the element itself so no padding is required. This technique is useful for lines of text that don't wrap and is commonly used in menus like yours. Line height modifies the height of the inline boxes which make up a line of text.

    In simple terms line-height is made of the height of the text plus an amount that is applied above and below the text to equal the line-height set (although its a bit more complicated than that).

    Paul

  10. #10
    SitePoint Member Suzy's Avatar
    Join Date
    Oct 2004
    Location
    Scotland
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    line height...

    My second question is why would I need both a height and a line-height attribute? (I am unfamiliar using line-height, just use to padding.)
    line height will make the text vertically center in the line height provided (providing there is no wrapping of lines) Using it if you can helps avoid box model issues..but mainly I think I used it here because I knew a dimension of some sort would have to hacked in for IE's "display block" and I often find it easier to use height because width can be unusable when side paddings margins are required..

    In this case the hacked height
    * html #mainmenu a {height: 1%; /* to make display: block work properly */ }
    in the conditional comment is taking care of IE's problems so use of line height was possibly unneccesary in this example.. but I'd allowed for it (like cleaning my teeth it's habit) and then never used it...

    Suzy

  11. #11
    SitePoint Member Suzy's Avatar
    Join Date
    Oct 2004
    Location
    Scotland
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jeepers...

    give me time to type Paul

    LOL.. three crossed posts.. hehe do they say the same ?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Sorry Suzy - My fault

    and you said it so much nicer than me

  13. #13
    SitePoint Addict trinity0159's Avatar
    Join Date
    Jul 2002
    Location
    California
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul and Suzy this helps me understand it so much. I really want to learn more advanced CSS such as creating dropdown menus like this. Is there a book or a site you can point me to? How did you both learn so much?

    Trinity

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    How did you both learn so much?
    Well I can't quote for Suzy but a lot of it is experimenting and finding answers to all the questions on forums like sitepoint. I like solving puzzles and if I see a question that doesn't look like it can be solved then I will try to find a solution.

    I try to read as many books as I can and also look at the many good sites on the web that have talented people behind them.

    Even when you think you know the basics theres nothing better than testing out thetheory to see how it works (and how it doesn't). There seems to be 2 sides to CSS - "The theory" and the "what works in practice". You need to have a good understanding of both so that you can code correctly for the situation.

    Also pick up as much information as you can from other people who know what they are doing (like Suzy) or any of ther sitepoint team, all of whom can share a lot of knoweldge. Once you've learned something then try it out and test it in different situations to make sure you really understand it.

    There's no substitute for practice (and trial and error). If you look through the forum posts you will probably pick up something new every day. I'm always looking out for different (and better) ways of doing things and there are some knowlegeable people about and some of that knowledge will eventually rub off .

    Paul

  15. #15
    SitePoint Member Suzy's Avatar
    Join Date
    Oct 2004
    Location
    Scotland
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ditto...

    much the same as Paul

    I learnt from others, and the W3 Recs, I have books now which I've been given, but I didn't really learn anything new from them by the time I got them.. I do have a basic XHTML/CSS Book which was the first book I ever bought for the purposes of learning to hand code HTML and that just happened to contain the CSS properties (I was using them before I even really knew what they were and I still use that as my trusty reference when the brain cells fog up..

    There seems to be 2 sides to CSS - "The theory" and the "what works in practice". You need to have a good understanding of both so that you can code correctly for the situation.
    Very Well Put!

    Personally the best way I can think of to do this is to tackle those CSS bugs..and not because you're necessarily interested in them but more to find out why they are bugs. Copy/Paste the examples and follow the links in the articles to the W3C Recommendations. Whether you like/believe in them or not that is where you learn CSS straight from the horses mouth! Test the bug examples in different browsers to see the difference ie. compare the "what should work" with the "what does work" first hand.. it's a little hard to understand the Recs at first but keep at it.. and compare it to what the knowledgeable folks at forums (Paul) says eventually you'll start to match the english with the "geek speak".

    IMHO following the "bug" path serves 2 purposes.. you learn where to find fixes for them when you come across them and as a bonus if you can understand why they're bugs you understand CSS

    Make loads of pretend pages, try the CSS Zen Garden (even if just as a personal exercise)...

    Oh and after all that stick around in the forums and help others do what you just did

    Suzy

  16. #16
    SitePoint Addict trinity0159's Avatar
    Join Date
    Jul 2002
    Location
    California
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both of you for all the help.


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
  •