Grow your CSS skills. Land your dream job.

CSS Question :)

  • # July 17, 2011 at 5:58 pm

    Hey guys,

    I’m new to CSS and I’m trying to code a design that I made.
    See Design Sketch Here

    As you you can see, I am trying to create two separate menus on the right side of the design that are positioned within the header.

    My HTML is as follows:

    I was able to set up the CSS sheet for the top menu successfully (ul#navTopRight), but I am struggling to style the main menu (Menu 1, Menu 2, Menu 3) in the exact position that I want.

    .cAlign {
    width: 960px;
    margin: 0 auto;
    }

    div#header {
    height: 110px;
    background: #red;
    }

    a#logo{
    float: left;
    margin: 30px;
    }


    ul#navTopRight {
    float: right;
    margin-top: 0px;
    margin-right: 30px;
    z-index: 100;
    position: relative;
    list-style-type: none;
    }

    ul#navTopRight li {
    float: left;
    position: relative;
    }

    I will sincerely appreciate someone’s help as I’ve been trying to do this for 3 hours. Thanks so much! God bless.

    # July 17, 2011 at 7:49 pm

    You need to “clear” the first float. Google for clear floats, there are several methods to do this.

    # July 17, 2011 at 7:55 pm

    In my opinion and many others, I would use the clearfix method as it takes away the extra div.

    # July 17, 2011 at 8:53 pm

    Agree with @ChristopherBurton

    # July 17, 2011 at 8:54 pm

    virtual, you’re correct that he needs to clear the first floating nav. However, there are not several ways to do it. There’s but one – clear: right (or both; which could be considered two ways, but its still just a clear).

    You’re confusing the several methods of containing floats with clearing them (with another element) being one way to contain them.

    # July 18, 2011 at 1:56 am

    umm here’s what you want to do i believe

    http://jsfiddle.net/3pjPS/

    just take that and modify it to what you need!

    # July 18, 2011 at 2:31 am

    Great work @furrball1383, I have taken your fiddle, made it more semantic and included HTML5 elements. I have also fixed the floating of the menu items (they were all backwards). I have only made small improvements, you did 99% of the work.

    Here is the fiddle.

    # July 18, 2011 at 6:09 am

    thanks sl1dr, I didn’t want to spend too long on it as i was working on something else, so I just filled in the parts of coding that he needed and figured he’d do the rest himself, but now that you’ve fixed it up I can’t help but say aww I should have done it, it looks so much better :D I had previously slip up the bottom menu, but then i removed the gaps as his image shows one unified menu as opposed to the log in and sign up buttons also, I floated the menus right because I didn’t want to have to specify the margin from the left to put them in the same place. is there a reason to stick to a left float? Also, what exactly does the .class group:before and :after do? I’m guessing thats the html5 stuff and I have no clue what it does.

    # July 18, 2011 at 6:58 am

    @furrball1383 The reason I used float: left; is so that the menu items are ordered correctly. Try it out, change it to right and run the fiddle again, you will see what I mean.

    The group class is there for the clearfix hack, that way I don’t have to have a non semantic div clearing the floats.

    # July 18, 2011 at 7:14 am

    ahh I see what you mean about the float. and I guess the clearfix hack is a choice between a few more lines of code or a non semantic div. I can see the clearfix hack being useful if you’re going to need it in a website with a lot of pages and content, but for a simple website that probably needs to clear 4 or 5 times I’d just use the div instead.

    # July 18, 2011 at 8:53 am

    I think you guys might be confusing the OP. First, the clearfix is NOT needed. A floating element (the ul) will automatically contain any floating children (one of the containment methods). Second, the menus (ul) should be floating to the right to place on the right side (your examples are very narrow and show it as on the right, but make it wide and its not so). You can float the children (li) to the left to maintain the correct source order. Third, the clearfix is but one of several ways to contain floats (using an extraneous div being the worst, as far as semantics are concerned).

    # July 18, 2011 at 9:30 am

    @wolfcry911 I was having problems viewing the link, and as such had little information to go off.

    # July 18, 2011 at 2:36 pm

    i did initially use right floats, but either way works for me i guess apparently I can not see the matrix through my code as you guys do :P I’m still an amateur so I’m not good at keeping up semantics and such. It seems that every time i try to catch up i get left further behind. I was just getting a grip and css3 and html 5 came along and now i’m floundering in a sea of info again :D thank god for css tricks and tons of you guys answering my silly questions :D

    # July 18, 2011 at 4:07 pm

    Wow guys @furrball1383 and @sl1dr – I am so unbelievably thankful for your help, and time!!. You saved me hours of more pondering. I just started learning CSS this week and sometimes I stumble like crazy…

    You guys rock!!!

    # July 18, 2011 at 9:58 pm

    you’re welcome @baumdexterous it is kind of painstaking to figure out how various properties interact when you first start out and to determine which ones to use, keep at it and you’ll find that you’ll be having fun with it in no time! If you want a useful resource look in http://w3fools.com/#cssquiz under the ‘what’ or ‘what should be done’ section. I myself picked up what I did from W3C but the resources listed on the link i just posted are better and as the site points out w3c has quite a few problems with what its teaching.

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