1 reply [Last post]
Bannister
Offline
newbie
Last seen: 17 years 5 weeks ago
Joined: 2004-08-17
Posts: 5
Points: 0

Hi there i have a question about centring this layout, ignore the images please. Want i'd like to accomplish is to center the whole page on, IE and Mozilla. Does anyone know a trick how to do this?

The code i currently have is like:

<html>
<head>
<style>
body { background-color: #99E9FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; margin: 0px; padding: 0px;}
.imgheader{border: 1px #FFFFFF solid;}
.navigate {width: 746px; border: 1px #FFFFFF solid; vertical-align: top;}
.mainposition {margin-left:auto; margin-right:auto;}
.topbar{background-color: #00C7FE; width: 746px; border-top: none; text-align: center;}

</style>
</head>
<body>
        <div><img class="imgheader" src="header.jpg"/></div>
        <div class="topbar"><img src="buttons_01.gif"/><img src="buttons_02.gif"/><img src="buttons_03.gif"/><img src="buttons_04.gif"/><img src="buttons_05.gif"/><img src="buttons_06.gif"/></div>

        
</body>
</html>

Bannister

KasiaOz
Offline
Regular
Last seen: 17 years 8 weeks ago
Joined: 2004-07-27
Posts: 16
Points: 0

centering a page

You'll want to enclose the whole page in a div with a set height and width (let's say height 300 px and width 748 (your width + margin) for example purposes. The css should be as follows:

div#content
{
position: absolute;
background-color: transparent;
text-align: center;
top: 50%;
left: 50%;
width: 748px;
height: 300px;
margin-top: -150px;
margin-left: -374px;
visibility: visible
}
-Kasia