Classic Two Column Layout
In the previous tutorials, we have created a classic two-column layout with left-side navigation using CSS and a few types of HTML tags. In this tutorial, we will look at the actual HTML codes used so far and also take a quick glance at the CSS used.
All the content (text, images, Flash etc.) that the user sees when viewing a web page is marked up/coded with HTML in-between the <body> and </body> tags.
In this case we have this:
<body> <div id="navigation"> <h2>The Main navigation</h2> </div> <div id="centerDoc"> <h1>The Main Heading</h1> <p>
In the above code, we see that we have two main sections demarked by using <div> tags. These <div> tags are designed to create a ‘division’ in the document or to create something like a container. We have created two such containers and given each of them a unique ID:
<div id="navigation"> ... <div id= "centerDoc">
You will find that the entire contents of the page are contained in one of these two major page divisions. So the first question that demands reply, is what are the rules of ID’s in HTML pages and why do we use them and assign them to page elements like DIVs?
1. You can assign ID’s to any HTML tag. In that case, you can assign an ID to a <p> tag as well.
2. An ID in a page can be used just once. That is to say that no two elements should possess the same ID. ID’s are meant to uniquely identify a page element. So in the above example, there is only one page element with an ID of ‘navigation’ and only page element with an ID of ‘centerDoc’.
3. ID’s on HTML page elements (tags) are used just once in CSS. We can target ID’s in CSS code to change the appearance, behavior and even the position of that element by referencing the ID of that element.
4. Inside the <div> tags container, we are using header tags (<h1> and <h2>) to set the headers.
5. Finally, insert some text for <p> tags, to make up this simple page in-between them.
Now let us jump to CSS file that is attached to the HTML page. The CSS document is attached with the line of code in between the <head> </head> tags:
<head> <link href="myCSS.css" rel="stylesheet" type="text/css"> </head>
Like in a normal page link we have an ‘href’ attribute, all our CSS code will affect this page since it is linked to it.
So in the above link we name the CSS file name with this: ‘href=”myCSS.css”‘ and we tell the web browser that the link is to a CSS page with this attribute: ‘type=”text/css”‘. All that should be considered here is that the link point to a CSS file with the name: ‘myCSS.css’
So now that we got the style sheet linked to the document, lets look at some CSS codes. This first snippet of code ’styles’ the unique ID’s we were talking about before:
#navigation { position: absolute; width: 210px; height: 600px; margin: 0; margin-top: 0px; border-right: 1px solid #C6EC8C; font-weight: normal; } #centerDoc { position: absolute; padding: 0 0 20px 0; /*top right bottom left*/ margin-top: 50px; margin-left: 235px; }
In the above elements we have 2 selectors, one for each ID and each selectors are grouped/contained by using the curly brackets: {}. So here is the CSS selectors code with all their guts removed:
#navigation { /*Look ma no CSS rules! */ } #centerDoc { /*Look ma no CSS rules! */ }
I just inserted the text: ‘/*Look ma no CSS rules!*/’ to show you where the CSS code would normally be positioned. Now you can see that anything in between the curly brackets is part of one group or package that in CSS can generically be called a selector.
In the examples displayed above, you will find some text that appears before a curly bracket. This text gives a name to the selector. So here we have two selector names and thus two selectors: ‘#centerDoc’ and ‘#navigation’. Now the natural question would be why do we have the # symbol in front of the text? Why can’t we call it simply ‘centerDoc’ and ‘navigation’?
The answer to the above question is simple. Like HTML and programming certain text in certain places have special meaning that directs the system to do something in particular. In this case whenever you have that # symbol in front of a name of a CSS selector, it means that this selector is a special type of selector more commonly known as ‘ID’ selector. What is so special about an ID selector? This type of selector can only be applied to any one element at a time in the HTML page.
So those of you are aware of the computer, now see that there is a CSS ID selector for each of our HTML divs that in turn have an ID, and they have the same corresponding names. So the CSS selector #centerDoc applies to the div: ‘<div id=”centerDoc”>’. Whatever CSS rules/styles are required to code into ID selector will change what appears inside the corresponding div. So for the div with the ID of: ‘navigation’, following are the CSS rules:
#navigation { position: absolute; width: 210px; height: 600px; margin: 0; margin-top: 0px; border-right: 1px solid #C6EC8C; font-weight: normal; }
Remember that at the bottom we say all text will have a common font-weight of ‘normal’:
font-weight: normal;
We could instead easily have told that we want all the text to appear in the div (the div with the ID ‘navigation’) bold instead:
font-weight: bold;
Now lets return to the original fact. In our page the navigation div is sitting on the left and it has a border. It also has a nice light green 1-pixel border because that is what is set in CSS coding:
border-right: 1px solid #C6EC8C;
The best thing would be changing the color of the border and changing the pixel thickness of the border and view how it looks like.
Why is the navigation sitting on the left of the page while the ‘centerDoc’ is positioned to the right of it? Well first thing to be considered is this line in the navigation selector:
position: absolute;
This orders the browser to just place this div on the page as is.
Therefore, the real magic in this is the CSS code for centerDoc:
#centerDoc { position: absolute; padding: 0 0 20px 0; /*top right bottom left*/ margin-top: 50px; margin-left: 235x; }
The line:
padding: 0 0 20px 0; /*top right bottom left*/
This tells the browser to insert 20px (pixels) of padding to the bottom of the div with the ID ‘centerDoc’.
However, if you are confused with the word ‘padding’, then the dimple definition to it is - Space that is wrapped around our element (tag).
CSS has this special feature and concept of a box model that essentially is a box that wraps around the HTML elements. This box model comprises: padding, margins, borders and the actual content. This allows us to place a border around elements and space elements in relation to other elements.
From the inside out it is ordered like so:
content -> padding -> border -> margin
So in this case anything in between our <div> tags is basically the ‘content’. Right after that comes the padding. Then there is a border concept and finally a margin. Margin and padding may appear the same thing but if you think about it, you can see how you are being able to control the space before the border (padding) and after the border (margins) and how it can really affect your layouts.
In this example you notice that the navigation div sits higher up on the page than the centerDoc div. This is not because of the order in which they appear in the HTML, as they normally would without CSS, rather it is because of the margin settings I set for each selector; for centerDoc I set the top margin to 50px:
margin-top: 50px;
And for the navigation div I set it to:
margin-top: 0px;
The above declaration sets its top margin to 0 pixels so it will therefore be 50 pixels higher than the “centerDoc” div. A correct step would be to move the position of the navigation div under the center doc div in the HTML just to see if it changes anything. You will see that where the div appears in the actual HTML code has nothing to do with how it will appear to the user now that CSS positioning has been used.
Popularity: 55% [?]
Categories: CSS Tutorials, Posted on May 15, 2008 by Choppr | Login