Forum Moderators: not2easy

Message Too Old, No Replies

what's the best way to insert a horizontal line?

I'm trying to split content using a horizontal line...

         

Beau

2:01 pm on Aug 11, 2004 (gmt 0)

10+ Year Member



I'm putting together a three column site with header - and it's the first time I've used CSS so apologies if this is a daft question.

All areas bar the centrebox are a dark blue.

All seems to be going fine but I can't figure the best way to have a 1px horizontal line between the leftbox and the mainbox that will extend to the length of either the browser window or the centrebox (whichever is longer).

I tried setting a blue background image with a 1px horizontal line on the right hand side to repeat in the leftbox but this simply didn't show up at all?

#leftbox {
position: absolute;
top: 123px;
left: 0px;
width: 160px;
background-image: url(pattern1.gif);
background-repeat: repeat-y;
font-size: 14px;
padding-top: 10px;
margin: 2px;
}

I tried adding in the picture height but that didn't make any difference either.

So then I tried setting a right border to the leftbox but this only goes down as far as the content in the leftbox (which will be a fixed menu system):

#leftbox {
position: absolute;
top: 123px;
left: 0px;
width: 158px;
border-right: 1px solid #CCCCFF;
font-size: 14px;
padding-top: 10px;
margin: 2px;
}

In case it's tied up with my centrebox the CSS for that is as follows:
#centrebox {
margin: 0 182px 0 160px;
padding: 10px;
background: #FFFFFF;
color: #000088;
font-family : Batang, Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;

}

Any help or pointers greatfully appreciated - I'm sure it's a basic error!

TIA
Beau

Beau

4:12 pm on Aug 11, 2004 (gmt 0)

10+ Year Member



Ah - the joys of a bit of distance!

Went out for an hour and realised I needed to put the repeating image in the body rather than in a div box.

BODY {
background-color : #282C6C;
font-family : Batang, Verdana, Geneva, Arial, Helvetica, sans-serif;
background-image: url(pattern1.gif);
background-repeat: repeat-y;
color : #000088;
margin: 0px;
}

Although if anyone has any better ways of doing this please