How do you center a web page?

factoring · 06-08-2007, 09:54 PM

Hey guys,

I just redesigned my site using css, but I can't find a working code to center my web page on the screen. Is there one or does it have to do with margins?

Thanks ahead of time.

cloudtrance · 06-08-2007, 10:03 PM

Set margin attributes to your main wrapper / container div

factoring · 06-09-2007, 12:10 AM

I am very new to css, so I am not quite sure what you mean?

janhvizdak · 06-09-2007, 12:51 AM

Use <center> and </center>, it's simple. You can play with margin, padding, but it will not work under every browser in many cases. Or check my signature (web design) and you'll see how it's done.

Bacanze · 06-09-2007, 03:00 AM

Code:

margin-left:auto; 
margin-right:auto;

factoring · 06-09-2007, 06:08 PM

I have an div id="outer" for my html code. Then I close it after all the body html.

I have margin-left:auto;
margin-right:auto;
on the css page.

Does this make my page centered on the screen?

Costin Trifan · 06-09-2007, 07:25 PM

also try this:

Quote:

<body style="text-align: center">

<div id="PageWrapper">
.....
....

if that's not working, try adding the same style to the #PageWrapper div:

Quote:

<body style="text-align: center">

<div id="PageWrapper" style="text-align: center">
.....
....

hth

factoring · 06-09-2007, 09:34 PM

I tried them but it just moves my header and the text in my buttons over to the right. I redesigned my site using css, but no one taught me how to do it. I just learned from research. I doubt I did it correctly.

Thanks for trying to help.

alainkun · 06-11-2007, 11:07 PM

Can you show us your CSS code?

factoring · 06-15-2007, 05:17 PM

Thanks for taking a look.

Quote:

div#header {
padding: 0px 0px 0px 0px;
margin-left:-10px;
margin-top:0px;
margin-bottom:0px;
left:0px;
top:0px;
z-index: 2;
}
div#form {
padding:0 0 0 0;
position:absolute;
left: 710px;
top: 155px;
z-index:2;
}
div#freequote {
padding:0 0 0 0;
position:absolute;
left: 712px;
top:160px;
z-index:4;
}
div#forms {
font-family: "Palatino Linotype";
font-size: 12px;
text-align: left;
position: absolute;
width:235px;
color:black;
font-weight:bold;
left: 725px;
top:200px;
z-index:5;
}
input {
padding:1px 0px 0px 3px;
}
body {
background: url(sell-my-structured-settlement.jpg) no-repeat;
background-color: #C1BA93;
width:975px;
margin-top:0px;
z-index:1
}
div#ssl {
position:absolute;
left:865px;
top:539px;
z-index:6;
background: url (ssl.gif) no-repeat;
}
div#ssl1 {
position:absolute;
left:865px;
top:515px;
z-index:6;
background:url (ssl.gif) no-repeat;
}

h2 {
padding:0 0 0 0;
font-family: "Palatino Linotype";
font-size: 17px;
font-weight: bold;
text-align: center;
color: green;
text-decoration: none;
width: 469px;
left: 210px;
top: 145px;
position: absolute;
z-index: 3;
}
div#maintext {
font-family: "Times New Roman", Times, serif;
font-size: 15px;
font-variant: normal;
text-align: left;
word-spacing: normal;
letter-spacing: normal;
color: #000000;
position:absolute;
width: 469px;
top: 187px;
left: 210px;
z-index:3;
}
div#maintext a:link {
text-decoration:none;
color:black;
font-weight:bold;
}
div#maintext a:hover {
text-decoration:none;
color:green;
font-weight:bold;
}
div#maintext a:visited {
text-decoration:none;
color:black;
font-weight:bold;
}
div#sponsored {
font-family: "Palatino Linotype";
font-size: 12px;
font-weight: bold;
font-size:14px;
color:black;
position:absolute;
top: 440px;
left: 24px;
z-index:3;
text-decoration:underline;
}
div#wentworth {
font-family: "Palatino Linotype";
font-size: 12px;
font-weight: bold;
font-size:14px;
color:green;
position:absolute;
top: 470px;
left: 24px;
z-index:3;
text-decoration: none;
}
div#wentworth a:link {
text-decoration:none;
color:green;
font-weight:bold;
}
div#wentworth a:hover {
text-decoration:none;
font-weight:bold;
color:black;
}
div#wentworth a:visited {
text-decoration:none;
font-weight:bold;
color:green;
}
ul {
font-family: "Palatino Linotype";
font-size: 12px;
font-weight: bold;
padding:0 0px 0 0;
margin:0 0 0 0;
top: 155px;
left: 8px;
position: absolute;
z-index:2;
list-style-type:none;
}
li a{
display: block;
width:145px;
height:25px;
padding: 8px 2px 0px 15px;
background: url(structured-settlement-cash.jpg) no-repeat;
text-decoration: none;
font-family: "Palatino Linotype";
font-size: 12px;
font-weight: bold;
text-decoration: none;
color:#666666;

}
li a:link {
text-decoration:none;
list-style-type:none;
}
li a:hover {
border: 0px solid #F6F7BD;
background:
url(structured-settlements.jpg) no-repeat;
color: white
}
div#footer {
font-family: "Palatino Linotype";
font-size: 10px;
color:black;
position:absolute;
top:1050px;
left:50px;
z-index:3;
text-decoration: none;
}
div#footer1 {
font-family: "Palatino Linotype";
font-size: 10px;
color:black;
position:absolute;
top:1050px;
left: 305px;
z-index:3;
}
div#footer1 a:link {
text-decoration:none;
color:green;
}
div#footer1 a:hover {
text-decoration:none;
color:black;
font-weight:bold;
}
div#footer1 a:visited {
text-decoration:none;
color:green;
}
div#fundingtext {
text-align:center;
font-weight:bold;
color:green;

}
div#requestform {
position:absolute;
left:350px;
top:200px;
color:black;
font-weight:bold;

}
div#contactform {
position:absolute;
left:350px;
top:450px;
color:black;
font-weight:bold;
}
div#contacttext {
position:absolute;
left:350px;
top:200px;
color:black;
width:250px;
}
h3 {
font-family: "Palatino Linotype";
font-size: 16px;
font-weight: bold;
text-align: center;
color: orange;
text-decoration: none;
z-index: 3;
}
h3 a:link {
color: orange;
font-weight:bold;
}
h3 a:hover {
color:black;
font-weight:bold;
}

h3 a:visited {
color

range;
font-weight:bold;
}

div#archivetext {
position:absolute;
width: 75px;
left: 895px;
top: 185px;
font-family:"Palatino Linotype";
color:green;
text-decoration:underline;
font-weight:bold;
font-size:14px;

}
div#archivelink {
position:absolute;
width: 75px;
left: 895px;
top: 205px;
font-family:"Palatino Linotype";
color:black;
text-decoration:none;
font-weight:bold;
font-size:13px;

}
div#archivelink a:link {
color

range;
font-weight:bold;
}
div#archivelink a:hover {
color:black;
font-weight:bold;
}
div#archivelink a:visited {
color

range;
font-weight:bold;
}

div#recent {
position:absolute;
width: 95px;
left: 880px;
top: 325px;
font-family:"Palatino Linotype";
color:green;
text-decoration:underline;
font-weight:bold;
font-size:14px;

}
div#recentlink {
position:absolute;
width: 207px;
left: 770px;
top: 345px;
font-family:"Palatino Linotype";
color:black;
text-decoration:none;
font-weight:bold;
font-size:13px;

}
div#recentlink a:link {
color:green;
font-weight:bold;
}

div#recentlink a:hover {
color:black;
font-weight:bold;
}

div#recentlink a:link {
color:green;
font-weight:bold;
}
div#relatedpages {
position: absolute;
left:860px;
top:625px;
font-family:"Palatino Linotype";
font-size:14px;
font-weight:bold;
text-decoration:underline;
z-index:6;
}
div#relatedlinks {
position:absolute;
text-align:right;
left:725px;
top:650px;
width:225px;
font-family:"Palatino Linotype";
font-size:14px;
font-weight:bold;
text-decoration:none;
z-index:6;
}
div#relatedlinks a:link {
color:green;
font-weight:bold;
}
div#relatedlinks a:hover {
color:black;
font-weight:bold;
}
divrelatedlinks a:visited {
color:green;
font-weight:bold
}

eshop600 · 06-16-2007, 06:29 AM

<body style="text-align: center">

Thats will bloat the page and will be harder to change in the future, just do the same with the css file

body {text-align:center}