1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to Center Entire Site?

Discussion in 'CSS' started by ColorWP.com, Aug 6, 2011.

0
Page 1 of 2
  1. #1
    Hello.

    Anybody knows how can I center my tattoo website? It looks weirdly left-aligned right now.

    Regards! 
     
    ColorWP.com, Aug 6, 2011 IP
  2. PHP Junior

    PHP Junior Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    text-align: center; for IE and margin: 0px auto; should do the job.
     
    PHP Junior, Aug 6, 2011 IP
  3. ColorWP.com

    ColorWP.com Notable Member

    Messages:
    3,121
    Likes Received:
    100
    Best Answers:
    1
    Trophy Points:
    270
    #3
    I added this to the body tag, but all it did was move the website 5 pixels to the left. The crown-like repeated patterns to the left and right seem to be fixed and unaffected no matter what I do. Only the large rectangular placeholder within these left and right borders moves.
     
    ColorWP.com, Aug 6, 2011 IP
  4. PHP Junior

    PHP Junior Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The first one needs to be added to body, the second one to each of your main containers ( header and content ).
     
    PHP Junior, Aug 6, 2011 IP
  5. ColorWP.com

    ColorWP.com Notable Member

    Messages:
    3,121
    Likes Received:
    100
    Best Answers:
    1
    Trophy Points:
    270
    #5
    text-align: center; centers the text of the website (including post content), which I don't want to happen.
     
    ColorWP.com, Aug 6, 2011 IP
  6. PHP Junior

    PHP Junior Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    What keeps you away from aligning content to the left ? :)
     
    PHP Junior, Aug 6, 2011 IP
  7. ColorWP.com

    ColorWP.com Notable Member

    Messages:
    3,121
    Likes Received:
    100
    Best Answers:
    1
    Trophy Points:
    270
    #7
    Yes, but even when I add text-align: center to the BODY tag, it still doesn't center the whole site - only the post contents.
     
    ColorWP.com, Aug 6, 2011 IP
  8. qadeer

    qadeer Member

    Messages:
    52
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    48
    #8
    first of all it looks like the layout of your website is not proper..

    1) remove the background image from the body tag

    2) create one more main div tag and..add the background image to this main div tag

    3) now in this main div tag...add the header,content,sidebar and footer..so the code should be something like this..


    <body>

    <div id="main">
    <div>Header</div>
    <div>content</div><div>sidebar</div>
    <div>footer</div> 
    </div> 

    </body>

    all the header,contents ,sidebars and footer should be in the main div tag 

    4) now the main part.. use the CSS

    #main{
    backround : now whatever your image is..

    margin-left:auto;

    margin-right:auto; 
    } 


    now this may do your stuff..it will center your whole website.. 
     
    qadeer, Aug 6, 2011 IP
  9. Zach Hornsby

    Zach Hornsby Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Here's the correct way of doing it.

    Before and after your <body> tag you need to place your entire web site in a wrapper.


    Right after <body>
    <div id="wrapper">
    HTML:

    Right before </body>
    </div>
    HTML:

    Now that will allow you to set styles that will effect the entire web site.

    Next, add these lines to your stylesheet.

    
