Forums

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

Home Forums CSS Navigation Bar

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #46491
    Looking2Learn
    Participant

    Hi Guys,

    Quick thank you for all the previous help, been really helpful and i’m getting their slowly.

    Sure this one wont be much of a challenge for you guys!

    Currently having problems with my navigation bar, its leaving space above and to the right of the bar itself, so basically the background color of the bar is of the body instead of the wrapper, i’m also finding it hard to have the bar neatly in the center of the page as appose to either the left or the right, please see below for my css:

    #wrapper {
    width: 900px;
    height: auto;
    margin: 0 auto;
    background: #fff;
    }

    #header{
    float: left;
    background: white;
    margin: 0 0 0 0;
    width: 100%;
    height: 120px;
    }

    #navigation ul{

    width: 100%;
    float: right;
    margin-bottom: 0px;
    padding: 0px;

    }

    #navigation ul li{

    float: left;
    list-style-type: none;

    }

    #navigation ul li a{

    display: block;
    padding: 8px 20px 8px 20px;
    text-decoration: none;
    font-family: aerial;
    font-weight: bold;
    font-size: 14px;
    color: grey;
    border: 1px solid #BBBBBB;
    background: white;
    }

    #content{

    float: left;
    background: white;
    margin-bottom: 0px;
    padding: 0px;
    width: 100%;
    border-radius: 6px;

    }

    I would like the sizing and placement of my bar to be similar to this page:

    http://www.theplayersagency.com/

    Again so appreciative of your time and help.

    Enjoy your evenings

    Joshua

    #143411
    jurotek
    Participant

    Put it on [Codepen](http://codepen.io/pen/ “”)

    #143415
    jurotek
    Participant

    > I’d look for one that was built much better than the one in the link you provided

    Agree. Browsers are smarter then we think. It knows that a is inside li and li inside ul so the mark up is not efficient and redundant. Something like this will work better. Here’s CSS

    .navigation {your styles}
    .navigation li {your styles}
    .navigation a {your styles}
    .navigation a:hover {your styles}
    .navigation a.active, .navigation a.active:hover {your styles}

    and HTML

    If I don’t use dropdowns I don’t use unordered list for nav at all

    .navigation {your styles}
    .navigation a {your styles}
    .navigation a:hover {your styles}
    .navigation a.active, .navigation a.active:hover {your styles}

    and HTML

    #143517
    Looking2Learn
    Participant

    Hi,

    Thanks for the response, so i have put it into code pen, notice the space above and to the right at the navigation bar?

    At this point i’m just looking to keep it as simple as possible while learning.

    http://cdpn.io/tblDm

    Kr

    #143521
    amoss
    Participant

    http://codepen.io/anon/pen/vjbBd

    Removed a div as noted in the html.

    #143525
    Alex
    Participant

    Automatic margins are being applied to the ul, just set margin to zero, I see you have already done it to the bottom.

    #143528
    Looking2Learn
    Participant

    Thank you that is very helpful!

    I have cleared the space at the top through the margins, but am still left with space to the right, if I try and “center” the bar, it becomes vertical, if i increase the width it becomes vertical, do i increase the padding instead? Code pen below:

    http://cdpn.io/ylpwq

    Kr

    #143529
    Alex
    Participant

    You could add a width to the li, something like 15%, or you could do a bit of math and set exact pixels. Or you could leave it how it is and style the parent div wrapping it all. Keep in mind that your #navigation is collapsed because you floated your ul, you can use a clearfix for this.

    [CSS-Tricks.com Clearfix](https://css-tricks.com/snippets/css/clear-fix/ “CSS Clearfix”)

    #143531
    Chester
    Participant

    (http://codepen.io/looking2learn/pen/ylpwq “”)

    Is this what you want? I added a width: 150px to your a tags. Thats 900px(wrapper) / 6(a, nav). Also added box-sizing: border-box.

    #143534
    Looking2Learn
    Participant

    Thanks Death180 some very helpful points

    @ chester, What your describing is exactly what i’m looking to do, However I’m new to codepen and when I open your link it just directs me to my original page and none of your modifications are visible, can you direct me please?

    #143537
    jurotek
    Participant

    @Looking2Learn, Please take a look at [THIS](http://cdpn.io/p/ljdCF “”) take time and go over it and compare it with what you had and figure out why this and that was removed or added and why. HTH.

    #143571
    Chester
    Participant

    @Looking2Learn

    > However I’m new to codepen and when I open your link it just directs me to my original page and none of your modifications are visible, can you direct me please?

    Me too, sorry for that. [Here’s](http://cdpn.io/Fvrhe “”) the new link.

    #143598
    Looking2Learn
    Participant

    Thanks guys, very helpful!

    Kr

    #143582
    Looking2Learn
    Participant

    @chester

    Can you please explain to me what….

    * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    Is actually effecting? I now understand what you explained in width, would you please just define what this css coding is actually for? As i can’t find the answer anywhere but i can see clearly is the defining factor in making my nav bar work…..

    Thanks again Joshua

    #143583
    jurotek
    Participant
Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘CSS’ is closed to new topics and replies.