Center 1 column WP template

Discussion in 'CSS' started by lurifaxur, Jan 9, 2010.

0
  1. #1
    I`m about to build a pretty simple salespage, and I`ve run into problems; the column is to the left (margin left: 10px). It`s no problem to move it, but I want to center it so that everyone that visits the site will have the page in the middle of the screen, no matter what resolution their screen`s got.

    Anyone?

    I assume that it`s this part I need to change:

    body {
    width : 545px;
    font-family: "Lucida Grande", "Lucida Sans Unicode";
    font-size: 9px;
    line-height: 25px;
    color: #5c4c26;
    text-align: justify;
    text-transform: lowercase;
    background-color: #FFFFFF;
    padding: 0px;
    margin-top: 70px;
    margin-bottom: 40px;
    margin-left: 10px;}
     
    lurifaxur, Jan 9, 2010 IP
  2. jwitt98

    jwitt98 Peon

    Messages:
    145
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You really don't want to apply most of those styles to your body tag, do you? Setting a 9px font for the entire page, that would make all the text very small. Also, your best off not setting line-height, width, margin etc. on the body tag. I might suggest something like this based on your values above, although they seem unusual:
    for your html, put a div inside your body tag.
    
<html>
<head>
</head>
<body>
<div id="mainWrapper">
<!-- All your page content goes here -->
</div>
</body>
</html>
    Code (markup):
    and then in your css:
    
body {
font-family: "Lucida Grande", "Lucida Sans Unicode";
font-size: 80%; //better to use a percentage here.
color: #5c4c26;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
} 

#mainWrapper{
width : 545px;
margin: 70px auto 10px auto; //will center div on the page.
text-align: justify;
text-transform: lowercase;
line-height: 25px;
}
    Code (markup):
     
    jwitt98, Jan 9, 2010 IP
  3. lurifaxur

    lurifaxur Greenhorn

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    It`s working. Thanks. :)

    While we`re at it, any idea how I can replace #header a:link with an image? Not even sure if that`s the part I need to change, but you get the picture. I dont want the ugly letters on top, I want an image instead.
     
    Last edited: Jan 9, 2010
    lurifaxur, Jan 9, 2010 IP
  4. lurifaxur

    lurifaxur Greenhorn

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    Guess what I just found out. My Statcounter doesn`t work, and when I looked at the source code I couldn`t find any of my body codes. Whattaheck have happened? lol..

    Anyone care to have a look? http://becometaller.net/
    Crappiest site of all time, I know, I`m just doing a small experiment here.. ;)

    Edit: perhaps I should make another thread for this problem?
     
    lurifaxur, Jan 10, 2010 IP