3col Html/css Page

Pierce · May 6, 2005

im going to start doing some nice and easy layout to begin, ive been doing css for about a month now and its the beginning and end of webdesign its soo cool easy and effective to impliment.

Im going to do the 3 colum holy grail of internet, even BestTechie.Net uses it!!

I use dreamweaver for creating my pages but i will write here as if im doing it in notepad and at the end will be a link to the finished project.

Step 1, begin with the basic HTML template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>PageName Goes HERE</title>

</head>

<body>

</body>

</html>

first add in your CSS link, which should be anywhere between <head> and </head>

(im creating a site with index.html and css_layout.css you can name and should re-name these files as appropriate)

what it is, is a link, relating to a stylesheet, its located in the same directory as index.html and its name is css_layout.css and its type is text or cass cading style sheets.

so, the 3 colume holy grail, add this between the <body></body> tags ignore lines that begin with @

@The line below gives the TOP HEADER part

<div id="top">BestTechie.Net</div>

@This is the left menu

@This is the main content of the page

<div id="middle">middle</div>

@This can be an information pane or advertisments whatever takes your fancy

<div id="right">right</div>

okay, if you save all that and open it up you get 4 rows, and looks like nothing really,

now for the CSS this determins the layout,

@notice that the line starts with #top, see how the div tag has id="top" ? this is telling the browser that this ID should have the following properties

#top {

text-align:center;

}

@then the next div tag which has left

#left {

float:left;

}

@the float means what it says FLOAT it left of the page

@the middle should also float left

#middle {

float:left;

}

@however the right side should float right

#right {

float:middle;

}

now save the CSS page and reopen the page in your browser, you should see left, middle and right all on the same line below BestTechie.Net which is aligned in the centre.

okay, its pretty bland, but its there, now lets make besttechie.net big and bold

change <div id="top">BestTechie.Net</div>

to <div id="top"><h1>BestTechie.Net</h1></div>

now save and refresh/reopen the page you should have a big bold BestTechie.Net right in the middle of the page, but lets change it using the CSS

in your css file, lets make it smaller slightly, change its colour and add a background

so for the h1 tag do

h1 {

font-size:20px;

color:#0099FF;

}

now, lets change the background on which it sits go back to the #top { } on the CSS file

and in between the tags add

background-color:#33CCFF;

save and refresh you page and you should see some updates

now, "leftmiddle" appears on your page lets space it out, in the #middle { } tag in the CSS, we will pad it out, add the line

padding:40px 40px 40px 40px;

the structure for this is padding: top, right, bottom, left, and ive chosen for the text to pad in all around by 40 pixels (px), now lets modify the left a bit, and make it come down 25px,

padding:25px 0px 0px 0px;

and that goes in? #left { } tags of course

and do the same to the right,

and what youve done to the top can be applied to the rest of the tags, for more CSS modifications look at http://www.blooberry.com/indexdot/css/propindex/all.htm

Happy Experimenting

a link (and yes its ugly) Example

Pierce

Sign In

3col Html/css Page

Recommended Posts

Pierce

Link to post

Share on other sites

Browse

Activity