Wednesday 08th of September 2010 06:46:22 AM
Link 1 | Link 2 | Link 3 | Link 4

Left Column

The left col can be used for navigation links, search box etc.



View more templates.

Two Column - Left Column Static with Header Bar

Ver 2.3

The left column is absolutly positioned and is a fixed width. It won't move.

The header row and content column, which you are reading from, are flexible. They will automatically change shape, width can be controlled by setting appropriate margins or an actual width can be specified if required.

This template has been tested in:

Changes in this version:

  1. Defined zero for the body to fix a problem in Opera.

where you're going to position an element, you will want to go ahead and declare how wide and how high that element should be. In addition, there will likely be conditions where you'll want to limit how high or wide a positioned element gets, not to mention cases where you want the browser to go ahead and automatically calculate the width, or the height, or both.

9.1.3.1. Setting width and height

If you want to give your positioned element a specific width, then

Filler Content

Dáig alta in mac sin i tig a athar & a mathar icon airdig i m-Maig Muirthemne, ocus adfeta dó scéla na maccaemi i n-Emain. Dáig is amlaid domeill Conchobar in rigi, o ro gab rígi in rí, .i. mar atraig fóchetóir césta & cangni in choicid d'ordugud. In lá do raind i trí asa athlil: cetna trian de fóchetóir ic fegad na maccaem ic imbirt chless cluchi & immanae, in trian tanaise dond ló ic imbirt brandub & fidchell, & in trian dedenach ic tochathim bíd & lenna, con-dageib cotlud for cách, aes cíuil & airfitid dia thalgud fri sodain. Ciataim ane ar longais riam reme dabiur bréthir, ar Fergus, na fuil in hErind no i n-Albain óclach macsamla Conchobair.

Ocus adfeta don mac sin scéla na maceáem & na maccraide i n-Emain, & radis in mac bec ria mathair ar co n-digsed dá chluchi do chluchemaig na Emna. Romoch duitsiu sain a meic bic, ar a mathair, co n-deoch anruth do anrothaib. Ulad lett no choimthecht ecin do chaimthechtaib Conchobair, do chor th' aesma & t'imdegla for in maccraid. Cían lim-sa di sodain a mathair, ar in mac bec, & ni biu-sa oca idnaide acht tecoisc-siu dam-sa cia airm itá Emain. Is cían uait, ar a mathair, airm in-das-fil. Sliab Fúait etrut & Emain. Dobér-sa ardmes furri amne, ar esium.

position keywords, they can appear in any order, so long as there are no more than two of them, one for the horizontal and the other for the vertical.

Figure 6-37

Figure 6-37. Placing the background image in the top right corner of the browser window

If only one keyword appears, then the other is assumed to be center. Table 6-1 shows equivalent keyword statements.

Table 6-1. Position Keyword Equivalents

Now that this is all done, we need to link the style sheet into thesite's pages. The above declarations are collected into asingle file, which is saved to a file with the URL http://www.mycomp.com/style/site.css. Thenall of the site's pages are modified so that theirHEAD element contains the following:

<LINK REL="stylesheet" TYPE="text/css"HREF="http://www.mycomp.com/style/site.css">

This ensures that all documents -- even those without their ownstyle declarations -- will use the site's overall stylered, then the entire background will be the same shade of red. This is no different than what's been possible in HTML up until now, of course. When you declare <BODY LINK="blue" VLINK="blue">, you probably expect that all hyperlinks will be the same shade of blue, no matter where they are in the document.

Well, don't change that thinking when you're using CSS. If you use CSS to set the color of all hyperlinks (both visited and