Centralising Content!?

stublackett · March 4, 2008

I've got a site setup, Sliced it all up in Photoshop, Positioned the elements etc etc

I just now need to make sure the site says nice and central in the browser

I've used

{
position:relative;
margin: 0 auto;
width: 993px;
height: 747px;
}

Before, But its not working this time??

Here is my HTML page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!--Sliced Image DIV's-->
<div id="site-background">
<div id="logo"> </div>
<div id="student-login"> </div>
<div id="teacher-login"> </div>
<div id="central-area"> </div>
<div id="control"> </div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>

and my CSS

@charset "utf-8";
/* e-Learning Environment By Stuart Blackett - d4066435@tees.ac.uk */
/* Site-Background */

#site-background {
position:relative;
margin: 0 auto;
width: 993px;
height: 747px;
}

/* Login Tabs */

#student-login {
position:absolute;
background-image:url(images/student-login.jpg);
width: 166px;
height: 49px;
left: 999px;
top: 36px;
z-index:-1;
}

#teacher-login {
position:absolute;
background-image:url(images/teacher-login.jpg);
width:166px;
height:49px;
left: 831px;
top: 36px;
z-index:-1;
}

/* Site Logo */
#logo {
position:absolute;
background-image:url(images/site-logo.jpg);
width:310px;
height:80px;
left: 194px;
top: 0px;
}

/* Main-Content */
#main {
position:absolute;
background-image:url(images/central-content.jpg);
width:686px;
height:549px;
left: 491px;
top: 185px;
}

/* Control Zone */
#central-area {
position:absolute;
background-image:url(images/central-area.jpg);
width:987px;
height:100px;
left: 189px;
top: 82px;
}
#control {
position:absolute;
background-image:url(images/control-zone.jpg);
width:504px;
height:50px;
left: 669px;
top: 104px;
}

/* Site Footer */
#footer {
position:absolute;
background-image:url(images/site-footer.jpg);
width:975px;
height:22px;
left: 204px;
top: 738px;
}

As you can see I have #site-background { set to the position:absolute; and the margin at 0 auto;

But its just not working!?

Any ideas at all as to why its not doing that? Or how I can use another method to centralise content??

haku · March 4, 2008

is the position set to relative or absolute? Its relative in your code, but you wrote absolute in your text. It should be relative.

Actually your code looks fine to me. It should be working as far as I can tell. Do you have a link?

stublackett · March 4, 2008

I thought there was nothing wrong either...

Yeah I have a link its http://www.sb-dev.co.uk/stuart/project

The #site-background is set to relative, Yeah

The only thing I can think it is, Will be the fact that I positioned all the elements quite wayward originally, But now there sitting within that DIV it should just constrain them surely ??? ?

haku · March 4, 2008

I see your problem. Your body div is centered, but the elements inside it are absolutely positioned, and they arent centered, they are shifted to the right (due to the left: ___px; you are using in your css), and as a result are poking outside the div that they are contained in.

Take the absolute positioning off of them. Use the same technique to center them inside the div (set a width and use margin: 0 auto;).

You should also learn how to use floats. You will want to float some of your elements to the left. Google and do some CSS float tutorials.

Good luck!

Sign In

Centralising Content!?

Recommended Posts

stublackett

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

stublackett

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information