I need to center a whole template

Discussion in 'CSS' started by 10101, Mar 14, 2008.

0
  1. #1
    How do i do this without centering the text with it?
     
    10101, Mar 14, 2008 IP
  2. slaydragon

    slaydragon Banned

    Messages:
    1,403
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    in the body tag in css, set the text-align to center, then set the div container containing your layout text align to left, so the text wont be centered.
     
    slaydragon, Mar 14, 2008 IP
  3. slaydragon

    slaydragon Banned

    Messages:
    1,403
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #3
    slaydragon, Mar 14, 2008 IP
  4. Marc Fraser

    Marc Fraser Peon

    Messages:
    283
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    just create a div like so:

    <div style="margin:0 auto;"></div>

    and put it around the whole template.
     
    Marc Fraser, Mar 14, 2008 IP
  5. 10101

    10101 Well-Known Member

    Messages:
    771
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #5
    Neither solution worked. Thanks for trying though.
     
    10101, Mar 14, 2008 IP
  6. FBTools

    FBTools Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Hi. Try using the <center> tag. Even though it is outdated, it should still work.
     
    FBTools, Mar 14, 2008 IP
  7. 10101

    10101 Well-Known Member

    Messages:
    771
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #7
    I already tried that, I couldn't get anything to work. The buyer still paid though!
     
    10101, Mar 14, 2008 IP
  8. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I have the solution in my css file, but I do not have access to it at this moment (posting from wii). But when I get a chance I will post it here.
     
    X.Homer.X, Mar 14, 2008 IP
  9. 10101

    10101 Well-Known Member

    Messages:
    771
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #9
    Okay, thanks!
     
    10101, Mar 14, 2008 IP
  10. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #10
    You can try (for your containing div):

    
<div style="margin-left:auto;margin-right:auto;display:block;">
<!--Content-->
</div>
    HTML:
     
    blueparukia, Mar 14, 2008 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    If margin: 0 auto; on the outermost container of your website doesn't work, there's something else wrong, because it works everywhere (except IE5.5 and under, or IE6 and possibly 7 in Quirks mode, so you'd better have a doctype).

    One reason it might not be working is because there needs to be a width defined. It can be in a % if need be, but without a width a browser can't calculate how to center the thing.

    You should show some code... The top of your HTML (to see your doctype and whether there's space or anything before it, which sux0rs for IE), the main outermost container (and nothing inside that container should be wider!!), and your relevant css.

    The text-align: center thing was the only way to center blocks (incorrectly) in the old IE's and, like I said, IE's in Quirks mode (no or bad doctype). So really, you don't even need the text-align: center on the body element unless you've got a client with IE5.5 you've got to support.
     
    Stomme poes, Mar 15, 2008 IP
  12. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #12
    sorry i forgot about that, but this is what i have in my code to center my site.

    
#container {
  position: relative;
  left: 50%;
  margin-left: -400px; /* half the width of the div */
  background: #212121;
  width: 800px;
  height: auto;
}
    Code (markup):
    just edit the width of the div to the width of your site, and the margin-left to the negative width of half of your div (example, your site is 550 px wide, you would set width to 550, and margin left to -275)

    this container div is around the entire site. it is the very first thing within the <body> tags on all my pages. it centers my site just fine, but does not center the text inside it (unless i set the text to center)

    hope this helps :S
     
    X.Homer.X, Mar 18, 2008 IP