Pure Css layout

well to do a this tutorial first of all you need a web hosting or run a server on you own computer would work as well (for test purposes a geocities site would work fine

start with the basic html structure

Code:

<html> <head><link rel="stylesheet" href="yourcss.css" type="text/css"><title>title of page</title></head><body>body goes here </body></html>

as you already know that is a simple html page now the <link rel="stylesheet" href="yourcss.css" type="text/css"> tag tells the html document to use the stylesheet yourcss.css

now in the body you put 3 div tags like so

Code:

<body><div class="leftcol">left column goes here</div> <div class="content">main content goes here</div><div class="rightcol">right column goes here</div>

now that is all you have to have in your html document for the tutorial to work

now in the css document the important new feature for this tutorial is absolute positioning

Code:

div.content { *width: 60%; *margin: 0 20%; * * * * * * * *top: 50px; *font: 11px/16px verdana, arial, sans-serif; *text-align: center; * * * * * * * *border: 2px solid *#E07000; * * * * * * * * } div.leftcol { *position: absolute; *top: 148px; *left: 5px; *width: 18%; * * * * * * * * float: left; *font: 11px/16px verdana, arial, sans-serif; * * * * * * * *border: 2px solid *#E07000; * * * * * * * * } div.rightcol { * * * * position: absolute; *top: 148px; *right: 5px; *width: 18%; *float: right; *font: 11px/16px verdana, arial, sans-serif; * * * * * * * *border: 2px solid *#E07000; }

ok first what you do is you state what you are setting in the first example is a division so you put div then add a dot then whatever you set the class for that division in the html document so it might be a good idea to try and have both pages open when you are doing this

next add { like you do for normal css then add position: absolute; which tells the browser that you are going to set an position that can't be changed

there are 3 main values for a absolute positioning (or at least for this tutorial )

you have the top atribute which tells the browser how many pixels you want the division to be from the top of the window

then the right or left atribute which tells the browser how far the division should be from the right or the left depending on which one you chose

then you have the width attribute which tells how much of the screen should be used by a division notice that my width values do not add up to 100% this is becuase you need that little space inbetween your divisions so it doesn't look crowded.

well that is all for the tutorial in my site i use php includes to link the blogging software to the webpage you can view this tutorial at http://ultimategaming.info/personal.php

PS: this tutorial will only display right on mozilla rendering browsers for some reason IE does not like absolute poistioning so if it looks weird try it with firefox at www.getfirefox.com

A better approach, which will work consistently on most modern browsers (including IE and Mozilla) and will not break, would be to use relative positioning instead of floating elements.

Set the body element as a relative-position element. This will set the body as the positioning reference for the other elements. Then simply define three absolute-position layers with the desired widths and horizontal locations from the edge of the main body.

Code:

<html> <head> <title>CSS Table Test</title> <style type="text/css"> body { position: relative; } #left { position: absolute; left: 0%; width: 20%; background-color: #CCCCCC; } #center { position: absolute; left: 25%; width: 40%; background-color: #AAAAAA; } #right { position: absolute; left: 70%; width: 30%; background-color: #999999; } </style> </head> <body> <div id="left"> Left Content Here </div> <div id="center"> Center (or Main) Content Here </div> <div id="right"> Right Content Here </div> </body> </html>

I used relatively lengths (e.g., 20%) since this will allow for resizing, but you can use pixel values for precise control if you want to maintain a fixed document size.

dmeister

oh ok i didn't know about that thanks alot this will help alot in making my stuff cross-browser compatible

EDIT: hey i tried your version out and it doesn't work in mozilla firefox which is what i use all the time and the majority of my guests use so i will stick with what i have thanks

Quote:

EDIT: hey i tried your version out and it doesn't work in mozilla firefox which is what i use all the time and the majority of my guests use so i will stick with what i have thanks

Perhaps you entered some of the code in incorrectly. Or maybe you're expecting it to behave other than it should. I've tested it in Firefox 1.0, Netscape 7.0, and Internet Explorer 6.0 and it works perfectly in all three, in both quirks mode and with a strict XHTML doctype.

Demo With Some Other CSS Properties Set

Feel free to post some of your code if you would like some help troubleshooting.

dmeister

I've modified it to also include a banner.

Demo Now Has Banner

Code:

<html> <head> <title>CSS Table Test</title> <style type="text/css"> body { position: relative; } #header { position: absolute; left: 0%; top: 0%; width: 100%; height: 100px; background-color: #000000; } #left { position: absolute; left: 0%; top: 105px; width: 20%; background-color: #CCCCCC; } #center { position: absolute; left: 25%; top: 105px; width: 40%; background-color: #AAAAAA; } #right { position: absolute; left: 70%; top: 105px; width: 30%; background-color: #999999; } </style> </head> <body> <div id="header" style="color: #FFFFFF"> <p>Header Content Here</p> <p>Put a header or image in here</p> </div> <div id="left" style="height: 200px"> <p>Left Content Here</p> <p>Note that I've set the height of this box to 200px</p> </div> <div id="center" style="height: 400px; border: solid #000000 1px; padding: 5px"> <p>Center Content Here</p> <p>Note that I've set the height of this box to 400px and added a border and some padding</p> </div> <div id="right" style="height: 200px"> <p>Right Content Here</p> <p>Note that I've set the height of this box to 300px</p> </div> </body> </html>

you should really get rid of all that internal style stuff and use an external style sheet like i have shown in my tutorial ;)

but i will try out your code (it better be valid css ;))

EDIT: that new code is better but it still looks awfull here is my css code for you to trouble shoot

Code:

body * { * * * * * * background-color: #003366; * * * * * color: #00E000; * * * * * position: relative; * * * * * *} A:link * * { * * * * * *color: #FF9900; * * * * * *text-decoration: none; * * * * * *} A:visited { * * * * * *color: #B6B6B6; * * * * * *text-decoration: none; * * * * * *} A:active { * * * * * *color: #B6B6B6; * * * * * *text-decoration: none; * * * * * *} A:hover { * * * * * *color: #979797; * * * * * *text-decoration: none; * * * * * * } div.content { *width: 60%; * * * * * * * *margin: 0 20%; * * * * * * * *top: 200px; * * * * * * * *left: 25%; * * * * font: 11px/16px verdana, arial, sans-serif; *text-align: justify; * * * * * * * *border: 2px solid *#E07000; * * * * * * * *} div.leftcol { *position: absolute; *left: 0%; * * * * * * * *top: 148px; *width: 18%; *font: 11px/16px verdana, arial, sans-serif; * * * * * * * *border: 2px solid *#E07000; * * * * * * * *height: 200px * * * * * * * *} div.rightcol { * * * * position: absolute; * * * * * * * *width: 18%; * * * * * * * *left: 70%; * * * * * * * *top: 148px; *font: 11px/16px verdana, arial, sans-serif; * * * * * * * *border: 2px solid *#E07000; * * * * * * * *height: 200px; * * * * * * * *} #header { position: absolute; left: 0%; top: 0%; width: 100%; text-align: center; }

and then my index code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><META NAME="Title" CONTENT="ultimategaming, Ultimate Gaming"> <META NAME="Author" CONTENT="tfc_generalKMK"> <META NAME="Subject" CONTENT="gaming, forums, ultimategaming"> <META NAME="Description" CONTENT="a gaming site where games come to life"> <META NAME="Keywords" CONTENT="gaming,forums,ultimategaming,my personal site, downloads,cheat codes"> <META NAME="Language" CONTENT="English"> <META NAME="Copyright" CONTENT="Copyright of author"> <META NAME="Designer" CONTENT="designer"> <META NAME="Publisher" CONTENT="lifelesspeople.com"> <META NAME="Distribution" CONTENT="Global"> <META NAME="Robots" CONTENT="All"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="personal.css" type="text/css"> <title>personal site</title> </head> <body><div id="header"> <img src="http://www.ultimategaming.info/images/personalbanner.png" alt="personal site banner"> </div> <div class="leftcol"><?php *include("personalnav.php");?><br><br><?php include("search.php");?><br><br><?php include("meta.php");?></div> <div class="content"><?php $number="5"; include("personal/show_news.php");?></div><div class="rightcol"><?php include("blogaffiliates.php");?></div> </body> </html>

please help me get this right in the mean time i will check it out with IE see if it is working there and not here for some reason :huh:

Quote:

you should really get rid of all that internal style stuff and use an external style sheet like i have shown in my tutorial ;)

Unfortunately, using an external style sheet in these examples makes it more difficult for the user to follow. Having the style rules "right there" allows for quicker reference between the rules and the elements they affect.

Quote:

but i will try out your code (it better be valid css ;))

