Forums

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

Home Forums CSS How to make Header Nav divided by Logo

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #38509
    oespinozai
    Member

    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%;
    }
    #104386
    oespinozai
    Member

    ?

    #104388
    jackcutting
    Member

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

    #104390
    jackcutting
    Member

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

    #104420
    Paulie_D
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.