www.webdeveloper.com
Results 1 to 10 of 10

Thread: Centering a page: text-align:center or absolute?

  1. #1
    Join Date
    Dec 2002
    Posts
    216

    Centering a page: text-align:center or absolute?

    I don't really understand how it works.
    Do you just put
    {margin:0;text-align:center;}

    or have an absolute positioning, then manually find the right position to have the page centered?

    If you choose the first option, how about the containers, images ect...? Wouldn't you have to manually move them anyway? So why choose an automatic centering?

    For the second option, will this work on every browsers? Would there be any case where the layout would be messed up?

  2. #2
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    A <div> has, by default, a width of 100%. "text-align:center" will center text within that div.

    If you want to center a fixed width div use..
    <div style="margin:0 auto; width:600px;">

  3. #3
    Join Date
    Dec 2002
    Posts
    216
    So, I will put that line for DIVs that are supposed to be centered (banner, bottom bar...), but for the other DIVs (picture, text...) use absolute positioning?

  4. #4
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    There are already heaps of posts on this topic in this forum, do a search.
    Don't use absolute positioning to align an element in the body to the centre, if you looked at it in a smaller or larger res it won't be in the centre.
    What most people do it have a container centred in the middle of the page, then have everything aligned left inside this container div.
    Then if you want anything inside this to align centre make an extra class and have this align centre and it will align centre in the container div, therefore in the centre of the page.
    eg:

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Aligning</title>
    <style type="text/css"><!--
    body {
    text-align: center;
    }
    #container {
    width: 600px;
    margin: 0 auto;
    text-align: left;
    }
    .ad {
    text-align: center;
    }
    --></style>
    <body>
    <div id="container">
    <h1>Welcome</h1>
    <div class="ad">
    <img src="blah.gif" width="350px" height="100px" alt="blah" /></div>
    </div><!--End Container-->
    </body>
    </html>

  5. #5
    Join Date
    Dec 2002
    Posts
    216
    Let's say you want to put another image or text positionned somewhere near the 3/4 of the image "blah.gif", wouldn't you have to use absolute positioning?

  6. #6
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    18,925
    Quote Originally Posted by hitman
    Let's say you want to put another image or text positionned somewhere near the 3/4 of the image "blah.gif", wouldn't you have to use absolute positioning?
    Hard to say for sure without a good visual idea of what you want, but from the description I'd guess that either you'd use relative positioning or perhaps just tweaking the margins or padding of the element you want positioned.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  7. #7
    Join Date
    Dec 2002
    Posts
    216
    But even if I tweak your margin or padding, the image won't be on top of the first one... I'm getting more confusing...
    If you have a look at the website I did, which is my first website in CSS, there's the 'latest news' image. Then, on top of it, there's another DIV for the text, then another DIV for the blue cylindric images, and finally a DIV for the 'Read more''s. The four DIVs are using absolute positioning.

    I know it's all messy, but that's the only way I know for the moment.

    So, How would this same positioning be presented with another CSS method?

  8. #8
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    commonly we use percentages, or alternativly using relative poitions and the text-align properties.
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  9. #9
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    Try something like this..
    Code:
    
    <style type="text/css">
    #news {
      margin:20px 10px; padding:0px; width:250px; height:200px;
      background:#fff url(images/bkgnd.gif) xx yy no-repeat);
      /* use xx and yy to position the background image within the div */
    }
    #news p {
      margin:0px; padding:5px 10px;  /* adjust paragraph spacing */
    }	
    </style>
    
    ..
    
    <div id="news">
      <img src="images/latestnews">
      <p>Formation.....</p>
      <p>&nbsp;<img src="images/readmore.gif" style="float:right"></p>
      <p>Rencontre.....</p>
      <p>&nbsp;<img src="images/readmore.gif" style="float:right"></p>
      <p>Mission.....</p>
      <p>&nbsp;<img src="images/readmore.gif" style="float:right"></p>
    </div>
    

  10. #10
    Join Date
    Dec 2002
    Posts
    216
    Thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles