Navbar Area Column Color

General project discussion. NOT for help questions.
Post Reply
alarach

Navbar Area Column Color

Post by alarach »

Hi:

How to create a color column in the navbar area?
In my site www.tupais.com
I only want to create a colum with a border in the navbar area.
I hope you can help me with this.
Thanks in advance.

Alfredo Larach
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Navbar Area Column Color

Post by Dr.CSS »

    div#menu_vert {
        border:4px solid #416AB8;
        float: left;
        width: 22%;
        display: inline;
        margin-left: 0;
        padding:4px; will push it away from menu, take out if you want it to hug the menu
    }

of course you can change the #416AB8 color, it's from your background and you need to adjust your margin because a border adds width to anything it's around and the size of the border and type is yours to play with, in this order, 4px how wide it is, solid can be other such as dotted, and then color...
more info on border properties here...

http://www.w3schools.com/css/css_border.asp
alarach

Re: Navbar Area Column Color

Post by alarach »

Mark:

Thank you for your answer.
I need to separated the navbar area.

Look this site:
http://www.cloakware.com/support/training.html

As you can see, the navbar area have a color from the header to the footer.
I need to apply a background color to the navbar area.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Navbar Area Column Color

Post by Dr.CSS »

#pageWrapper #leftNav {background-color:#000000;  This is the hex number for black.

A good place to find hex numbers for colors... http://www.colorschemer.com/online.html
alarach

Re: Navbar Area Column Color

Post by alarach »

Mark:

Where do I have to insert that line of code?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Navbar Area Column Color

Post by Dr.CSS »

In your CSS somwhere you will see this lines....

/*=left navigation
-------------------*/
#pageWrapper #leftNav {
float: left;
display: inline;
width: 158px;
margin-left: 6px;
}

/*=nav box
----------*/
#leftNav .navBox {
background: url(../images/nav_bg.gif) repeat-y;
border-bottom: 1px solid #809dac;
margin-bottom: 17px;
}

/*=sub navigation
Post Reply

Return to “General Discussion”