Grow your CSS skills. Land your dream job.

Navigation problems

  • # March 3, 2011 at 10:11 pm

    This has been irritating me for hours now, which is stupid. All i am trying to do is have the link get a black background when hovered over and the text to turn white, but i am finding it impossible, the link height is too high but if i change it the text just disapears instead of moving up with it as i would just like the black background to be around 7px around the text and to sit ontop of the diagonal lines.

    http://www.lsw-design.com/sgraphics3/

    Can anyone please let me know what i am doing wrong or not doing at all?

    Thanks.

    # March 3, 2011 at 10:49 pm

    Start by adding display: block; to your anchors. Eg:

    .left-menu a {
    color: black;
    display: block;
    }

    You should be able to get it from there!

    # March 3, 2011 at 11:11 pm

    A couple other things I noticed:

    Your h4 appears to have margins so I would set your h4 margins to 0

    h4 { margin:0; }

    You can then adjust the height and margins of your “left-menu” div.

    .left-menu { height: 22px; margin-top: 134px; }

    This should almost get you there.

    # March 4, 2011 at 12:18 am

    Its also invalid. In html4 you can’t have a block level element in an anchor.

    # March 4, 2011 at 3:00 am

    Broooooooooooseph you can have a block level element in an anchor if you make the anchor a block, yeah?

    # March 4, 2011 at 8:04 am

    no, not in html4 or xhtml – but it’s fine in html5

    # March 4, 2011 at 12:42 pm

    Thanks a lot for the help, was really annoying me last night.

    # March 4, 2011 at 2:09 pm

    Got something to ask again, how would i get the text in the drop down menus to be white, i’m not sure how to target them without adding a load more id/classes to each link?

    # March 4, 2011 at 4:04 pm

    It looks like you’ve already got it working, but I’ll put this just in case.

    To target just the drop down links, you could do something like this:

    ul li ul li a { color: whatever; }

    # March 4, 2011 at 7:50 pm

    Yeah i managed to get it after a few more minutes of thinking, thanks for posting though.

    I am now wondering why i can’t get the links in the footer to display in a list, i have tried adding display:inline to everything, and doesn’t seem to work so i am guessing it is something else?

    # March 4, 2011 at 7:58 pm

    In a list? What do you mean, on top of each other?

    # March 5, 2011 at 8:40 am

    Yes i mean on top of each other

    # March 5, 2011 at 2:45 pm

    Does someone know how to solve this?

    # March 6, 2011 at 1:27 pm

    Well they’re being displayed inline so they will be IN LINE :P

    Display them as block and remove float:left.

    # March 6, 2011 at 9:22 pm

    Thanks for that, not sure why i was putting inline, got confused with the normal nav i guess.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".