#wrapper{
      width:900px;
      margin:0 auto;
}
    HTML:

    You can change the width to fix your needs. But, remember, you have to have the width for this to work.

    Also, you can remove text-align:center; from the body tag, you don't need it there.

    Hope this helps!
     
    Zach Hornsby, Aug 6, 2011 IP
  10. ColorWP.com

    ColorWP.com Notable Member

    Messages:
    3,121
    Likes Received:
    100
    Best Answers:
    1
    Trophy Points:
    270
    #10
    @qadeer: This is the result of your solution:
    http://i51.tinypic.com/34e9vm9.jpg 

    @Zach Hornsby: This had no effect at all.

    Do you think this small portion of the theme's style.css file is causing the whole thing?:
    * {
margin: 0;
padding: 0;
}
    HTML:
     
     
    Last edited: Aug 7, 2011
    ColorWP.com, Aug 7, 2011 IP
  11. JustDan

    JustDan Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    You should re-write it in strict instead of transitional. There are too many margins, background is 2 in 1 image, cut in two small pieces because its width is fixed
    for main content try this: (width: x%;) <--> "too many margins" Anyway three columns is needed: left image+content+right image. <div id="main"><div id="left"></div>+<div id="content"></div>...</div> css: #main: { width x%; margin-left: auto; margin-right: auto;} Good Luck
     
    JustDan, Aug 7, 2011 IP
  12. qadeer

    qadeer Member

    Messages:
    52
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    48
    #12
    lol do one thing dude..send me the files i will do it for you :D 
     
    qadeer, Aug 7, 2011 IP
  13. Rufas

    Rufas Peon

    Messages:
    27
    Likes Received:
    1
    Best Answers:
    3
    Trophy Points:
    0
    #13
    I look though your code. This is how you can fix it:

    Open your style.css, change the following lines

    body
    background:url("images/bg.gif") repeat-y scroll left top #FFFFFF -> background:url("images/bg.gif") repeat-y scroll center top #FFFFFF

    #header
    margin: 0 9px 0 -> margin: 0 auto;

    #wrap
    add margin: 0 auto;

    #footer
    margin-top:50px -> margin: 50px auto 0 auto;

    Done!

    - Rufas
     
    Rufas, Aug 12, 2011 IP
  14. primitip

    primitip Active Member

    Messages:
    37
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    60
    #14
    Just like what Zach's said, better give your entire "content" a wrapper.

    your current HTML:
    <body>
	<div id="header"></div>
	<div id="wrap"></div>
	<div id="footer"></div>
</body>
    Code (markup):
    change it to:
    <body>
<div id="wrapper">
	<div id="header"></div>
	<div id="wrap"></div>
	<div id="footer"></div>
</div>
</body>
    Code (markup):
    and add these on your style.css:
    #wrapper {
	width: 740px;
	margin: 0 auto;
	padding: 0 30px;
	background: url("images/bg.gif") repeat-y 50% 0;
	}
    Code (markup):
    remove the background and margin property from "body", and you can also remove width property from #header, #wrap & #footer
     
    primitip, Aug 12, 2011 IP
  15. unknownpray

    unknownpray Active Member

    Messages:
    3,831
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    70
    #15
    Put the whole thing in a <div> tag and the syntax should like this
    <div align="center"> rest of the site comes here</div>
     
    unknownpray, Aug 12, 2011 IP
  16. primitip

    primitip Active Member

    Messages:
    37
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    60
    #16
    ^ align is deprecated attribute, use css instead
     
    primitip, Aug 12, 2011 IP
  17. lang_tu_ntt

    lang_tu_ntt Member

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #17
    Replace your #header #wrap #footer css with the code below:

    #header {
height: 192px;
width: 740px;
background: #4376C9 url(images/header.jpg) top right;
border-bottom: 6px solid #B1E100;
text-align: left;
padding: 1cm 1cm 0 1cm;
margin: 0 auto;
}

#wrap {
width: 825px;
margin: 0 auto;
}

#footer {
clear: both;
width: 740px;
margin: 0 auto;
padding-left: 30px;
margin: 0 auto;
}
    Code (markup):
     
    lang_tu_ntt, Aug 12, 2011 IP
  18. adkarfaserv

    adkarfaserv Active Member

    Messages:
    208
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #18
    /*CSS File */

    body {
    text-align:center; /* for IE */
    margin:0 auto; /* for the rest */
    }

    div#wrapper {
    text-align:left;
    width:_ _ _px; /* or a percentage, or whatever */
    }

    /*html file*/
    <body>
    <div id="wrapper">

    /* Your rest content */

    </div>
    </body>
     
    Last edited: Aug 15, 2011
    adkarfaserv, Aug 15, 2011 IP
  19. edwardsjanet

    edwardsjanet Peon

    Messages:
    57
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19

    thanks mate, i needed this as well
     
    edwardsjanet, Aug 19, 2011 IP
  20. nfskhl

    nfskhl Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    here are good information.
    This is simple
    <html>
    <head>
    <title>

    </title>
    <head>
    <body align ="center">

    </body>
    </html>
     
    nfskhl, Aug 21, 2011 IP
Page 1 of 2