How to do a thin grey line, like on wikipedia

Forum Moderators: not2easy

Message Too Old, No Replies

How to do a thin grey line, like on wikipedia

chuckee

10:45 pm on Feb 19, 2007 (gmt 0)

Hey,
I was wondering how it would be possible to place a thin grey line on a page (as you can see on any Wikipedia page immediately under any sub-heading). My knowledge of CSS is very limited, so I would be very grateful for any help!
Thanks

Tourz

10:47 pm on Feb 19, 2007 (gmt 0)

Try

.somediv {border-bottom: solid 1px gray;}

or something like that.

Robin_reala

9:45 am on Feb 20, 2007 (gmt 0)

Their exact CSS (given that you're using an <h2>) is:

h2 {
margin-bottom: 0.6em;
border-bottom: 1px solid #aaa;
padding: 0.5em 0 0.17em 0;
color: #000;
font: normal 150%/1.5 sans-serif;
}

[edited by: Robin_reala at 9:48 am (utc) on Feb. 20, 2007]

Acreo Aeneas

10:23 am on Feb 20, 2007 (gmt 0)

You can also achieve a similiar effect by using two div layers, the smaller overlapping the top of the larger...something like this...

#layer1 { width: 100px;
height: 20px;
background-color: #ACACAC;
z-index: 2; }

#layer2 { width: 100px;
height: 22px;
background-color: #222222;
z-index: 1; }

This would create virtually the same effect has using 'border-bottom: 2px solid #222222;'

Robin_reala

10:32 am on Feb 20, 2007 (gmt 0)

Yes, but ... uh ...

why would you do that?

ronin

8:35 pm on Feb 26, 2007 (gmt 0)

This is all good if you want to underline a subheading.
If you want just a standalone horizontal rule on the page then you can use something like:

<hr style="height:1px; color:#aaa;" />