Why won't it center?

Discussion in 'Web Design and Development' started by EvanLugh, Apr 17, 2008.

  1. EvanLugh macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #1
    Could someone please check my holding page here:
    Code:
    mysportingfix*tures dot com
    (remove the * and add the . instead of... you get the idea (don't want it publicly viewable yet.))

    For some reason, I cannot get both the 'windows' to center, quite frustrating!

    Cheers
     
  2. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #2
    The center tag was deprecated in HTML 4.01 and you have not declared a DocType to specify which version of HTML you want the browser to use. Try replacing the center tag with this:

    Code:
    <div class="center">
    stuff goes here
    </div>
    CSS styles
    Code:
    div.center { margin: 0 auto; }
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Here's a DOCTYPE to use,

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Just put that at the very top before all other text in the file.

    You also have an extra set of center tags inside the head tag that won't accomplish anything. The opening one is at the end of the title tag and it closes right before the closing of the head tag.
     
  4. EvanLugh thread starter macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #4
    That was simply something I'd forgotten while I quickly wrote some things down.
    I should've used divs, don't know why I didn't. Albeit, added one just before the bubble class and still hasn't an effect. I've changed the page a little, but all the code's still there.
     
  5. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #5
    You have to change it from:

    Code:
    <center>
    your stuff here
    </center>
    to this:

    Code:
    <div class="center">
    your stuff here
    </div>
    And then use the CSS I gave you in the post above.
     
  6. EvanLugh thread starter macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #6
    I've done what you said and it's made the text centered (so.. the way it was, but totally different style/size)

    I'm too used to 'old school' HTML :eek:
     
  7. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #7
    Not sure what the problem is then. That is how I do it on my site. I have a div with an id="zone" and then I set the width of that to be as wide as I want the content and then set the margin to {margin: 0 auto;}. Maybe you need to set the width on the div.center and not on the div.bubbles.
     
  8. EvanLugh thread starter macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #8
    I don't know what I've done but whilst playing around, I spotted margin: margin: 0

    bish bash bosh it's worked. Cheers guys, angelwatt :eek:
     
  9. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #9
    Good to hear. I had just noticed that in your CSS as well and was about to post it. I also noticed a width: 50% on the body tag that would be unnecessary as well.
     
  10. jSunbeam macrumors regular

    Joined:
    Nov 9, 2007
    #10
    This method of centering elements doesn't tend to work in IE, so you might want to check that!
     
  11. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #11
    I know that I have had troubles with that in the past and usually adding a text-align:center; to the div was all that was required. I usually add that in the ie6hacks.css file. There was another method that involved setting the margin to -50% or something like that, but I can't remember the details.
     

Share This Page