making a line across the page

They have: 42 posts

Joined: Dec 2002

I am trying to make a thick blue line that goes across the bottom of a page. Here is the code I assumed would work, but didn't.

I also tried setting the tr elements to width="100%" etc but still no luck.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

And in the above (bloated) example, you'd have to set the TABLE to 100%, not the cells.

However, it'd be better still to use CSS, assuming you're using a table for layout (it will work with any element), you'd give the element that needs the bottom to be a thick line an id -- id="heavybottom" -- in the HTML for that element.

And in the stylesheet, you'd do this:

#heavybottom {
border: 20px solid #00f;
}

They have: 42 posts

Joined: Dec 2002

Thanks for the help suzanne but the hr code didn't work. It made a grey line about 5 pixels high across the screen.

I am somewhat familiar with CSS but I am not exactly sure how I would make that code work with the line, would it be like this:

//I like to use classes instead
.heavybottom {
border: 20px solid #00f;
}

 

or am I completely wrong here?

They have: 42 posts

Joined: Dec 2002

Here is an example of the page I am trying to add it to

http://www.flatlanderwake.com/about.php

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Class goes in the TABLE, not in the bits and bobs within the table. And make sure you have around the declarations.

Also, you can't use unit measures other than % in HTML -- take out the px from the . You can use CSS to colour it, too.

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

If you know how to use CSS positioning you can use DIVs to solve your problem Smiling

Heres how:

 

#line {
border-bottom:2px solid #00f;
padding:0;
position:absolute; /*or relative...*/
/*give 'co-ordinates'*/
}

BUT! I've never tried this before...you might want to give it a go and tell us how it goes Laughing out loud

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.