- Impact
- 15
So I see every day people is asking for CSS fixes in their layouts, most of the time I correct them for fun, and I've noticed the main reason people is getting complicated with CSS is because... they're complicating it for no reason.
So this is a mini tutorial that will help you (I hope) to achieve the dreaded CSS thingy in just... 10 lines of CSS. And to make it more fun, I'll use some techniques that will help you to achieve things that most people is afraid of: same height columns!
So, you can see the sample at http://mozlo.com/css_tutorial/
The sample has a header, a 3 columns body and a footer. If you want more or less columns, simply add/delete the column as you want it (and be sure to change the width for each column). In 99% of cases, you won't want anything more complicated like this.
Are you seeing it? Cool. The html code for the page (without all the lipsum stuff) is as simple as this:
let's analyze this: first of all, there's something that jumps to the view at first sight: COMMENTS! . Yes, they jump to the view because I wanted that and because that's what comments are for: to help you visualize everything at first glimpse. USE COMMENTS, LOVE COMMENTS, EMBRACE COMMENTS. If you think the 2kb they may add to a page are a bandwidth problem, well... you're in the wrong business.
Then you have the header (with h1 tag) the cols (named in a way you'll recognize what they are at first sight) and a footer. You'll also see some "strange" code, and styled HR, but don't worry, I'll go to it later.
Once you have your html, you need to start define elements. I'll make it sweet and simple: using px instead of ems or percentage, this one uses a container with 960px width, side columns are half of what the main column width is. Here goes the CSS code:
let's go line by line (or 2 at most)
Nothing strange here, just defining the colors and font and reseting all margins and paddings
now, we add some flavor. Everything is quite straight, but we'll use position:relative, z-index:1 and overflow:hidden. You won't normally need them most of the times, but we need it for the 100% height columns and the footer.
The header uses another of my tricks: padding:16px; margin:-16px; This makes sure the width is 100% overriding any margin or padding I may add to the container box. Tricky but effective.
LET'S GO WITH THE COLUMNS!!!!
The columns are extremely simple in their layout, but you'll see those 4000px values and will ask yourself WTF! . That's another of my tricks. By applying a huge padding value to the column and then a huge negative margin, the overflow:hidden we used in the container makes sure all columns are 100% height. Neat, huh? :hehe: Everything else is just styling (width, bg, color, whatever)
and finally, the footer:
Here, the overflow:hidden I used in the container box, makes its work again and avoids anything goes "out of the box". The only special thing I had to keep in mind is to add a z-index higher than the container, or it would be below the columns.
Finally, the misterious HR thing: I use that to add a little space when going wild with positive/negative values and clearing all floats. Dirty, but lovely.
And that's it! The "impossible to make" in just 10 lines of CSS code. Now you can add divs inside the existing divs or whatever, try new things, experiment and learn!
Hope this helps, if any mod feels like correcting my Engrish, I'd appreciate it
So this is a mini tutorial that will help you (I hope) to achieve the dreaded CSS thingy in just... 10 lines of CSS. And to make it more fun, I'll use some techniques that will help you to achieve things that most people is afraid of: same height columns!
So, you can see the sample at http://mozlo.com/css_tutorial/
The sample has a header, a 3 columns body and a footer. If you want more or less columns, simply add/delete the column as you want it (and be sure to change the width for each column). In 99% of cases, you won't want anything more complicated like this.
Are you seeing it? Cool. The html code for the page (without all the lipsum stuff) is as simple as this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"><h1>This is the Header</h1></div>
<!--*************************************START LEFT COLUMN ***********************************************-->
<div id="leftcol"><h2>The left column</h2><p>And the text for the left column</p></div>
<!--*************************************END LEFT COLUMN ***********************************************-->
<!--*************************************START CENTER COLUMN ***********************************************-->
<div id="midcol"><h2>The middle column</h2><p>And some text for the center column</p>
</div>
<!--*************************************END CENTER COLUMN ***********************************************-->
<!--*************************************START RIGHT COLUMN ***********************************************-->
<div id="rightcol"><h2>The right column</h2><p>And then again, some text for the right column</p>
</div>
<!--*************************************END RIGHT COLUMN ***********************************************-->
<hr style="display:block; height:0.1em; clear:both; visibility:hidden;" />
<div id="footer">Footer</div>
</div>
<!--*************************************END MAIN CONTAINER ***********************************************-->
</body>
</html>let's analyze this: first of all, there's something that jumps to the view at first sight: COMMENTS! . Yes, they jump to the view because I wanted that and because that's what comments are for: to help you visualize everything at first glimpse. USE COMMENTS, LOVE COMMENTS, EMBRACE COMMENTS. If you think the 2kb they may add to a page are a bandwidth problem, well... you're in the wrong business.
Then you have the header (with h1 tag) the cols (named in a way you'll recognize what they are at first sight) and a footer. You'll also see some "strange" code, and styled HR, but don't worry, I'll go to it later.
Once you have your html, you need to start define elements. I'll make it sweet and simple: using px instead of ems or percentage, this one uses a container with 960px width, side columns are half of what the main column width is. Here goes the CSS code:
Code:
* {margin:0px; padding:0px;}
body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}
#container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}
#header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;}
#header h1{color:#fff; text-align:left;}
#leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; }
#midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;}
#midcol p{margin-bottom:10px;}
#rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; overflow:hidden; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;}
#footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}let's go line by line (or 2 at most)
Code:
* {margin:0px; padding:0px;}
body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}Nothing strange here, just defining the colors and font and reseting all margins and paddings
Code:
#container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}now, we add some flavor. Everything is quite straight, but we'll use position:relative, z-index:1 and overflow:hidden. You won't normally need them most of the times, but we need it for the 100% height columns and the footer.
Code:
#header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;}
#header h1{color:#fff; text-align:left;}The header uses another of my tricks: padding:16px; margin:-16px; This makes sure the width is 100% overriding any margin or padding I may add to the container box. Tricky but effective.
LET'S GO WITH THE COLUMNS!!!!
Code:
#leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; }
#midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;}
#rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;}The columns are extremely simple in their layout, but you'll see those 4000px values and will ask yourself WTF! . That's another of my tricks. By applying a huge padding value to the column and then a huge negative margin, the overflow:hidden we used in the container makes sure all columns are 100% height. Neat, huh? :hehe: Everything else is just styling (width, bg, color, whatever)
and finally, the footer:
Code:
#footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}Here, the overflow:hidden I used in the container box, makes its work again and avoids anything goes "out of the box". The only special thing I had to keep in mind is to add a z-index higher than the container, or it would be below the columns.
Finally, the misterious HR thing: I use that to add a little space when going wild with positive/negative values and clearing all floats. Dirty, but lovely.
And that's it! The "impossible to make" in just 10 lines of CSS code. Now you can add divs inside the existing divs or whatever, try new things, experiment and learn!
Hope this helps, if any mod feels like correcting my Engrish, I'd appreciate it
