how to assign border to just three sides?

[K4GAP]

SOLVED!



Is it possible to assign a border color to only three sides of an area?

Such as in the image below I want to assign a colored border to only bottom and both right and left of the navbar area. Red arrow marks the border I want to get rid of.

Is this doable?

http://www.livinginkentucky.com/files/graphics/navscreen.png

[kh99]

It is possible, you can use CSS to specify the border width of each side separately, so you could spcify 0 for the top. But we probably can't tell you exactly how to do it without a link (well, I can't anyway).

[K4GAP]

It is possible, you can use CSS to specify the border width of each side separately, so you could spcify 0 for the top. But we probably can't tell you exactly how to do it without a link (well, I can't anyway).

I found all kinds of code but have no idea where to put it.

Example of what I found:

div { border-top: 1px solid red; border-right: 1px solid red; border-bottom: 1px solid red; }

[peugeot405]

can you post a link to your web?

try using this:

border-color: red;
border-style: solid;
border-width: 0 1px 1px;

[K4GAP]

can you post a link to your web?

try using this:

border-color: red;
border-style: solid;
border-width: 0 1px 1px;

The problem now is where to put the code. I have several code snippets that will do the job. I just don't know where to put it.

[kh99]

You should download Firefox, if you don't use it already, then install the free add-on called firebug. Then you can load your page, right click on the part you're interested and select "Inspect Element with Firebug". It opens a window that shows the html and what CSS is being applied to it, so you could figure out what CSS selector will work to override it. (I think Chrome has something similar built in, but I don't remember how much it lets you do).

Anyone can do this if they can get to your site, which is why people usually ask for a link for questions like this (it's hard to know exactly what line you want to eliminate just by looking at the picture, but firebug makes it easy). It might sound like a lot of work just to figure out this CSS, but if you like doing your own styles I think you'd find that the time spent figuring it out would pay off in the long run.

[K4GAP]

You should download Firefox, if you don't use it already, then install the free add-on called firebug. Then you can load your page, right click on the part you're interested and select "Inspect Element with Firebug". It opens a window that shows the html and what CSS is being applied to it, so you could figure out what CSS selector will work to override it. (I think Chrome has something similar built in, but I don't remember how much it lets you do).

Anyone can do this if they can get to your site, which is why people usually ask for a link for questions like this (it's hard to know exactly what line you want to eliminate just by looking at the picture, but firebug makes it easy). It might sound like a lot of work just to figure out this CSS, but if you like doing your own styles I think you'd find that the time spent figuring it out would pay off in the long run.

I've always used Firefox and I know where to change the border settings. The problem is the setting only asks for border color/thickness and applies it to all sides. Tried all this in the beginning, about 6 hours ago.

[kh99]

OK, sorry, I guess I misunderstood the question. You can add your CSS to the additional.css template for that style (under the CSS Templates group).

[K4GAP]

Adding it into the additional.css the code has to be assigned to the navbar in some manner? So how would that look?

For example if I was using this code ...

"border-color: red; border-style: solid; border-width: 0 1px 1px;"

what would be added to it in order for it to be applied to the navbar?

[kh99]

You would need the correct CSS selector. I understand now why there's confusion - you've been customizing the site using the style variables. So I guess the answer to the original question is that you can't do it with style vars, you need to use CSS. And while there's no place to enter CSS just for the navbar, you can probably come up with a selector so that it will only apply to the navbar, (and the firebug thing can help with that).

Anyway, maybe try the div that has id "navbar", like:

#navbar { border-top: 1px solid red; border-right: 1px solid red; border-bottom: 1px solid red; }

[K4GAP]

I looked around at a few styles that have done what it is I want to do.

I have the code they used in the additional.css area. Either I'm using the wrong code or I'm missing a step somewhere.

The code I'm trying to use is this ...

.navbar_wrapper {
border-top:-0px;
border-left: 1px solid #707070;
border-bottom: 1px solid #707070;
border-right: 1px solid #707070;
}--------------- Added 02 Apr 2013 at 21:29 ---------------

SOLVED using this code in the additional .....
.navbar { border-top:-0px; border-left: 1px solid #707070; border-bottom: 1px solid #707070; border-right: 1px solid #707070; }renamed ".navbar_wrapper" to ".navbar".

This is the result of what I was trying to do ...

http://www.livinginkentucky.com/files/graphics/navscreenshot.png


Thanks for the help.