homepage Welcome to WebmasterWorld Guest from 54.237.78.165
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Adding Lines to Pages
pab1953

10+ Year Member



 
Msg#: 4064985 posted 1:33 pm on Jan 21, 2010 (gmt 0)

The New York Times website uses lots of fine gray lines to separate content. What's the best way to put these into a site? Do they use CSS? Any tips or tricks to doing this?

Thanks.

 

Matthew1980

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4064985 posted 6:50 pm on Jan 22, 2010 (gmt 0)

Hi pab1953,

I think what you are referring to maybe just a normal <hr> tag but with a specified size and colour:-

<hr size="1" color="lightblue" />

of course if using css you can pop the detail into a class and reference it, but this is what I use on my pages, and it looks like the ones you were referring to in the NY times,

Hope this helps,

MRb

pab1953

10+ Year Member



 
Msg#: 4064985 posted 9:09 pm on Jan 22, 2010 (gmt 0)

Thanks. I also learned how you can create a 2px by 2px "speck" and adjust its size using the Height and Width attributes. Which is good, but it doesn't help me solve the problem of using such lines with a table that has <td colspan="2">. Where do they go? Maybe working with CSS borders is easier.

meelosh

5+ Year Member



 
Msg#: 4064985 posted 9:49 pm on Jan 22, 2010 (gmt 0)

it is done with CSS DIV borders....each block is a small container and you can specify border size,color,thickness and so on..
havent seen the site but this is common practice in css site creation.

uplius



 
Msg#: 4064985 posted 2:47 pm on Jan 24, 2010 (gmt 0)

I would use:
CSS:

.sepe {width:100%;height:1px;border-bottom:1px dotted;border-left:none;border-right:none;border-top:none;}

HTML:

<hr class="sepe" />

Hope it helps, it's probably not a good way to do it but it looks good and gets the job done!

pab1953

10+ Year Member



 
Msg#: 4064985 posted 11:50 am on Jan 26, 2010 (gmt 0)

Thanks for feedback. I'm still on the trail of an answer.

Uplius, that is one possible solution. But how do you apply that to vertical lines?..

forumid123



 
Msg#: 4064985 posted 5:14 pm on Jan 26, 2010 (gmt 0)

Hi All, Thanks for posting the information. Can anyone please tell where these CSS is used?

[edited by: limbo at 10:05 pm (utc) on Jan. 26, 2010]

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4064985 posted 10:08 pm on Jan 26, 2010 (gmt 0)

I wouldn't use the horizontal rule (<hr> ) tag. It's now deprecated.

Better to use CSS borders on container other HTML elements.

Matthew1980

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4064985 posted 9:30 pm on Jan 29, 2010 (gmt 0)

Oh, thanks for that Limbo, I thought as it was, but it still validates so I still use it, however using DIV's to achieve the same effect, I find to be troublesome, so I opt for the older, way of doing it. Just personal preference.

Cheers

MRb

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved