PDA

View Full Version : Centering Page



essenceofire
Mar 25th, 2007, 03:25 AM
I am using wordpress to remake a website. I am using pre-made templates and changing colors and such. I have centered it on IE, but I cant center it on FF. This is what I am using for IE:

body
{
background-color: black;
font-size: 11px;
font-family: Arial, Sans-Serif;
left-margin: auto;
right-margin: auto;
padding: 0;
text-align: center;
}

#wrap
{
color: black;
font-size: 11px;
font-family: Arial, Sans-Serif;
left-margin: auto;
right-margin: auto;
padding: 0;
text-align: left;
}

I am using the first align to center the page, and the second to keep the text on the left.

Do I need to do another CSS for FF and use a browser sniffer? What do you recommend? :(

Arbitrator
Mar 25th, 2007, 03:46 AM
The text-align property is for centering text! Use margin-right: auto; margin-left: auto to center block‐level elements such as body or div. Internet Explorer improperly allows you to use the text-align property to center block‐level elements.

For the correct centering method to work in Internet Explorer, you must ensure that that browser is not rendering the document in quirks mode. This means that the document must have a document type declaration. For more on that, see the below resources:


Recommended DTDs to Use in Your Web Document (http://www.w3.org/QA/2002/04/valid-dtd-list.html) provides a list of W3C document type (doctype) declarations that you can use in your documents. Id recommend that you use HTML 4.01 Strict; if youre up for more of a challenge or know XML, XHTML 1.0 Strict is also suitable.
Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/) and Quirks Mode and Strict Mode (http://www.quirksmode.org/css/quirksmode.html) provide information concerning standards‐compliance and quirks modes and which doctype declarations trigger which mode.
After youve added a doctype declaration, validating your document against it ensures that your (X)HTML code is valid according to the chosen doctype. Validation services include the Validome Validator (http://www.validome.org/) and the W3C Markup Validator (http://validator.w3.org/); Id recommend the former since it catches errors with more precision (http://www.validome.org/lang/en/errors/ALL) than the official (latter) validator.

essenceofire
Mar 25th, 2007, 03:49 AM
I removed the "text-align: center" and it sent my banner to the left instead of keeping it in the middle.

Armondo
Mar 25th, 2007, 03:56 AM
we don't know what "a site i am redoing with wordpress" is...maybe give us the code for your whole page?

essenceofire
Mar 25th, 2007, 04:21 AM
I am using this to edit my website:

www.wordpress.org

It came with my webhost, GoDaddy.

This the website:

http://rememberthetitans.net/index

The site is supposed to have 8 different skins. They are all the same but the colors, buttons and logos change. The layout stays the same.

The original code (copied from the skin names booyah) is this one:



/*

Theme Name: booyah

Theme URL: http://milo.peety-passion.com/category/themes/

Description: Three column with fluid width.

Author: milo IIIIVII

Author URI: http://milo.peety-passion.com

Version: 2.0

*/

body { background-color: #4682b4;background-repeat: repeat-x;color: black;font-size: 11px;font-family: Arial, Sans-Serif;margin: 0;padding: 0;}

#wrap { color: #FFF;font-size: 11px;font-family: Arial, Sans-Serif;margin: 0;padding: 0;}

a, a:visited{color: #333;text-decoration: none;}

a:hover{text-decoration: underline;color: #900;}

#header{background-image: url(images/nothing);background-position: left top;

background-repeat: no-repeat;width:100%; height: 358px;text-align: right;

text-transform: uppercase;margin:0;padding:0;border-bottom: 9px double #FFF;}

#header a {font-family: Impact, Arial, Sans-Serif;font-size: 40px;color: #FFF;

text-decoration: none;padding: 10px 130px 0 10px;text-transform: uppercase;}

#header a:hover{color: #ccc;}

.description {text-align: right;padding-right: 130px;font-size: 12px;color:#FFF;}

#navbar {width: 55%;margin: 200px 0 0 0;padding: 10px 0 10px 0;

text-align: left;border-bottom: 5px double #FFF;postition:absolute;float:left;}

#navbar li {display: inline;list-style-type: none;margin: 0;padding: 0;}

#navbar ul {margin: 0;padding: 0;}

#navbar ul li a {font-family: Impact, Arial, Sans-Serif;font-size: 22px;color: #fff;

padding: 0 10px 0 10px;margin: 0;text-decoration: none;text-transform: uppercase;}

#navbar ul li a:hover {color: #ccc;}

#content {width: 85%;margin: 20px auto 0px;padding: 0;background-color:transparent;}

#content p{padding: 0 0 15px 0;margin-top: 3px;line-height: 20px;}

#content h1 {color: #fff;font-size: 22px;font-family: Impact, Arial, Sans-Serif;

font-weight: normal;padding: 0;margin: 0x;}

#content h1 a {color: #fff;text-decoration: none;}

#content h1 a:hover {color: #ccc;text-decoration: none;}

#content h2 {background: url(images/cat.gif) no-repeat left center;color: #fff;font-size: 14px;

font-family: Impact, Arial, Sans-Serif;font-weight: normal;text-align:left;padding-left: 47px;

margin: 0;}

#content p ol{margin: 0;padding: 0 0 0x 20px;}

#content p ul{margin: 0;padding: 0 0 0 20px;}

blockquote{margin: 0 0 0 25px;padding: 0 25px 0 10px;font-style: italic;color: #fff;

border-left: 5px solid #333;}

#content blockquote p{margin: 0 0 20px 0;padding: 0;}

.contentdate {background: transparent url(images/date.jpg);float: left;width: 45px;height: 50px;margin: 0;

padding: 0;}

.contentdate h3 {color: #fff;font-size: 12px;font-weight: bold;padding: 1px 0 0 10px;

margin: 0;text-transform: uppercase;}

.contentdate h4 {font-family: Impact, Arial, Sans-Serif;color: #fff;font-size: 21px;

font-weight: bold;padding: 5px 4px 0 0;margin: 0;text-align: center;}

.contenttitle {float: left;text-decoration:none;width: 70%;margin: 0;padding: 0 0 0 5px;}

#contentmiddle {float: left;width: 51%;margin: 0 20px 0 0;padding: 20px 20px 10px 20px;}

#contentmiddle ul {list-style: none;margin: 0;padding: 0 0 20px ;}

#contentmiddle ul li {margin: 0;padding: 5px 0 0 0;}

#contentmiddle ul li a {color: #333;text-decoration: none;}

#contentmiddle ul li a:hover {color: #333;text-decoration: underline;}

.postspace {background: url(images/spacer.gif);background-repeat:repeat-x;width: 100%;height: 10px;

margin: 9px;padding: 0;}

#l_sidebar {float: left;width: 16%;margin: 0 20px 0 0;padding: 20px 0 20px 0;background-color:#fff;background-image: url(images/bg.gif);background-position: left top;

background-repeat: repeat-x;border-right:1px solid #ccc;border-left:1px solid #ccc;}

#l_sidebar ul {list-style: none;margin: 0;padding: 0 0 20px 0;}

#l_sidebar li {list-style: none;margin: 0;padding: 0;}

#l_sidebar ul li {margin: 0;padding: 5px 0 0 0;}

#l_sidebar ul li a {color: #333;text-decoration: none;}

#l_sidebar ul li a:hover {color: #900;text-decoration: underline;}

#r_sidebar {float: right;width: 16%;margin: 0;padding: 20px 0 0 0;background-color:#fff;background-image: url(images/bg.gif);background-position: left top;

background-repeat: repeat-x;border-right:1px solid #ccc;border-left:1px solid #ccc;}

#r_sidebar p{padding: 2px 0 16px 0;margin: 0px;line-height: 20px;}

#r_sidebar ul {list-style: none;margin: 0;padding: 0 0 20px 0;}

#r_sidebar ul li {margin: 0px;padding: 5px 0 0 0;}

#r_sidebar ul li a {color: #333;text-decoration: none;}

#r_sidebar ul li a:hover {color: #900;text-decoration: underline;}

#footer{background-image: url(images/footer.gif); background-position:bottom center;

background-repeat:repeat-x;background-color:#fff;width: 100%;height: 250px;margin: 0px auto 0px;

padding: 10px 0 10px 0;text-align: center;border-top: 5px solid #fff;}

#footer p {color:#333;}

#footer a, a {color: #333;text-decoration: none;}

#footer a:hover{text-decoration: underline;}

#searchform {margin: 10px auto;padding: 5px 3px; /* text-align: center; */ }

#searchform #s {width: 110px;padding: 2px;background-color: transparent;border: 1px solid #333;

font-size: 11px;margin-right: 5px;}

#searchsubmit{padding: 1px;background-color: transparent;border: 2px double #333;font-size: 11px;margin-right: 50px;}

.entry form { /* This is mainly for password protected posts, makes them look better. */

text-align:center;}

select {width: 150px;}

#commentblock {width: 395px;background: transparent;color: #fff;float: left;padding: 10px 20px 0 20px;

margin: 10px 0 10px 0;border: 1px solid #333;}

ol#commentlist {padding: 5px 0 5px 0;margin: 0;list-style-type: none;}

.commentdate {font-size: 12px;padding-left: 0;}

#commentlist li p{margin-bottom: 8px;line-height: 20px;padding: 0;}

.commentname {color: #fff;margin: 0px;padding: 5px 5px 5px 0;}

.commentinfo{clear: both;}

.commenttext {clear: both;margin: 5px 0 20px 0;padding: 20px 10px 5px 10px;width: 365px;

background: #fff;}

.commenttext-admin {clear: both;margin: 5px 0 20px 0;padding: 20px 10px 5px 10px;

width: 365px;background: #fff;}

#commentsformheader{padding-left: 0;}

#commentsform{text-align: left;margin: 0px;padding: 0;}

#commentsform form{text-align: left;margin: 0;}

#commentsform p{margin: 0;}

#commentsform form textarea{width: 99%;border: 1px solid #FFF;}

p.comments_link img{margin: 0;padding: 0;}

a img{border:none;}p img { padding: 0; }

img.centered { display: block; margin-left: auto; margin-right: auto; }

img.alignright{padding: 4px; margin: 0 0 2px 7px; display: inline; }

img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }

.alignright { float: right; padding: 4px; background: transparent; margin-left: 7px; margin-top: 3px; margin-bottom: 15px; }

.alignleft { float: left; padding: 4px; background: transparent; margin-right: 7px; margin-top: 3px; margin-bottom: 15px; }

.acronym, abbr, span.caps{ font-size: 0.9em;letter-spacing: .07em;}

.acronym, abbr, span.caps {cursor: help;}

.acronym, abbr {border-bottom: 1px dashed #FFF;}

.navigation {display: block;text-align: center;margin-top: 10px;margin-bottom: 60px;}

#wp-calendar {empty-cells: show;margin: 10px auto 0;width: 145px;}

#wp-calendar #prev a {font-size: 7pt;}

#wp-calendar a {text-decoration: none;}

#wp-calendar caption {font: bold 1.3em 'Tahoma', Arial, Helvetica, Sans-Serif;text-align: center;}

#wp-calendar th {font-style: normal;text-transform: capitalize;}

#wp-calendar #next a {padding-right: 5px;text-align: right;}

#wp-calendar #prev a {padding-left: 5px;text-align: left;}

#wp-calendar a {display: block;}

#wp-calendar caption {text-align: center;width: 100%;}

#wp-calendar td {padding: 3px 0;text-align: center;}

.entry { clear: left; }



This is the one I am editing and familiarizing myself with so I can edit the others. It's under "titans."


/*
Theme Name: titans
Theme URL: http://milo.peety-passion.com/category/themes/
Description: Three column with fluid width.
Author: milo IIIIVII
Author URI: http://milo.peety-passion.com
Version: 2.0
*/

/*This one edits the background of the site*/
body
{
background-color: black;
font-size: 11px;
font-family: Arial, Sans-Serif;
left-margin: auto;
right-margin: auto;
padding: 0;
text-align: center;
}

/*These options change the calendar, the announcements section, the (), and the top and bottom part of the right menu but NOT the middle part where the links are*/
#wrap
{
color: black;
font-size: 11px;
font-family: Arial, Sans-Serif;
left-margin: auto;
right-margin: auto;
padding: 0;
text-align: left;
}

a, a:visited
{
color: #333;
text-decoration: none;
}

/* This hover changes the color of the main section only*/
a:hover
{
text-decoration: none;
color: red;
}

/*These change the logo and the links and line below it*/
#header
{
background-image: url(images/titans.png);
background-position: center top;
background-repeat: no-repeat;
width:900px;
height: 300px;
text-align: left;
text-transform: uppercase;
margin:0;
padding:0;
border-bottom: 9px double #FFF;
}

#header a
{
font-family: Impact, Arial, Sans-Serif;
font-size: 40px;
color: white;
text-decoration: none;
padding: 10px 130px 0 10px;
text-transform: uppercase;
}

#header a:hover{color: red;}

.description
{
text-align: right;
padding-right: 130px;
font-size: 12px;
color: red;
}

#navbar
{
width: 55%;
margin: 200px 0 0 0;
padding: 10px 0 10px 0;
text-align: left;
border-bottom: 5px double #FFF;
position: absolute;
float: left;
}

#navbar li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}

#navbar ul
{
margin: 0;
padding: 0;
}

#navbar ul li a
{
font-family: Impact, Arial, Sans-Serif;
font-size: 22px;
color: #fff;
padding: 0 10px 0 10px;
margin: 0;
text-decoration: none;
text-transform: uppercase;
}

#navbar ul li a:hover {color: #ccc;}

/*These change the options of the main section*/
#content
{
width: 85%;
margin: 20px auto 0px;
padding: 0;
background-color: black;
color: white;
}

#content p
{
padding: 0 0 15px 0;
margin-top: 3px;
line-height: 20px;
}

#content h1
{
color: white;
font-size: 22px;
font-family: Impact, Arial, Sans-Serif;
font-weight: normal;
padding: 0;
margin: 0x;
}

#content h1 a
{
color: white;
text-decoration: none;
}

#content h1 a:hover
{
color: red;
text-decoration: none;
}

/*These changes the About, Recent Posts, Categories, Archives and My del.icio.us*/
#content h2
{
background: url(images/cat.gif) no-repeat left center;
color: black;
font-size: 14px;
font-family: Impact, Arial, Sans-Serif;
font-weight: normal;
text-align:left;
padding-left: 47px;
margin: 0;
}

#content p ol
{
margin: 0;
padding: 0 0 0x 20px;
}

#content p ul
{
margin: 0;
padding: 0 0 0 20px;
}

blockquote
{
margin: 0 0 0 25px;
padding: 0 25px 0 10px;
font-style: italic;
color: #FFF;
border-left: 5px solid #333;
}

#content blockquote p
{
margin: 0 0 20px 0;
padding: 0;
}

.contentdate
{
background: transparent url(images/date.jpg);
float: left;
width: 45px;
height: 50px;
margin: 0;
padding: 0;
}

.contentdate h3
{
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 1px 0 0 10px;
margin: 0;
text-transform: uppercase;
}

.contentdate h4
{
font-family: Impact, Arial, Sans-Serif;
color: #fff;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0 0;
margin: 0;
text-align: center;
}

.contenttitle
{
float: left;
text-decoration: none;
width: 70%;
margin: 0;
padding: 0 0 0 5px;
}

#contentmiddle
{
float: left;
width: 51%;
margin: 0 20px 0 0;
padding: 20px 20px 10px 20px;
}

#contentmiddle ul
{
list-style: none;
margin: 0;
padding: 0 0 20px ;
}

#contentmiddle ul li
{
margin: 0;
padding: 5px 0 0 0;
}

#contentmiddle ul li a
{
color: #333;
text-decoration: none;
}

#contentmiddle ul li a:hover
{
color: #333;
text-decoration: underline;
}

.postspace
{
background: url(images/spacer.gif);
background-repeat:repeat-x;
width: 100%;
height: 10px;
margin: 9px;padding: 0;
}

#l_sidebar
{
float: left;
width: 16%;
margin: 0 20px 0 0;
padding: 20px 0 20px 0;
background-color: white;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
}

#l_sidebar ul
{
list-style: none;
margin: 0;
padding: 0 0 20px 0;
}

#l_sidebar li
{
list-style: none;
margin: 0;
padding: 0;
}

#l_sidebar ul li
{
margin: 0;
padding: 5px 0 0 0;
}

#l_sidebar ul li a
{
color: #333;
text-decoration: none;
}

#l_sidebar ul li a:hover
{
color: #900;
text-decoration: none;
}

#r_sidebar
{
float: right;
width: 16%;
margin: 0;
padding: 20px 0 0 0;
background-color: white;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
}

#r_sidebar p
{
padding: 2px 0 16px 0;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul
{
list-style: none;
margin: 0;
padding: 0 0 20px 0;
}

#r_sidebar ul li
{
margin: 0px;
padding: 5px 0 0 0;
}

#r_sidebar ul li a
{
color: #333;
text-decoration: none;
}

#r_sidebar ul li a:hover
{
color: #900;
text-decoration: none;
}

/*These change the footer options*/
#footer
{
background-color: black;
width: 900px;
height: 30px;
margin: 0px auto 0px;
padding: 10px 0 10px 0;
text-align: center;
border-top: 5px solid #fff;
}

#footer p {color: white;}

#footer a, a
{
color: white;
text-decoration: none;
}

#footer a:hover
{
color: red;
text-decoration: none;
}

#searchform
{
margin: 10px auto;
padding: 5px 3px;
text-align: center;
}

#searchform #s
{
width: 110px;
padding: 2px;
background-color: transparent;
border: 1px solid #333;
font-size: 11px;
margin-right: 5px;
}

#searchsubmit
{
padding: 1px;
background-color: transparent;
border: 2px double #333;
font-size: 11px;
margin-right: 50px;
}

.entry form { /* This is mainly for password protected posts, makes them look better. */
ext-align:center;}

select {width: 150px;}

#commentblock
{
width: 395px;
background: transparent;
color: #fff;
float: left;
padding: 10px 20px 0 20px;
margin: 10px 0 10px 0;
border: 1px solid #333;
}

ol#commentlist
{
padding: 5px 0 5px 0;
margin: 0;
list-style-type: none;
}

.commentdate
{
font-size: 12px;
padding-left: 0;
}

#commentlist li p
{
margin-bottom: 8px;
line-height: 20px;
padding: 0;
}

.commentname
{
color: #fff;
margin: 0px;
padding: 5px 5px 5px 0;
}

.commentinfo{clear: both;}

.commenttext
{
clear: both;
margin: 5px 0 20px 0;
padding: 20px 10px 5px 10px;
width: 365px;
background: #fff;
}

.commenttext-admin
{
clear: both;
margin: 5px 0 20px 0;
padding: 20px 10px 5px 10px;
width: 365px;
background: #fff;
}

#commentsformheader {padding-left: 0;}

#commentsform
{
text-align: left;
margin: 0px;
padding: 0;
}

#commentsform form
{
text-align: left;
margin: 0;
}

#commentsform p{margin: 0;}

#commentsform form textarea
{
width: 99%;
border: 1px solid #FFF;
}

p.comments_link img
{
margin: 0;
padding: 0;
}

a img{border:none;}

p img { padding: 0; }

img.centered
{
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright
{
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft
{
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright
{
float: right;
padding: 4px;
background: transparent;
margin-left: 7px;
margin-top: 3px;
margin-bottom: 15px;
}

.alignleft
{
float: left;
padding: 4px;
background: transparent;
margin-right: 7px;
margin-top: 3px;
margin-bottom: 15px;
}

.acronym, abbr, span.caps
{
font-size: 0.9em;
letter-spacing: .07em;
}

.acronym, abbr, span.caps {cursor: help;}

.acronym, abbr {border-bottom: 1px dashed #FFF;}

.navigation
{
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 60px;
}

#wp-calendar
{
empty-cells: show;
margin: 10px auto 0;
width: 145px;
}

#wp-calendar #prev a {font-size: 7pt;}

#wp-calendar a {text-decoration: none;}

#wp-calendar caption
{
font: bold 1.3em 'Tahoma', Arial, Helvetica, Sans-Serif;
text-align: center;
}

#wp-calendar th
{
font-style: normal;
text-transform: capitalize;
}

#wp-calendar #next a
{
padding-right: 5px;
text-align: right;
}

#wp-calendar #prev a
{
padding-left: 5px;
text-align: left;
}

#wp-calendar a {display: block;}

#wp-calendar caption
{
text-align: center;
width: 100%;
}

#wp-calendar td
{
padding: 3px 0;
text-align: center;
}

.entry { clear: left; }


Thanks!

RyanRyan
Mar 25th, 2007, 06:35 AM
You can put in your wrap div
margin:auto; then it should center it. or you can put
margin:0 auto; that would be like
margin:0 /* space from the top */ auto;

koyama
Mar 25th, 2007, 06:28 PM
You have still not spelled margin-left and margin-right correctly, so your centering is not working.

In addition, you will want to wrap also your header:


...
<body>
<div id="wrap">
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</div>
</body>
...

Not sure what kind of layout you are looking for, but try this:


#wrap {
color: black;
font-size: 11px;
font-family: Arial, Sans-Serif;
margin-left: auto;
margin-right: auto;
width: 900px;
text-align: left;
}

I see some nasty errors so you probably should get your HTML as well as your CSS validated. Check the links posted by Arbitrator.

essenceofire
Mar 25th, 2007, 06:41 PM
:eek:

Ugh! I am so stupid! No wonder! Let me try correcting the tags. Thank you!

EDIT: IT WORKS! OMG! THANK YOU! I have been hitting myself with the desk for a week! Thank you soooo much! I am adding you guys to the thank you list in the site ^_^