Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Question :)

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #33536
    baumdexterous
    Participant

    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.

    #83514
    virtual
    Participant

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

    #83515
    chrisburton
    Participant

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

    #83521
    wolfcry911
    Participant

    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.

    #83530
    furrball1383
    Member

    umm here’s what you want to do i believe

    http://jsfiddle.net/3pjPS/

    just take that and modify it to what you need!

    #83538
    furrball1383
    Member

    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.

    #83541
    furrball1383
    Member

    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.

    #83546
    wolfcry911
    Participant

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

    #83566
    furrball1383
    Member

    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

    #83573
    baumdexterous
    Participant

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

    #83589
    furrball1383
    Member

    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 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.