Forum Moderators: open

Message Too Old, No Replies

HTML code to bring <body> closer to top of page?

Source code for altering page layout for html <body>

         

trueMarketing

7:51 pm on Jul 11, 2003 (gmt 0)

10+ Year Member



Any advice or easy way I can look up or find out how to do this would be very helpful.
We're working with a website that has a huge laft-hand nav bar and I would like to "push" the <body> or actual center page text higher in the source code.

I noticed some other sites using <-- comment tags -->, but couldn't figure out exactly how they are doing it.

Please help. :^\

Thanks!

rcjordan

7:59 pm on Jul 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<comment>

My guess is they used the "table trick"

<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td><!-- leave this TD empty --></td>
<td rowspan="2">Content here. </td>
</tr>
<tr>
<td>Navigation Here</td>
</tr>
</table>
</body>
</html>

drbrain

8:06 pm on Jul 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



We've had this topic come up many times in the CSS forum [webmasterworld.com]

You can use absolute positioning to do this, and it even makes your pages more friendly for text-only browsers:

html, body { margin: 0; padding: 0; }
#head { position: absolute; top: 0; height: 3em; }
#content { margin-top: 3em; }

<body>
<div id="content">Foo Bar Baz</div>
<div id="head">Navigation and so forth</div>
<div id="footer">Footer text</div>
</body>

#head will be moved to the very top of the page, #content will be pushed down the height of #head, so everything will look perfectly seamless.

You can also dig through to find two and three column solutions that place the content at the very top of the page.