The HTML of my original code actually validates perfectly using the W3C's HTML Validator.

Quote:

EDIT: that new code is better but it still looks awfull here is my css code for you to trouble shoot

Start by replacing your CSS with:

Code:

body * { * * * * * * *position: relative; * * * * * *background-color: #003366; * * * * * *color: #00E000; * * * *} A:link { * * * * * *color: #FF9900; * * * * * *text-decoration: none; * * * * * *} A:visited { * * * * * *color: #B6B6B6; * * * * * *text-decoration: none; * * * * * *} A:active { * * * * * *color: #B6B6B6; * * * * * *text-decoration: none; * * * * * *} A:hover { * * * * * *color: #979797; * * * * * *text-decoration: none; * * * * * *} #content { * * * * * *position: absolute; * * * * * *width: 57%; * * * * * *height: 400px; * * * * * *left: 21%; * * * * * *top: 130px; * * * * * *padding: 3px; * * * * * *font: 11px/16px verdana, arial, sans-serif; * * * * * *text-align: justify; * * * * * *border: 2px solid #E07000; * * * * * *} #leftcol { * * * * * *position: absolute; * * * * * *width: 18%; * * * * * *height: 400px; * * * * * *left: 0%; * * * * * *top: 130px; * * * * * *padding: 3px; * * * * * *font: 11px/16px verdana, arial, sans-serif; * * * * * *border: 2px solid #E07000; * * * * * *} #rightcol { * * * * * *position: absolute; * * * * * *width: 18%; * * * * * *height: 400px; * * * * * *right: 0%; * * * * * *top: 130px; * * * * * *padding: 3px; * * * * * *font: 11px/16px verdana, arial, sans-serif; * * * * * *border: 2px solid #E07000; * * * * * *} #header { * * * * * *position: absolute; * * * * * *left: 0px; * * * * * *top: 0px; * * * * * *width: 100%; * * * * * *height: 120px; * * * * * *text-align: center; * * * * * *}

Then replace your HTML with:

Code:

<div id="header"> <img src="http://www.ultimategaming.info/images/personalbanner.png" alt="personal site banner"> </div> <div id="leftcol"><?php include("personalnav.php");?><br><br><?php include("search.php");?><br><br><?php include("meta.php");?></div> <div id="content"><?php $number="5"; include("personal/show_news.php");?></div> <div id="rightcol"><?php include("blogaffiliates.php");?></div>

Then, to ensure that you're forcing modern browsers to use "standards-compatible" mode, replace your Doctype declaration with this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Note that, in particular, I have changed the columns to ID'd layers, not simply div.classes. This is the preferred implementation in this case, since you will only have one set of columns like this, and will also give you more flexibility if you ever script any of this. Also note that I have specified a minimum height of 350 pixels for your columns, which should look good over a broad range of window sizes. If you don't want to specify a minimum height, just pull the "height" rules out of the rightcol, content, and leftcol CSS definitions.

When you're done, it should look like this, which I believe is the effect you were going after:
New General CSS Site

Just let me know if you need any more help.

dmeister

Just for grins, I mocked up a dummy banner image with a theme similar to your current one, then created a repeating background image for that layer. Though I did it in a hurry so it's not exact, you can still see that expanding the size of the window still keeps the dummy image looking like it spans the entire page.

Just something for you to think about, if you want to put the extra work into it.

dmeister

i just use the banner=) thanks for the code updates=) does all that make my site valid xhtml?

i just use the banner=) thanks for the code updates=) does all that make my site valid xhtml?

EDIT: sorry about the double post

EDIT2: i copied pasted your code but the right column and the content are all stacked underneath the left column

EDIT#3: ok sorry about that now it works and looks great thanks a bunch=)

Quote:

thanks for the code updates=)... it works and looks great thanks a bunch=)

Glad it worked out for you.

Quote:

does all that make my site valid xhtml?

Close. But you still have a few "un-closed" tags. XHTML requires you to close or add end tags to everything.
and <img> tags, for instance, require a closing slash, like so:
and [img][/img].

You can plug your URL into that Validator link I provided above and it will provide you with a list of compliance errors.

dmeister

ok i have fealing the blogging system i am using is not xhtml compliant =/ which code make for a hard time validating sinse it is spread over a variety of different files

Very nice Tut.... very very nice. :P

Three column CSS based layout, sweet :)

wow been a while since ihave looked at this glad you guys like it this summer i am probably gonna be working on my site code wise agian and it is at ultimategaming.dragongumbo.com my partner made the index we are using right now looks pretty good too