Results 1 to 2 of 2

Thread: NAV Bars & CSS

  1. #1
    Join Date
    Feb 2012
    Posts
    1

    Question NAV Bars & CSS

    Hi All!

    Please excuse what I believe is possibly a stupid question but I'm not very experienced in Web Design, normally I can just about get by!

    We have web based Print Management software which allows for customisation of some of its web elements. The CSS file is available to customise, all of which is fairly straightforward. However, in the product admin guide it shows that the NAV bar of the webpage can be positioned vertically (which is default) or horizontally.

    I can customise virtually all the content I need to with the exception to having the NAV bars orietation horizontally. I asked the software vendor if they could show me an example of how to acheive this and they said they didn't have an example but all is needed is to use the display:inline rather than display:block. The difficulty is there is no display:block contained in the CSS file. I've tried various things to no avail and am hoping one of you experts can assist!

    See below for the example images from the guide;

    Vertical (current);



    Horizontal (desired);




    I've copy/pasted the CSS code below;

    /**
    * Palette:
    * #FFFFFF - white - background, text
    * #005779 - Company Blue
    * #00A9E4 - blue - h1/h2
    * #3D9EEB - blue - links
    * #D6D6D6 - grey - table background
    * #000000 - black - text color
    * #9C9E9F - grey - text, borders, heading text
    */
    body, div#content {
    background-color: #FFF;
    font-family: verdana,arial,sans-serif;
    font-size: 10.4px;
    color: #000000;
    }

    div#header {
    color: #FFF;
    background-color: #005779;
    border-bottom: 1px solid #9C9E9F;
    padding-left: 10px;
    }

    div#main {
    padding-top: 10px;
    padding-left: 220px;
    }

    a:link,
    a:visited {
    color: #3366CC;
    text-decoration: none;
    font-size: 10.4px;
    }

    a:hover {
    color: #173E8B;
    text-decoration: underline;
    font-size: 10.4px;
    }

    h1, h2 {
    color: #00A9E4;
    font-size: 11.4px;
    font-family: verdana,arial,sans-serif;
    text-transform: uppercase;
    }

    table.userDataTable th,
    table.results th,
    table.results th a:link,
    table.results th a:visited {
    background-color: #D6D6D6;
    color: #000;
    text-align: left;
    font-size: 10.4px;
    text-transform: uppercase;
    font-weight: 400;
    }

    table.userDataTable tr.oddRow,
    table.results tr.odd {
    background-color: #D6D6D6;
    }

    table.results {
    font-size: 10.4px;
    text-transform: uppercase;
    }

    div#footer {
    font-family: verdana,arial,sans-serif;
    color: #FFF;
    font-weight: bold;
    background-color: #005779;
    font-size: 10.4px;
    border-top: 1px solid #000000;
    }

    /* navigation menu */

    div#nav {
    color: #9C9E9F;
    top: 134px;
    height: auto;
    width: 165px;
    background-color: #FFF;
    border-style: solid;
    border-width: 1px;
    border-color: #005779;
    }
    div#nav .top {
    color: #FFFFFF;
    background-color: #005779;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    text-transform: uppercase;
    border-style: solid;
    border-width: 1px;
    border-color: #005779;
    }

    /* nav tabs */
    div#nav a,
    div#nav a:link,
    div#nav a:active,
    div#nav a:visited,
    div#nav a:hover{
    color: #9C9E9F;
    background-color: #FFF;
    font-size: 10.4px;
    font-weight: normal;
    text-transform: uppercase;
    border-style: solid;
    border-width: 1px;
    border-color: #005779;
    }

    /* current page nav tab */
    div#nav strong a,
    div#nav strong a:link,
    div#nav strong a:active,
    div#nav strong a:visited,
    div#nav strong a:hover {
    color: #005779;
    font-size: 10.4px;
    background-color: #FFFFFF;
    font-weight: bold;
    text-align: left;
    text-decoration: underline;
    }

    /* mouseover nav tabs*/
    div#nav a:hover,
    div#nav strong a:hover {
    color: #FFF;
    font-size: 10.4px;
    background-color: #005779;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
    }




    Thanks in advance!

    Adam

  2. #2
    Join Date
    Feb 2012
    Posts
    6

    Default NAV Bars CSS

    I believe this is how it looks
    CSS code
    nameplate
    width:780px;
    height:125px;
    background-image:urlnameplate.jpg;


    #left
    width:270px;
    height:300px;
    background-color:#3399FF;
    float:left;


    #right
    width: 510px;
    height: 300px;
    background-color:#333;
    float:right;


    HTML DOC
    <div id ="container">
    <div id="nameplate">
    nameplate
    </div>

    <div id="left">
    left box
    </div>

    <div id="right">
    right box
    </div>
    </div>

    Make a style to center the container div and all should move to the center. Dont hold me to this, but I think thats close.

    #container
    width:780px;
    margin: 0 auto;


    Put this just above the #namplate CSS code. It should be the first one. Hope that all makes some sense.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •