PDA

View Full Version : How to Add Dividing Lines?


pab1953
02-01-2010, 05:59 PM
I want to create horizontal and vertical lines with CSS that divide content such as you see on sites like the NY Times, The Guardian, The Daily Beast, Columbia Journalism Review and others.

http://www.nytimes.com/
http://www.guardian.co.uk/
http://www.thedailybeast.com/
http://www.cjr.org/

Do these sites simply use Border properties? How?

A specific issue I have involves two columns of tabular data that would fit well in a table but I need to put a line dividing the two columns and lines dividing the rows. Can this be done with CSS?
Thanks.

Corrosive
02-01-2010, 06:07 PM
Yes, use borders. The Guardian one for instance. If your data is in individual cells then use the CSS;

td {border-bottom: 1px dotted #666;}

pab1953
02-01-2010, 06:30 PM
I don't see any tables used at all in the Guardian -- at least the home page, I just looked at. It's all DIVs. Where did you get your TD from?

Corrosive
02-01-2010, 06:36 PM
From your post. You said you wanted to use a table...tabular data so I suggested using td. That is a table cell. Add the styles given to a class if you want to use divs instead.

pab1953
02-01-2010, 07:04 PM
Hi Corrosive, I did say it was tabular data but I asked if it could be done with CSS rather than a table. I'm not talking tons of rows and columns of numbers, for which I would use a table without question, but three rows and two columns of text and graphics that I would like to separate with horizontal and vertical lines using CSS, if possible. Thanks for your help.

Corrosive
02-01-2010, 07:06 PM
CSS;

.item {border-bottom: 1px dotted #666}

HTML;

<div class="item">Your Stuff</div>

No different to the td but you are using a class and a div.

Corrosive
02-01-2010, 07:09 PM
Also, if you want them in two columns then use floats and give the right hand side of the left div a border as well.