Web Design Forums

ali_bancroft · 11-05-2008, 15:58

Hi... in the following code i am stuck how to centre the page.
Can anyone offer assistance?

-code begin-

<!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>
<title>Transconflict</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body {
margin:50px 0px; padding:0px;
text-align:center;
}

#container {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}

div#Untitled-4-01_ {
background-image: url(images/Untitled-4_01.gif);
background-color: #000000;
position:absolute;
left:0px;
top:0px;
width:26px;
height:104px;
}

div#Untitled-4-02_ {
background-image: url(images/Untitled-4_02.gif);
background-color: #000000;
position:absolute;
left:26px;
top:0px;
width:606px;
height:174px;
}

div#Untitled-4-03_ {
background-image: url(images/Untitled-4_03.gif);
background-color: #000000;
position:absolute;
left:632px;
top:0px;
width:102px;
height:20px;
}

div#Untitled-4-04_ {
background-image: url(images/Untitled-4_04.gif);
background-color: #000000;
position:absolute;
left:734px;
top:0px;
width:104px;
height:20px;
}

div#Untitled-4-05_ {
background-image: url(images/Untitled-4_05.gif);
background-color: #000000;
position:absolute;
left:838px;
top:0px;
width:120px;
height:20px;
}

div#Untitled-4-06_ {
background-image: url(images/Untitled-4_06.gif);
background-color: #000000;
position:absolute;
left:958px;
top:0px;
width:26px;
height:216px;
}

div#Untitled-4-07_ {
background-image: url(images/Untitled-4_07.gif);
background-color: #000000;
position:absolute;
left:632px;
top:20px;
width:326px;
height:154px;
}

div#Untitled-4-08_ {
background-image: url(images/Untitled-4_08.gif);
background-color: #000000;
position:absolute;
left:0px;
top:104px;
width:13px;
height:19px;
}

div#Untitled-4-09_ {
background-image: url(images/Untitled-4_09.gif);
background-color: #000000;
position:absolute;
left:13px;
top:104px;
width:13px;
height:112px;
}

div#Untitled-4-10_ {
background-image: url(images/Untitled-4_10.gif);
background-color: #000000;
position:absolute;
left:0px;
top:123px;
width:13px;
height:93px;
}

div#Untitled-4-11_ {
background-image: url(images/Untitled-4_11.gif);
background-color: #000000;
position:absolute;
left:26px;
top:174px;
width:932px;
height:42px;
}

div#Untitled-4-12_ {
background-image: url(images/Untitled-4_12.gif);
background-color: #000000;
position:absolute;
left:0px;
top:216px;
width:26px;
height:784px;
}

div#Untitled-4-13_ {
background-image: url(images/Untitled-4_13.gif);
background-color: #000000;
position:absolute;
left:26px;
top:216px;
width:932px;
height:784px;
}

div#Untitled-4-14_ {
background-image: url(images/Untitled-4_14.gif);
background-color: #000000;
position:absolute;
left:958px;
top:216px;
width:26px;
height:784px;
}

</style>
</head>
<body style="background-color:#FFFFFF;">

<div id="container">

<div id="Untitled-4-01_"> </div>

<div id="Untitled-4-02_"> </div>

<div id="Untitled-4-03_"> </div>
<div id="Untitled-4-04_"> </div>
<div id="Untitled-4-05_"> </div>
<div id="Untitled-4-06_"> </div>

<div id="Untitled-4-07_"></div>

<div id="Untitled-4-08_"> </div>
<div id="Untitled-4-09_"> </div>

<div id="Untitled-4-10_"> </div>

<div id="Untitled-4-11_"> </div>

<div id="Untitled-4-12_"> </div>

<div id="Untitled-4-13_"> </div>

<div id="Untitled-4-14_"> </div>
</div>

</body>
</html>

-code end-

seen.to · 11-05-2008, 16:36

I did contemplate with two containers. The first controls the vertical positioning which I made absolute with a top: 50% then a negative margin-top to bring the actual design into line. The relatively positioned inner container then controls the horizontal centering. Here's the relevant code:

Code:

	#outer_wrapper {
		position: absolute;
		top: 50%;
		margin-top: -227px;
		}
	
	#inner_container {
		position: relative;
		margin: 0 auto; 
		}

HTH

Tom_E · 11-05-2008, 16:41

body {
margin: 0;
padding: 0;
text-align: center;
}

#container {
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;

pgo · 11-05-2008, 16:42

Wow. Awful code. Looks like it was generated by some awful software.

Anyway, you've got it right: margin: 0 auto; on the #container. That should work. Except all your children are absolutely positioned, so they are taken out of the document flow rendering your #container completely moot.

position: relative; on the container might work.

ali_bancroft · 11-05-2008, 19:25

Thank you, works a treat.

Yes, very amateurishly converted to CSS from Illustrator. I'm in no position at present to learn CSS due to University commitments but for what i need it works a treat - I WOULDN'T RECOMMEND IT TO ANYONE!

Cheers again.

