drawing <HR> and box in naturally occuring order

[baabu]

hi

I am makin a page in CSS and xhtml..
i have made a header box using this in the head:

h1
{
position:absolute;
width:600;
height:50;
left:302;
top:93;
font-weight:bold;
font-size:36;
font-family:Arial;
}

and this in the body:

<h1>Assignment 1 - XHTML and CSS</h1>

I also got other boxes I made which are these in the body:


<div class="box_B"></div>

<div class="box_C"></div>

<div class="box_D"></div>

They all work fine...now i want to insert a horizontal line using <HR> so that it appears in the natural order after the above boxes...I tried putting <HR> after the codes for the boxes but the line keeps appearing at the top of the page instead of below the boxes...any idea how to do this? I wanna make another box after this line also in natural order..

any ideas? Thanks for you help

 

[BabyJeffy]

This is probably because you have absolute positioning on the divs I think. I would do it differently (but may not be what you are after)...

Put in the <HR> where you want them. Then set the style of them to display:none. Style the divs to have a border-bottom to mimic the <HR>.

If the user views the site without CSS it will work as you expect (DIV followed by HR followed by DIV etc)... and if they have CSS on then they'll see the styling from the DIVs showing an <HR>-like seperator.

I've struggled in the past to get a consistent styling on <HR> across a full matrix of browsers - IE Mac was a pain. As a result I prefer this kind of approach.

Cheers,
Jeff



[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[baabu]

ive tried that but the horizontal line still appears at the top of the page.

i have 3 boxes above where the line should be and ive used classes for each of the boxes..
ive tried putting just <HR> there after the 3 boxes <div> tags but it appears at the top of the page and not below the 3 boxes.

Ive tried making a class for the line itself and putting the <HR> inside a <div> but the line still comes at the top of the page. even with relative positioning

i just cant get it to appear in natural order after the 3 boxes i wana do it without using "top:xx" etc.

 

[Vragabond]

Maybe you should show us a link or at least all html and css code that you use. It seems like an absolute positioning problem and I don't think you're getting rid of it where we would like you to.

 

[BillyRayPreachersSon]

<h1>Assignment 1 - XHTML and CSS</h1>

Is this for a school / college assignment?

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

I'd suggest you don't use absolute positioning at all, unless you (ahem) absolutely need to. If you're just trying to place your heading 302px left, 93px down from the top-left of the browser, do it with margins instead.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd