#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Location
    NYC
    Posts
    109
    Rep Power
    12

    soley using css, no tables + php


    Hello All:

    I have finished the first stage of my page, got the php to correctly work with my friendís mysql dbase. Now onto design.

    When I first developed this page, I tried tables but the php didnít work, all Id get was a blank page. After several tries at tweaking- and from suggestions- I decided to implement full CSS- and the page works. Now . . . of course you can tell the layout still needs to be positioned correctly and I want to us CSS.

    I am trying to figure out how zeldman centered his content without tables. I combed thru his code trying to pick out what he did. I know itís a combination of many things such as

    Code:
    body	{
    	text-align: center;
    	margin: 0;
    	padding: 0;
    	border: 0;	
    	background: #ddb url(/i04/holder.gif) top center repeat-y;
    	color: #885;
    	font: small/1.4 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
    	}
    
    div#wrapper	{
    	color: #885;
    	background: transparent url(/i04/wrapinner.gif) top left repeat-y;
    	width: 742px;
    	margin: 0 auto;
    	padding: 0;
    	text-align: left;
    	}
    
    div#maincontent 	{
    	float: left;
    	width: 440px;
    	padding: 0;
    	border: 0;
    	margin: 0;
    	/* False margin value for all versions of IE Win, including 6.0 */	
    	margin-left: 6px;
    	}
    
    html>body div#maincontent {
    	/* Correct value for browsers that don't suffer from IE Win's bugs */
    	margin-left: 12px;
    	}
    
    div#sidebar	{
    	margin: 0 0 0 472px;
    	padding: 0;
    	width: 230px;
    	border: 0;
    	}
    But what is holding all the content in center of page. Margins? I think if I get this first part right, I can play with left nav, top banner space, etc.

    Thanks!
    Thanks.
    CRO8

    ________
    h o m e
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Bristol - UK
    Posts
    257
    Rep Power
    26
    Zeldman has used a DIV with ID 'wrapper' which conatins all of the page content. Giving this DIV a fixed width value and setting margins to auto horizontally centers it in the page except in ie5.5. He uses 'text-align: center;' in the body style to center in ie 5.5 and then 'text-align: left;' in the wrapper styles to undo the centered text inside the wrapper.

    Simple as that really!

    Hope this helps
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Bristol - UK
    Posts
    257
    Rep Power
    26
    Like this:

    <!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" lang="en">
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    body {
    text-align: center;
    margin: 0;
    padding: 0;
    }
    #wrapper {
    text-align: left;
    width: 750px;
    margin: 0 auto;
    background: #cff;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <p>I am content</p>
    </div>
    </body>
    </html>
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Location
    NYC
    Posts
    109
    Rep Power
    12
    JDG_CSS thanks. I read his dwws book and looked at his current css code and remember him doing some of what you alluded to. This is really helpful when someone pulls out necessary code and explains it. I will play around tonight after work.

    Thanks!
    Thanks.
    CRO8

    ________
    h o m e
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Bristol - UK
    Posts
    257
    Rep Power
    26
    More than welcome, good luck.

IMN logo majestic logo threadwatch logo seochat tools logo