11-05-2008, 15:58	#1 (permalink)
ali_bancroft Registered User Join Date: Feb 2007 Posts: 33	Css Centering Hi... in the following code i am stuck how to centre the page. Can anyone offer assistance? -code begin- <!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> <title>Transconflict</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { margin:50px 0px; padding:0px; text-align:center; } #container { width:500px; margin:0px auto; text-align:left; padding:15px; border:1px dashed #333; background-color:#eee; } div#Untitled-4-01_ { background-image: url(images/Untitled-4_01.gif); background-color: #000000; position:absolute; left:0px; top:0px; width:26px; height:104px; } div#Untitled-4-02_ { background-image: url(images/Untitled-4_02.gif); background-color: #000000; position:absolute; left:26px; top:0px; width:606px; height:174px; } div#Untitled-4-03_ { background-image: url(images/Untitled-4_03.gif); background-color: #000000; position:absolute; left:632px; top:0px; width:102px; height:20px; } div#Untitled-4-04_ { background-image: url(images/Untitled-4_04.gif); background-color: #000000; position:absolute; left:734px; top:0px; width:104px; height:20px; } div#Untitled-4-05_ { background-image: url(images/Untitled-4_05.gif); background-color: #000000; position:absolute; left:838px; top:0px; width:120px; height:20px; } div#Untitled-4-06_ { background-image: url(images/Untitled-4_06.gif); background-color: #000000; position:absolute; left:958px; top:0px; width:26px; height:216px; } div#Untitled-4-07_ { background-image: url(images/Untitled-4_07.gif); background-color: #000000; position:absolute; left:632px; top:20px; width:326px; height:154px; } div#Untitled-4-08_ { background-image: url(images/Untitled-4_08.gif); background-color: #000000; position:absolute; left:0px; top:104px; width:13px; height:19px; } div#Untitled-4-09_ { background-image: url(images/Untitled-4_09.gif); background-color: #000000; position:absolute; left:13px; top:104px; width:13px; height:112px; } div#Untitled-4-10_ { background-image: url(images/Untitled-4_10.gif); background-color: #000000; position:absolute; left:0px; top:123px; width:13px; height:93px; } div#Untitled-4-11_ { background-image: url(images/Untitled-4_11.gif); background-color: #000000; position:absolute; left:26px; top:174px; width:932px; height:42px; } div#Untitled-4-12_ { background-image: url(images/Untitled-4_12.gif); background-color: #000000; position:absolute; left:0px; top:216px; width:26px; height:784px; } div#Untitled-4-13_ { background-image: url(images/Untitled-4_13.gif); background-color: #000000; position:absolute; left:26px; top:216px; width:932px; height:784px; } div#Untitled-4-14_ { background-image: url(images/Untitled-4_14.gif); background-color: #000000; position:absolute; left:958px; top:216px; width:26px; height:784px; } </style> </head> <body style="background-color:#FFFFFF;"> <div id="container"> <div id="Untitled-4-01_"> </div> <div id="Untitled-4-02_"> </div> <div id="Untitled-4-03_"> </div> <div id="Untitled-4-04_"> </div> <div id="Untitled-4-05_"> </div> <div id="Untitled-4-06_"> </div> <div id="Untitled-4-07_"></div> <div id="Untitled-4-08_"> </div> <div id="Untitled-4-09_"> </div> <div id="Untitled-4-10_"> </div> <div id="Untitled-4-11_"> </div> <div id="Untitled-4-12_"> </div> <div id="Untitled-4-13_"> </div> <div id="Untitled-4-14_"> </div> </div> </body> </html> -code end-

11-05-2008, 16:36	#2 (permalink)
seen.to unusual suspect ™ Join Date: Jul 2004 Location: DE, USA Posts: 2,700	I did contemplate with two containers. The first controls the vertical positioning which I made absolute with a top: 50% then a negative margin-top to bring the actual design into line. The relatively positioned inner container then controls the horizontal centering. Here's the relevant code: Code: #outer_wrapper { position: absolute; top: 50%; margin-top: -227px; } #inner_container { position: relative; margin: 0 auto; } HTH __________________ [[proverbs and quotes]] [[blog]] [[work]] [[photowebby - some photo's by me]]

11-05-2008, 16:41	#3 (permalink)
Tom_E Car Driver™ Join Date: Jan 2007 Location: Kent, England Posts: 1,209	body { margin: 0; padding: 0; text-align: center; } #container { position: relative; margin-left: auto; margin-right: auto; text-align: left; __________________ portfolio (v.3.0)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

11-05-2008, 16:42	#4 (permalink)
pgo i'm done, son Join Date: Jan 2005 Posts: 12,262	Wow. Awful code. Looks like it was generated by some awful software. Anyway, you've got it right: margin: 0 auto; on the #container. That should work. Except all your children are absolutely positioned, so they are taken out of the document flow rendering your #container completely moot. position: relative; on the container might work.

11-05-2008, 19:25	#5 (permalink)
ali_bancroft Registered User Join Date: Feb 2007 Posts: 33	Thank you, works a treat. Yes, very amateurishly converted to CSS from Illustrator. I'm in no position at present to learn CSS due to University commitments but for what i need it works a treat - I WOULDN'T RECOMMEND IT TO ANYONE! Cheers again.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)