Grow your CSS skills. Land your dream job.

How to make Header Nav divided by Logo

  • # June 14, 2012 at 6:40 pm

    Hi guys, english is not my natal tongue so I’m gonna try to explain myself in the best of ways.

    I am designing my business website from scratch, gaining experience through every trial and error.
    My webpage will have a central logo, surrounded on both its left and right sides by the nav. Each nav consists of 2 elements (Home and about in nav1, contact and blog in nav2)
    Here´s the html and css of that part of the site, I just can´t get it to work right! I really hope you can help me understand how to do it right.

    Thank you!

    HTML



    CSS



    #container {
    margin:0 auto;
    width:75%;

    }

    #container-top{
    background-image:url(images/top_container_bakground_02.png);
    width:100%;
    position:relative;
    }

    #header {
    width: 100%;
    background-color:#ececec;
    position:relative;
    font-family:"Century Gothic";
    text-transform:uppercase;
    text-shadow: 1px 1px 1px #111;
    margin-bottom:20px;

    }

    #logo {
    position:absolute;
    background-image:url(images/logo_03.png);
    background-repeat:no-repeat;
    background-position:center;
    margin: 10px auto;
    text-indent:-9999px;
    float:left;
    width:50%;
    height:117px;
    }

    li {
    display:inline;
    }

    .firstnav {
    float:left;
    width:25%;
    position:absolute;
    margin-left:10px;

    }

    .secondnav{
    float:right;
    width:25%;
    }
    # June 14, 2012 at 6:57 pm

    ?

    # June 14, 2012 at 7:07 pm

    Hi, I’ve worked out two possible solutions. See below:
    Solution 1:
    CSS:

    #container {
    margin:0 auto;
    width:75%;

    }

    #container-top{
    background-image:url(images/top_container_bakground_02.png);
    width:100%;
    position:relative;
    }

    #header {
    width: 100%;
    background-color:#ececec;
    position:relative;
    font-family:"Century Gothic";
    text-transform:uppercase;
    text-shadow: 1px 1px 1px #111;
    margin-bottom:20px;

    }

    #logo {
    /*position:absolute;*/
    background-image:url(images/logo_03.png);
    background-repeat:no-repeat;
    background-position:center;
    margin: 10px auto;
    text-indent:-9999px;
    /*float:left;*/
    width:50%;
    height:117px;
    /*Additions*/
    border: 1px solid black;
    text-indent: 0px;
    text-align: center;
    }

    li {
    display:inline;
    }

    .firstnav {
    float:left;
    width:25%;
    position:absolute;
    margin-left:10px;

    }

    .secondnav{
    float:right;
    width:25%;
    }
    .clear{
    clear: both;
    }

    HTML:



    Solution 2:
    CSS:

    #container {
    margin:0 auto;
    width:75%;

    }

    #container-top{
    background-image:url(images/top_container_bakground_02.png);
    width:100%;
    position:relative;
    }

    #header {
    width: 100%;
    background-color:#ececec;
    position:relative;
    font-family:"Century Gothic";
    text-transform:uppercase;
    text-shadow: 1px 1px 1px #111;
    margin-bottom:20px;

    }

    #logo {
    /*position:absolute;*/
    background-image:url(images/logo_03.png);
    background-repeat:no-repeat;
    background-position:center;
    margin: 10px auto;
    text-indent:-9999px;
    float:left;
    width:50%;
    height:117px;
    /*Additions*/
    border: 1px solid black;
    text-indent: 0px;
    text-align: center;
    margin-left: 25%;
    margin-top: -10px
    }

    li {
    display:inline;
    }

    .firstnav {
    float:left;
    width:25%;
    position:absolute;
    margin-left:10px;

    }

    .secondnav{
    float:right;
    width:25%;
    }
    .clear{
    clear: both;
    }

    HTML:



    Hope this helps. :)

    # June 14, 2012 at 7:08 pm

    Ps. I change the text indent and added a border just so I could see some content.

    # June 15, 2012 at 4:58 am

    This seems all a bit unnecessary.

    Why not do






    Doesn’t that make more sense?

    I’m sure you can work the CSS from that.

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

You must be logged in to reply to this topic.

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