[Solved] How do I Add a border around my forum using CSS (see image for example)*

4riS

Hello,

I would like to add a border like the red border i draw.
How can i do that...
Here is the picture : http://imagehost.4ris.info/images/772vanilla.png

Thanks in advance..

zodiacdm

well, this is done with some simple css.

The easiest way to modify css is to use a browser that supports code inspection, like google chrome or firefox with the firebug extension.

then you just right click on the object you want to change, and go to 'inspect element'.

This will give you a list of the object's currently assigned css values, and where to find them in the css file.

to get a red border for example, on the #Content box:
#Content { border: 1px solid red; }

RobChe

div#Body { border: 1px red solid ; overflow: hidden; }

?

RobChe

Great. You have to add the overflow:hidden as the elements inside are floated - you could always float that container too, that would do it.

zodiacdm

well, this is done with some simple css.

The easiest way to modify css is to use a browser that supports code inspection, like google chrome or firefox with the firebug extension.

then you just right click on the object you want to change, and go to 'inspect element'.

This will give you a list of the object's currently assigned css values, and where to find them in the css file.

to get a red border for example, on the #Content box:
#Content { border: 1px solid red; }

4riS

I know how to add border on the Contect box.
I want to add a border not only on the content but panel too (Together as i show on image).
I tried but only the width is fine and the height is about 10px. I don;t know why.
Any solution ?

RobChe

div#Body { border: 1px red solid ; overflow: hidden; }

?

RobChe

Great. You have to add the overflow:hidden as the elements inside are floated - you could always float that container too, that would do it.

4riS

Well RobChe it works.
Thank you very much.

zodiacdm

Ah, I actually didn't know about the overflow trick.

Another solution, though probably not really better, is to give the element after the floating one a
{ clear: both; }
which will do the same thing, though I would rather just add another property to the floating element.