Forums

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

Home Forums CSS How do I get components in my header fit great together?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #35826
    shuma
    Member

    I am trying to design a header with a search form and navigation menu. But the components do not quite fit nicely together, the symmetry of the design is wrong. Here is a link of my design: header

    For example look at Quora great header in firebug, everything looks great and it has a great symmerty for is components: Quora header

    My question is: How do I fix it so every component fits together great?

    Here is my HTML:



    Example










    <%= yield %>

    Here is my CSS:

    /* The layout of the header*/
    #layout_header {
    float: left;
    width: 100%;
    background-attachment: scroll;
    background-color: #F5F5F5;
    border-bottom-color: #E5E5E5;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    background-image: none;
    min-height: 31px;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
    margin:0;
    }
    /* Header content */
    #header_contents{
    position: relative;
    margin-bottom: 0;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 60px;
    padding-right: 10px;
    padding-top: 0;
    width: 870px;
    }

    /* Navigation */
    .nav_list{
    float: right;
    }
    .nav_list ul{
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    }
    .nav_list ul li{
    margin-bottom: 0;
    margin-left: 15px;
    margin-right: 0;
    margin-top: 8px;
    float: left;
    }
    .nav_list ul li a{
    font-weight: bold;
    color: #222222;
    cursor: pointer;
    text-decoration: none;
    }
    .nav_list ul li a:hover{
    font-weight: bold;
    color:#fff;
    text-decoration: underline;
    }

    /* search form*/
    .form_wrapper{
    width: 485px;
    float: left;
    overflow: hidden;
    background-color: transparent;
    }

    .form_wrapper #search{
    width: 463px;
    height: 18px;
    padding-right: 5px;
    float: left;
    border: 1px solid #CCC;
    font-size: 16px;
    background-color: #FFFFFF;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 1px;
    padding-top: 3px;
    }
    .form-wrapper #search::-webkit-input-placeholder{
    color: #999;
    font-weight: normal;
    font-size: 16px;
    }
    .form-wrapper #search:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-size: 16px;

    }

    .form-wrapper #search:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-size: 16px;
    }
Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.