SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS centering a page

    Hey everyone,

    I'm fairly new to CSS. I really like how sites like apple and blockbuster center their websites. The page will remained centered until the outer edges are no more. Then when only the content exists it collapses as if it were in an absolute position. Does anyone know how to accomplish this or can point me in the right direction?

    Thanks

  2. #2
    SitePoint Zealot Jay-S's Avatar
    Join Date
    May 2007
    Location
    Croatia/Samobor
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #
    #container {
    width:800px; put px of your web site...
    margin:auto;
    height:auto;
    }

  3. #3
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jay-S for your help!

    Thats exactly what I wanted, but with only one tiny loop-hole; I'm still left with a few extra pixels on the left when I collapse completely, do you know how I can change that?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Browsers use padding or margins on the body by default so you'll need to set these to 0 like this if you haven't already

    Code:
    body {
      padding: 0;
      margin: 0;
    }
    Personally, I prefer to set everything to zero so that I can apply paddings and margins as I want it and not how the browser renders them. You'll probably run into the same issue when you're working with h1, h2 etc.

    YOu can set all paddings and margins to zero by using the following rule at the beginning of your CSS.

    Code:
    * {
      padding: 0;
      margin: 0;
    }
    This way you don't have to set it for every element that you want to reset

    Hope that solves your problem.

  5. #5
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it does! Thank you.

    p.s. I think these two are gay
    what the hell was sitepoint thinking?

  6. #6
    whagwan? silver trophybronze trophy akritic's Avatar
    Join Date
    Nov 2006
    Posts
    2,780
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:


    that's the emote for one of the team leaders on sitepoint, you're in for big trouble now.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Who cares who it belongs to? I'm personally thinking of taking the brothercake smiley and introducing it to the Machine Gun Kelly smiley.

    Anyway, as the others have said, put a width on the element, make sure it's set to display: block; (only if an inline element like <span> since block-level elements like H1, H2, P, DIV and so forth don't need it) and then set the margin to 0 auto;

    Code:
    #container {
        margin: 0 auto;
        width: 760px;
    }

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're centering the whole site then I'd tend to apply this to the body

    Code:
    body {
      margin: 0 auto;
      width: 760px;
    }
    Then I'd usually float a container within this

    Code:
    #container {
      float: left;
      width: 760px;
    }
    Which then simplifies things when floating other elements inside it. There are otherways but I find that the simplest.

  9. #9
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate all the help from everyone. It's nice to see.

    Quote Originally Posted by armchaircritic View Post
    Off Topic:


    that's the emote for one of the team leaders on sitepoint, you're in for big trouble now.
    Haha, you can't be serious. How do you let them get away with having that?

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I typically deal with 100&#37; document height models, so I always have a #container ID applied to a DIV that contains everything but the footer.

    Force of habit for me.

  11. #11
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this is an older thread, but it's topic related...

    Well, I got my page centered, but I'm have trouble positioning my elements inside the container. I don't know how to control the elements vertically with the exception of the <br /> and have a crappy method of centering my divs. All I want to do is be able to control where I put my div in the container with ease. Any suggestions? Thanks.

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <?php 
    //variables
    
    //title
    $title_ = "Title";
    ?>
    <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    body {
      margin: 0 auto;
      margin-left:auto;
      margin-right:auto;
      width: 898px;
      background-color:#CCCC66
    }
    #container {
      float: left;
      width: 898px;
      height: 900px;
      background-color:#999999;
    
    }  
    
    #link1{
    float: left;
    width: 222px;
    background-color:#CCCC66;
    height: 25px;
    border: solid rgb(250,0,255);
    border-width: 2px 1px 2px 2px;
    }
    #link2{
    float: left;
    height: 25px;
    top: 90px;
    width: 222px;
    background-color:#CCCC66;
    border: solid rgb(250,0,250);
    border-width: 2px 1px 2px 1px;
    }
    #link3{
    float: left;
    height: 25px;
    width: 222px;
    background-color:#CCCC66;
    border: solid rgb(250,0,250);
    border-width: 2px 1px 2px 1px;
    }
    #link4{
    float: left;
    height: 25px;
    width: 222px;
    background-color:#CCCC66;
    border: solid rgb(250,0,250);
    border-width: 2px 2px 2px 1px
    }
    #box{
    float: left;
    left: 80px;
    height: 90px;
    width: 519px;
    background-color:#999999;
    border: solid rgb(250,0,250);
    border-width: 0px 0px 0px 0px;
    }
    #innerbox{
      top: 700px;
      float:right;
      width:136px;
      height:177px;
      z-index:1;
      background: #CCCC66;
      border: solid rgb(250,0,250);
      border-width: 2px 2px 2px 2px;
    
    }
    
    </style>
    <title><? echo $title_; ?></title>
    </head>
    
    <body>
    <div id="container"><br />
    <h1 id="myh1" class="h1color_"><center><? echo $title_; ?></center></h1>
    <hr id="myhr" />
    <br />
    <div id="link1" style="background-color:#CCCC66"><p>link1</p></div>
    <div id="link2">link2</div>
    <div id="link3">link3</div>
    <div id="link4">link4</div>
    <!--<button onclick="positioning_width_other()">pos other</button>-->
    <br />
    <br />
    <br />
    <br />
    <div id="box"><div id="innerbox"><p align="center">Box</p></div></div>
    </div>
    </body>
    </html>

  12. #12
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without knowing exactly what type of layout you're after it's difficult to advise you other than giving general advice.

    Use float's on the elements within your contain to position them next to each other as required, you can then apply paddings and margins to them to space them.

    I'd generally wrap specific sections in a div which would give me areas of the page I can work with. header, content, navigation, footer etc might be ID's that I'll apply.

    I wrote a tutorial last week for a simple CSS layout which might be useful to explain this http://www.dave-woods.co.uk/?p=73

    There's a few other things wrong with your code that I can spot.

    1 - Don't use <centre> tags as you can use text-align: center on your h1 within CSS to achieve this.

    2 - Use a list to display your menu (again this is explained in my tutorial)

    3 - Don't use <br /> for spacing, padding-bottom in the CSS can achieve the same effect.

    4 - This is probably personal preference but I'd try not to mix HEX values with RGB. I stick to using HEX values for consistency for all my colour codes.

  13. #13
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this article: http://www.jakpsatweb.cz/css/css-ver...-solution.html (for centering virtical content)
    If you just want to position it, say 5px down and 5px to the right, just use padding or margins.

  14. #14
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You are putting all your links in individual divs and then styling each div.
    It would be a lot simpler to apply a style to the links directly. Then you'd only need to define it once. And you wouldn't need all that float left, because they are inline elements and will appear in a line. Or you could do what most people do, put the links in as a series of list items and style the list and the links.

    Using a separate div for every element you use is called divititis, but it can be cured.

  15. #15
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Dr. John
    Divititis indeed. I like using a lot of divisions; they allow maximum control. Are you telling me using a lot will cause rendering problems/slower page loads or do you think it's simpler using different methods?

    @wyrd33
    Thanks, I definatley got the elements where I wanted, it seems to get a bit sloppy though. Plus I can't overlap elements, do you know a way to do so?

    @csswiz
    1. Center tag is deprecated, thanks for pointing that out
    2. I don't mind using divs unless you can persuade me otherwise
    3. Why?
    4. I agree; using hex rgb may get confusing, best to stay consistent.

    I updated my code and have a few questions (still haven't changed the hex/rgb csswiz).
    1. How do I overlap my boxes with one another
    2. Why do I have to leave the "padding:" blank for it display propper margins/padding for my main container

    Heres my code. Take a peek at it if you want and don't be shy if you think you know a better way of doing it. Thanks.
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <?php 
    //variables
    
    //title
    $title_ = "Title";
    ?>
    <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    #myhr {
    width: 90%;
    }
    
    
    body {
      padding: 15px 0px 15px 0px;
      margin-left:auto;
      margin-right:auto;
      margin-top:auto;
      margin-bottom:auto;
      width: 904px;
      background-color:#CCCC66;
    }
    #container {
      padding:
      float: left;
      width: 898px;
      height: 900px;
      background-color:#999999;
      border: solid rgb(250,0,255);
      border-width: 2px 2px 2px 2px
    
    }  
    #link1{
    margin: 0px 0px 0px 0px; 
    float: left;
    width: 222px;
    background-color:#CCCC66;
    height: 25px;
    border: solid rgb(250,0,255);
    border-width: 2px 1px 2px 1px;
    z-index:1;
    }
    #link2{
    float: left;
    height: 25px;
    margin: 0px 0px 0px 0px;
    width: 223px;
    background-color:#CCCC66;
    border: solid rgb(250,0,250);
    border-width: 2px 1px 2px 1px;
    z-index:1;
    }
    #link3{
    float: left;
    margin: 0px 0px 0px 0px;
    height: 25px;
    width: 223px;
    background-color:#CCCC66;
    border: solid rgb(250,0,250);
    border-width: 2px 1px 2px 1px;
    }
    #link4{
    float: left;
    height: 25px;
    width: 222px;
    background-color:#CCCC66;
    border: solid rgb(250,0,250);
    border-width: 2px 1px 2px 1px;
    }
    #innerbox{
      width:136px;
      height:177px;
      margin: 0px 0px 0px 68px;
      z-index:0;
      background: #CCCC66;
      border: solid rgb(250,0,250);
      border-width: 2px 2px 2px 2px;
    
    }
    #innerbox2{
      width:136px;
      height:177px;
      margin: -182px 0px 0px 275px;
      z-index:0;
      background: #CCCC66;
      border: solid rgb(250,0,250);
      border-width: 2px 2px 2px 2px;
    
    }
    #innerbox3{
      width:136px;
      height:177px;
      margin: -182px 0px 0px 482px;
      z-index:0;
      background: #CCCC66;
      border: solid rgb(250,0,250);
      border-width: 2px 2px 2px 2px;
    
    }
    #innerbox4{
      width:136px;
      height:177px;
      margin: -182px 0px 0px 689px;
      z-index:0;
      background: #CCCC66;
      border: solid rgb(250,0,250);
      border-width: 2px 2px 2px 2px;
    
    }
    
    
    </style>
    <title><? echo $title_; ?></title>
    </head>
    
    <body>
    <div id="container"><br />
    <h1 id="myh1" class="h1color_" align="center"><? echo $title_; ?></h1>
    <div align="center">
    <hr align="center" id="myhr" />
    </div>
    <br />
    <div id="link1" style="background-color:#CCCC66"><p>link1</p></div>
    <div id="link2">link2</div>
    <div id="link3">link3</div>
    <div id="link4">link4</div>
    <!--<button onclick="positioning_width_other()">pos other</button>-->
    <br />
    <br />
    <br />
    <br />
    <div id="innerbox"><p align="center">Box</p></div>
    <div id="innerbox2"><p align="center">Box2</p></div>
    <div id="innerbox3"><p align="center">Box3</p></div>
    <div id="innerbox4"><p align="center">Box4</p></div>
    </div>
    </body>
    </html>


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
  •