SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Stockholm, Sweden
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering divs (things i still dont get)

    I've looked up the webpage http://bluerobot.com/web/css/center1.html and the problem is I dont know exactly where to put the code since i dont know that much css. could you please post the most basic working html code witch contains this code:
    Code:
    body {
    	margin:50px 0px; padding:0px;
    	text-align:center;
    	}
    	
    #Content {
    	width:500px;
    	margin:0px auto;
    	text-align:left;
    	padding:15px;
    	border:1px dashed #333;
    	background-color:#eee;
    	}
    And also, will this div work as a parent to other divs? thanks.

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the code you already have, you simply need this:

    <body>
    <div id="Content">
    <p>This box is horizontally centered by setting its right and left margin widths to "auto". This is the preferred way to accomplish horizontal centering with CSS, and works very well in most browsers with CSS2 support. Unfortunately, IE5/Win does not respond to this method - a shortcoming of that browser, not the technique.</p>
    </div>
    </body>
    </html>
    Last edited by creole; Aug 8, 2002 at 11:59.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Stockholm, Sweden
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but where do you place the code? between <head> </head>?

  4. #4
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can either put CSS in an external file or keep it in a <style> element in the <head> part of your document. Here's how to do the latter:
    Code:
    <head>
    <style type="text/css">
    body {
    	margin:50px 0px; padding:0px;
    	text-align:center;
    	}
    	
    #Content {
    	width:500px;
    	margin:0px auto;
    	text-align:left;
    	padding:15px;
    	border:1px dashed #333;
    	background-color:#eee;
    	}
    </style>
    </head>

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Stockholm, Sweden
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, thanks. what is the difference between body{} and #content{}?

  6. #6
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In body{}, "body" is acting as a 'selector'. The properties inside { } will be applied to the body tag, in this case a margin, some padding, and a text-alignment.

    #content is creating an ID named "content". This ID can then be applied to a <div> in the way that creole showed you below. (<div id="content">. The attributes of #content in the stylesheet will be applied to the <div>.

    Think of a DIV as a block or box of content. I would recommend reading up on CSS positioning. Here are a couple good links:

    Brainjar CSS Positioning Tut
    glish.com CSS layout techniques
    Last edited by Adam P.; Aug 8, 2002 at 07:39.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to add to what Swimm said:

    Any style set within body {} would be applied to everything inside the body tag.

    #content is what's known as an ID. This can only be applied to ONE thing on a page. It's called ID because it allows you to uniquely identify an object on a page so that javascripting (dHTML) can interact with it. As for the style portion, the same thing goes for an ID as for the BODY. Any style specified inside #content would affect any object with the ID of "content".
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't forget to close the div at the correct point with </div>.

    (Creole's first example missed it out)
    New Plastic Arts: Visual Communication | DesignateOnline

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

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good catch William...

    I'll fix that right now.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


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
  •