www.webdeveloper.com
+ Reply to Thread
Results 1 to 10 of 10

Hybrid View

  1. 04-25-2005 12:56 AM #1
    hitman's Avatar
    hitman
    hitman is offline Laying back
    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?
    Reply With Quote Reply With Quote
  2. 04-25-2005 01:31 AM #2
    Nedals
    Nedals is offline Registered User
    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;">
    Reply With Quote Reply With Quote
  3. 04-25-2005 01:58 AM #3
    hitman's Avatar
    hitman
    hitman is offline Laying back
    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?
    Reply With Quote Reply With Quote
  4. 04-25-2005 02:26 AM #4
    bathurst_guy's Avatar
    bathurst_guy
    bathurst_guy is offline Registered User
    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>
    The answer to all these questions is Google.
    Give your thread a useful title | Webdeveloper.com Acceptable Use Policy
    Something wrong with your code? Validate first! |
    No Australian Net Censorship! The Australian government is wanting to follow in China's footsteps and "provide" nationwide Internet censorship, don't let them!
    Reply With Quote Reply With Quote
  5. 04-26-2005 02:30 PM #5
    hitman's Avatar
    hitman
    hitman is offline Laying back
    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?
    Reply With Quote Reply With Quote
  6. 04-26-2005 04:46 PM #6
    NogDog's Avatar
    NogDog
    NogDog is online now Moderator, take two
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    18,049
    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
    Reply With Quote Reply With Quote
  7. 04-28-2005 04:11 AM #7
    hitman's Avatar
    hitman
    hitman is offline Laying back
    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?
    Reply With Quote Reply With Quote
  8. 04-28-2005 04:14 AM #8
    scragar's Avatar
    scragar
    scragar is offline Some Random Guy
    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.
    Reply With Quote Reply With Quote
  9. 04-28-2005 10:19 AM #9
    Nedals
    Nedals is offline Registered User
    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>
    Reply With Quote Reply With Quote
  10. 04-29-2005 12:14 AM #10
    hitman's Avatar
    hitman
    hitman is offline Laying back
    Join Date
    Dec 2002
    Posts
    216
    Thank you!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles