Al's TAFE Certificate IV I.T. (Website Design) Exercises
Cascading Style Sheets 3
Tables are the traditional method for laying out web pages. In fact most pages on the web use tables for structuring the page. But now there is a viable alternative to tables. CSS boxes allow you to layout pages also, but with some key advantages that make boxes a great alternative, particularly as there is now wider browser support for using CSS in this way.
A few concepts we need to cover first. In CSS talk boxes are created using the <div> tag, and divs are known as block level elements, like paragraphs etc.
Page Flow
Web page elements are controlled by a kind of flow. Meaning that if you put a number of elements on a web page they will flow from left to right, filling across the page and then when the row is full they will move to the next position under the first object and fill that row with another object, and so on. Try the following code for a good example of this simple principle:-XHTML
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</body>CSS
body {
margin: 0px;
padding: 0px;
color: #000;
background-color: #ccc;
}
.box {
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
}
Click here to see my sample. Notice how the boxes fill each across row.Now try adding some text in between the boxes and reducing the width of the boxes also to see what happens:-
XHTML
<body>
<div class="box">1</div>
The quick brown fox jumped over the lazy dog.
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</body>CSS
.box {
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Click here to see my sample.Relative Positioning
Relative positioning allows us to be more specific about where our box will sit. We can specify a relative position for one of our boxes to see what difference that makes. The box will now be moved relative to where it would have been by default, but the space it leaves behind is preserved, so that everything else on the page flows as if the offset box were still in its original position. In other words they don’t see it moved, they see where it should have been by default without the relative positioning applied to it. Here is an example for you to try now: -XHTML
<body>
<div class="different">1</div>
<div class="box">2</div>
<div class=" box">3</div>
<div class=" box">4</div>CSS
.different {
position: relative;
top: 25px;
right: 25px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.box {
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}Click here to see my sample. Test this in a browser and try to work out what the relative positioning is telling the box to do.
Now try the same XHTML with this CSS:-
CSS
different {
position: relative;
bottom: 25px;
left: 25px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.box {
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}Click here to see my sample. Test in a browser and try to work out what is happening now.
Absolute Positioning
Absolute positioning is different to Relative. With absolute the box, (<div>) it is removed completely from the document flow, which means that other elements around it behave as if it is gone, or not there at all. It is positioned relative to the containing block it is in, which is usually the XHTML page, but not relative to its old position ( as was the case with relative positioning). Try this example, using the same XHTML as before: -CSS
different {
position: absolute;
top: 25px;
right: 25px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.box {
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Click here to see my sample.Now try with the following CSS and try to work out what difference the positioning is making here.
CSS
.different {
position: absolute;
bottom: 25px;
left: 25px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.box {
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
Click here to see my sample.Fixed Position
Fixed position is also a kind of absolute positioning, but the containing block is now the viewport or window, not the <html> meaning that as you scroll the <div> stays fixed in position. Try this example:-XHTML
<div class="different">1</div>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Li Europan lingues es membres del sam familie.Lor separat existentie es un myth.Por scientie,musica,sport etc.,li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,li pronunciation e li plu commun vocabules.Omnicos directe al desirabilitá de un nov lingua franca:on refusa continuar payar custosi traductores.It solmen va esser necessi far uniform grammatica,pronunciation e plu sommun paroles.</p>
<p>Ma quande lingues coalesce,li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.It va esser tam simplic quam Occidental:in fact,it va esser Occidental.A un Angleso it va semblar un simplificat Angles,quam un skeptic Cambridge amico dit me que Occidental es.</p>The three paragraphs of Lorem Ipsum can be created easily in Dreamweaver and they provide some padding text so the effect here is more obvious.
Here is the CSS you need. (A big margin has been added to the paragraphs so they clear the <div> easily, as they can’t see it because it has been removed from the document flow):-CSS
p {
margin-left: 30%;
}
.different {
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}Click here to see my sample. View this in a browser but make the page short in length then scroll and you should see the result.
Float
Floating elements allows you to wrap text around it quite nicely. The floated elements are taken out of normal flow, but they can still be see by other elements which means they respond to the floated element. Try this code example: -XHTML
<div class="box">1</div>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi
enim ad minim veniam,quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat,vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.</p>CSS
.box {
float: left;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
p {
margin: 5px;
padding: 10px;
}
Click here to see my sample.Now try the same but this time using the clear property to see the difference it makes:
CSS
.box {
float: left;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
p {
clear: left;
margin: 5px;
padding: 10px;
}
Click here to see my sample.Now try the following example using clear on several boxes to see how it differs from the very first example we did in this lesson on page one with four divs.
XHTML
<body>
<div class="box">1</div>
<div class=" box">2</div>
<div class=" box">3</div>
<div class=" box">4</div>
</body>CSS
. box {
float: left;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 15%;
}
Click here to see my sample.Now try it with a float right:-
CSS
.box {
float: right;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 15%;
}Click here to see my sample. The CSS specification requires that all floated boxes have a specified width stated. In other words you must use a width on them.
Z Index
When boxes (divs) overlap the property known as z-index allows you to specify the stacking order. In other words which elements will sit on top and which will be behind and so on. The higher the z-index number the closer the object will appear to you, and therefore closer to the top of the stack. Try the following examples to see how this looks and works:-XHTML
<body>
<div class="one">1</div>
<div class=" two">2</div>
<div class=" three">3</div>
<div class=" four">4</div>
</body>CSS
.one {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.two {
position: absolute;
top: 40px;
left: 40px;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
.three {
position: absolute;
top: 70px;
left: 70px;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.four {
position: absolute;
top: 100px;
left: 100px;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
Click here to see my sample.Now see what happens when we add z-indexes to the same boxes above:-
CSS
.one {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.two {
position: absolute;
top: 40px;
left: 40px;
z-index: 3;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
.three {
position: absolute;
top: 70px;
left: 70px;
z-index: 2;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.four {
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
Click here to see my sample.Try the following to see what a very high index will do if added to one of the boxes:-
CSS
.one {
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.two {
position: absolute;
top: 40px;
left: 40px;
z-index: 300;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
.three {
position: absolute;
top: 70px;
left: 70px;
z-index: 2;
padding: 10px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.four {
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
width: 20%;
}
Click here to see my sample.Boxes for Layout
Now we will try using some of these boxes for page layout and see that boxes <divs> are a very successful alternative to tables as a tool for page design. Try shrinking and expanding your window to see how flexible and adaptable the boxes are!!! Try each example to compare the results. Each one offers a slightly different layout approach which can then be modified and adjusted to achieve results to meet your specific needs.
Simple centred box
XHTML
<div id="content">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</body>CSS
body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #000;
background-color: #ccc;
}
#content {
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
border: 1px solid #000;
width: 70%;
}
Click here to see my sample.Two boxed rows
XHTML
<body>
<div id="content">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="content2">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</body>CSS
body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: black;
background-color: #ccc;
}
#content {
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
border: 1px solid #000;
width: 70%;
}
#content2 {
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
border: 1px solid #000;
width: 70%;
}
Click here to see my sample.Two Column Layout
XHTML
<div id="menu">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="content">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>CSS
body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #000;
background-color: #ccc;
}
#content {
padding: 10px;
margin: 5px 122px 5px 5px;
background-color: #fff;
border: 1px solid #000;
}
#menu {
position: absolute;
top: 0px;
right: 0px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 90px;
}
Click here to see my sample.Two Columns using Percentages for Layout
XHTML
<body>
<div id="menu">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="content">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</body>CSS
body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #000;
background-color: #ccc;
}
#content {
padding: 10px 2% 10px 2%;
margin: 5px 26% 5px 2%;
background-color: #fff;
border: 1px solid #000;
}
#menu {
position: absolute;
top: 0px;
right: 0px;
padding: 10px 2% 10px 2%;
margin: 5px 2% 5px 1%;
background-color: #fff;
border: 1px solid #000;
width: 18%;
}
Click here to see my sample.Three Column Layout
XHTML
<div id="left">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="middle">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<div id="right">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>CSS
body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #000;
background-color: #ccc;
}
#left {
position: absolute;
top: 0px;
left: 0px;
margin: 5px;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 90px;
}
#middle {
margin: 5px 122px 5px 122px;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
}
#right {
position: absolute;
top: 0px;
right: 0px;
margin: 5px;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 90px;
}
Click here to see my sample.Nested Boxes
Boxes can also nest within one another to achieve some very nice formatting results as in this example below:-XHTML
<body>
<div id="content">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div class="innerBox">
Ut wisi enim ad minim veniam,quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</body>CSS
body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: black;
background-color: #ccc;
}
.innerBox {
padding: 10px;
margin: 10px 0px 5px 0px;
border: 1px solid #000;
}
#content {
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
border: 1px solid #000;
width: 70%;
}
Click here to see my sample.Switching Off the Borders to improve appearance
The final step is to remove some of those borders to get the whole layout looking a bit more stylish and less boxy. Here is an example of what I mean:-XHTML
<body>
<div id="top">
<h1>Lorem ipsum</h1>
</div>
<div id="content">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<div id="sidebar">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod
</div>
</body>CSS
body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #000;
background-color: #fff;
}
#top {
margin: 5px 15px 0px 15px;
padding: 10px 10px 10px 0px;
color: #ccc;
border-bottom: 1px solid #ccc;
height: 25px;
}
#content {
margin: 0px 122px 0px 5px;
padding: 20px 10px 20px 10px;
}
#sidebar {
position: absolute;
top: 75px;
right: 0px;
margin: 0px 0px 5px 0px;
padding: 0px 10px 10px 15px;
width: 90px;
border-left: 1px solid #ccc;
}
Click here to see my sample.
