SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Center This

  1. #1
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Center This

    Code:
    <style>
    #LogoFrame{
    	float: left;
    	width: 307px;
    	height: 120px;
    	background-color: #000000;
    }
    #AdFrame{
    	float: left;
    	width: 453px;
    	height: 120px;
    	border: 1px;
    	border-left: 0px;
    	border-top: 0px;
    	border-bottom: 0px;
    	border-color: #333333;
    	border-style: solid;
    	background-color: #000000;
    	background-image: url(/images/bgg.gif);
    }
    </style>
    
    <div align="center">
    <span id="LogoFrame">
    <img src="/images/title.jpg" /><br />
    </span>
    <span id="AdFrame">
    hey
    </span>
    </div>
    How can I get this to center?
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    One way to centre is to surround the floats in a div and set margin right & left to auto. To cater for IE5 you need to surround the whole lot with another div using text-align:centre which IE5 interprets as centre whole div and content not just content as other browers do.
    Code:
    /*hack for ie5*/
    .centre1 {
    text-align:center;
    }
    /*correct way to centre*/
    .centre2 {
    margin-right: auto;
    margin-left: auto;
    width: 761px; 
    text-align:left;
    }
    & then in the body:
    Code:
    <div class="centre1">
    <div class="centre2">
    <span id="LogoFrame">
    <img src="/images/title.jpg" /><br />
    </span>
    <span id="AdFrame">
    hey
    </span>
    </div>
    </div>
    Hope this is what you mean.

    (I'm not sure what you are trying to accomplish with the spans and the break. Why don't you use divs.)

    Paul


    Paul

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fwiw, it's usually enough to add the text-align: center to the body tag selector, rather than creating another container div.

    The workaround requires that the text-align: center be added to the containing block-level element.
    The containing block-level element for outermost div would be the body, ergo...
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Bill,

    Thanks for mentioning that and I agree it does make for cleaner code as long as nothing else is going on the page.

    If you have other content on the page then a slight drawback of course is that you will have to define text-align:left etc in all the other divs on the page otherwise they will default to centre as opposed to the default of left.

    There is also a bigger drawback in that IE5 & IE6 will also centre any other (non-positioned) div on the page by default whereas Mozilla will only centre the ones with margins left and right set to auto.( I've only just noticed this! I didn't realise that IE6 still centred divs with text-align:center, I thought that had been fixed when they fixed the margin auto etc.)

    Paul

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not all other divs.

    Presuming you are still using a container div* to contain the actual content then you only need to 'reset' the text-align: left in that one div.
    It will be inherited down to any divs contained within it.
    (* what would be 'centre2' in your example)

    Of course, rather than resetting the text-align in all divs (inside the text-centered body) css could be used to do the work instead.

    Code:
    body {
    text-align: center;
    }
    
    div {
    text-align: left;
    }
    Any alternatively-aligned divs could be classified accordingly (presuming the majority will be left-aligned).

    The bottom line is that setting text-align in the body tag selector rather than creating a 'center1' div to encapsulate the lot is effectively identical to your own example**. It just all takes place one step up and doesn't require the addition of an extra container.
    (** which also requires that the text-align be reset in the child divs)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Bill,

    I understand what you say and I have often used both techniques, and as you say "presuming you are still using a container div to contain actual content" then your example is more efficient.

    However I'm still not sure that putting text-align:center in the body tag is still the best way to go (I may be wrong though and it probably depends on circumstance.

    In the example below putting text-align:center in the body will result in all divs being centred in ie5 & ie6 (not mozilla etc) unless we surround the divs with another div with text-align:left (or as in your example setting text:align:left in the CSS).

    Code:
    <style type="text/css">
    body {
    text-align: center;
    }
    div {
    text-align: left;
    }
    .box1 {
     background-color: #FFFFCC;
     height: 200px;
     width: 200px;
     margin-right: auto;
     margin-left: auto;
    }
    .box2 {
     background-color: #FFFFCC;
     height: 200px;
     width: 100px; 
    }
    .box3 {
     background-color: #FFFFCC;
     height: 200px;
     width: 300px; 
    }
    </style>
    </head>
    <body>
    <!--this box will be centred -->
    <div class="box1">Text</div>
    <div><!--these will now be left aligned divs but only if surrounded by this div-->
    <!--otherwise Ie5 & Ie6 will centre the whole div as well as the content-->
     <div class="box2">Text</div>
     <div class="box3">Text</div>
    </div>
    In my example below the only div that will be centred in all browsers is the one specific div. Everything else is back to the normal default of left which seems neater (in this example) to me.

    Code:
    <style type="text/css">
    .centre {
    text-align: center;
    }
    .box1 {
     background-color: #FFFFCC;
     height: 200px;
     width: 200px;
     margin-right: auto;
     margin-left: auto;
     text-align: left;
    }
    .box2 {
     background-color: #FFFFCC;
     height: 200px;
     width: 100px; 
    }
    .box3 {
     background-color: #FFFFCC;
     height: 200px;
     width: 300px; 
    }
    </style>
    </head>
    <body>
    <div class="centre"><!--this will be centred -->
    <div class="box1">Text</div>
    </div>
    <!--these and any others will be left aligned by default -->
    <div class="box2">Text</div>
    <div class="box3">Text</div>
    I think my assumptions are correct (unless i've misunderstood the finer points) but I'm sure you'll tell me if I'm wrong.

    Paul

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Our examples are a case of 'six of one and half a dozen of the other'. There really is no operational difference between them.

    The only difference is what we perceive to be happening behind the code on the parse level.

    I personally prefer the 'all done in css' option as I feel it makes better use of css's ability to reduce the amount of additional/repetitive markup.

    But like I say, they both work equally well (afaik).
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bill Posters
    I personally prefer the 'all done in css' option as I feel it makes better use of css's ability to reduce the amount of additional/repetitive markup.
    same here...and CSS is about the only place where i can "morally" justify having workarounds and hacks to get around faulty browser implementation...as i would now never resort to munging my (x)html in order to achieve a certain presentational effect. from that point of view, i fell in love with the CSS-based simplicity of the text-align "trick" when you mentioned it the other day...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com


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
  •