CSS percentage centering not in the center!!

Lightro

06-08-2007, 05:17 AM

Hello.

I have a website with the following code:

<div style="position:absolute; left: 20%; top: 25%; width:611px; height:348px"><img src="yay.jpg"></div>

If I have the percentage for left and top like that, it seems to be around the center of the page. But if I put both of them at 50%, isnt that meant to center it? Because it seems to put it way down the bottom of the page..

the website is www.treelightmedia.com

Thankyou :)

felgall

06-08-2007, 05:27 AM

_Aerospace_Eng_

06-08-2007, 05:31 AM

If you use 50% for both top and left the top left corner of the element will be dead center. To make an absolutely positioned element you need to set a negative left margin equal to half the width of the element and a negative top margin equal to half the height of the element.

Lightro

06-08-2007, 06:07 AM

Ok im a little confused could you please give me an example?

_Aerospace_Eng_

06-08-2007, 06:58 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
background:#000;
}
#comingsoon {
width:611px;
height:348px;
background:url(yay.jpg) no-repeat;
position:absolute;
top:50%;
left:50%;
margin-left:-306px;
margin-top:-174px;
}
</style>
</head>

<body>
<div id="comingsoon"></div>
</body>
</html>

From looking at your attempt I really recommend that you get a better grasp of HTML/CSS before you start charging people for a website. You should do more tutorials on both HTML/CSS.

Lightro

06-08-2007, 10:03 AM

Thankyou :).

Yes well quite frankly I am not sure how much I will be needing to use css in the sites I script. I am already pretty comfortable with html javascript and php but I didnt really put much effort into css.