So today I am going to be giving you guys a pretty detailed example of a simple CSS layout, I am going to throw in some tips and best practices while I am at it. One thing to always keep in mind when doing a CSS layout is that Fire Fox/IE7 and IE 6 render margins and padding differently. So playing with margins and padding, taking them to extremes to see what is going on will help you troubleshoot many of your issues.
That is just one discrepancy with CSS over different browsers, through your journey of CSS layout, you will find more, and it just takes experience and patience. CSS is easy, so everyone says, but when you start wanting it to look exactly the same in all browsers…which YOU DO, it can be tricky. I suggest you first search the CSS forums for your problem because we have all run into these problems and been stumped. If you don’t find it, just post and we will be happy to inform you of what is going on…don’t spend more than an hour on troubleshooting, the answer is usually simple, you just have to have been there and done it.
Let’s get started…here is the CSS:
CODE
body{
/*global styles are not usually useful in a CSS layout, you want to specify your tags separatly for each div, it gives you more control and less .class span class garb everywhere, usually the only thing I style globally is the font in the body, because you only want ONE FONT for your whole site, in special circumstances you can specify otherwise*/
background-color:#000;
font-family:Arial, Helvetica, sans-serif;
}
/* You need something to wrap the whole thing up in, this will also control your overall width and positioning */
#wrapper{ /*find a coding standard that works best for you so that it is readable*/
width: 900px;
margin: 0 auto; /*this is how you center a div*/
background-color:#666666;
}
/*Now we must start our layout*/
#header{
width:900px;
background-image:url(images/your_image_here.jpg); /*Of course this is optional but usually how I do it*/
background-repeat:no-repeat; /*This line and the next are best practices and usful attributes to know*/
background-position:top; /*Now we have our pic in the bg and can add all the text on top that we want*/
background-color:#333333;
}
#header p{ /*We want to style the paragraph tags inside of the header*/
color:#fff;
font-size:14px;
margin:0;
padding: 82px 6px 0px 6px; /* Top Right Bottom Left (thanks Chris) 82px will push it down enough to show the whole background...it's a hack but that's how I roll*/
}
/*Let's start the menu8--this is a simple version of my vertical pretty css memu*/
/*We make menus by unordered lists*/
#menu{
height:25px;
font-size:11px;
color:#fff;
background-color:#999999;
}
#menu ul{
margin:0;
padding:0;
list-style-type:none;
}
#menu ul li{
display:inline;
}
#menu ul li a{
float:left;
padding:6px 0;
width:65px;
text-align:center;
} /*See my Pretty CSS Menus Tutorial for a more detailed explanation*/
/*Now for our Content*/
#content{
background-color:#CCCCCC;
width:900px; /* You know I am sure that some DIC Heads out there may think that specifying this width over and over is redundant...but I just like to for insurance*/
}
/*We style the p tag here again, as well as our h tags*/
#content h1{
font-size:18px;
font-weight:normal; /*All h tags are BOLDED by default*/
margin: 0 6px;
padding: 15px 0 3px 0;
}
#content p{
color:#000;
font-size:12px;
margin: 0 6px; /* Top/Bottom Left/Right...we want the paragraph to flush rught up to the bottom of the h1*/
padding: 0 6px 9px 6px;
}
/* And now the fun part!*/
#information{
margin:15px 6px; /*this will position it level w/ the h1 tag and a bit away from the edge...my preferance*/
width:200px;
float:right;
background-color:#FF0000;
border:1px solid #000;
}
#information p{
font-size:11px;
color:#fff;
margin: 0;
padding: 6px;
}
/*THE FOOTER IS THE MOST IMPORTANT PART WHEN USING ANY FLOATING DIVS*/
#footer{
clear:both; /*This ensures that your floating information box pushes the wrapper to the bottom of the box, leaving this out would result in the information box poking out of the wrapper into the body like a tab...that’s bad...and ugly*/
background-color:#FFFF00;
}
#footer p{
font-size:15px;
font-weight:bold;
color:#000;
}
Now the HTML
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" />
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="/khprsnl/more.css" />
</head>
<body>
<!--OPEN WRAPPER-->
<div id="wrapper"> <!-- When writing your HTML always close your div tags as soon as you open them IE: <div> id="blah"></div> --then go back and work inside the div, this helps when you have a lot of divs inside each other --this is good advice for any tag or bracket-->
<!--OPEN HEADER-->
<div id="header">
<p>blah blah blah</p>
</div>
<!--CLOSE HEADER-->
<!--Proper indention is useful for readability for others and when you come back to your code-->
<!--OPEN MENU-->
<div id="menu">
<ul>
<li><a href="#">This</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Will</a></li>
<li><a href="#">Take</a></li>
<li><a href="#">You</a></li>
<li><a href="#">Nowhere</a></li>
</ul>
</div>
<!--CLOSE MENU-->
<!--OPEN CONTENT-->
<div id="content">
<!--OPEN INFORMATION BOX-->
<div id="information">
<p>Special Information goes here</p>
<p>Search boxes</p>
<p>Links that have to do with this specific page</p>
</div>
<!--CLOSE INFORMATION BOX-->
<!--start content text-->
<h1>This is your h1 tag</h1>
<p>Here is a paragraph</p>
<!--OPEN FOOTER-->
<div id="footer">
<p>NEVER FORGET TO CLEAR YOUR FLOATING ELEMENTS</p>
</div>
<!--CLOSE FOOTER-->
</div>
<!--CLOSE CONTENT-->
</div>
<!--CLOSE WRAPPER-->
</body>
</html>
you can find this layout
hereThis post has been edited by supersssweety: 31 Oct, 2007 - 09:45 PM
Simple CSS Layout
24 Oct, 2007 - 09:45 PM
|