CSS layout lesson

For the next 2 weeks we learn about CSS properties that allow us to layout content into columns and to images and text.

Week 1

Week 2

Position property - static, relative, absolute, fixed

During the course of the demonstration I created 4 files, each file has a different position assigned to the third paragraph.

Static - The default position for the paragraph element is to display as "static" Here is what the static position looks like, the paragraphs stack one on top of the other.

Relative - a relative value moves the element relative to its original position. If paragraph 3 was originally stacked below paragraph 2 and above paragraph 4, that will still be the case when a value of "relative" is assigned. the values of 30 top and 2 left will move the paragraph relative to it's postion in the static example. relative position page

CSS code -
p.specialpara {position:relative; top:30px; left:20px; border:2px dashed blue;}

Absolute - this positioning takes the element completely out of the original flow or stacking order of the page. The positioning context of "absolute" is the "body" tag. The element which is assigned an absolute position will move when the body tag moves, so absolute elements will disappear as you scroll down the page absolute positioning page

CSS code
p.specialpara {position:absolute; top:30px; left:20px; border:2px dashed blue;}

Fixed position - the fixed position is not covered in your textbook but you may want to use the code and learn this concept. When the position property is fixed, the element is taken out of the flow of the page and the values are applied to the window so as page scrolls the element will remain in the same place. fixed position page

CSS code
p.specialpara {position:fixed; top:30px; left:20px; border:2px dashed blue;}

Float property

 

In this demonstration we will arrange text and images so they appear side by side. Sample page with image on the left and text on the right

CSS code
img {float:left; margin:0 10px 10px 0;}
p {line-height:140%;}

I also created a sample that has the text flowing down in a column instead of wrapping under the image. Sample page with image on the left and text in a column on the right

CSS code
img {float:left; margin:0 10px 10px 0;}
p {line-height:140%; float:left; width:300px; margin:0px;}

Clear a Float

When I have a short paragraph of text the third image bumps into the second image. to force the browser to add blank space and display the third image below the second, I use the float clear property.

Sample page with 3 images, 3 paragraphs of text, and float and clear properties.

CSS code
img {float:left; margin:0 10px 10px 0;}
p {line-height:140%; margin:0 0 10px 0;}
.clearthefloats {clear:both; padding-top:10px;}

Please note, I have used clear:both, you could also enter clear:left for the same effect.

Overview of 2 column layout features

Now lets start creating code.

2 column layout :: create wire frame pages

The first wire frame shows 2 columns side by side. Sample wire frame page

HTML code
<div id="wrapper">
<div id="leftcolumn">
<p>I will put navigation here</p>
</div>
<div id="rightcolumn">
<div id="header">
<p>my header goes here</p>
</div>
<div id="content">
<p>lots of fascinating content</p>
</div>
<div id="footer">
<p>an informational footer<p>
</div>
</div>
</div>

The second layout has the header stretching over the 2 columns with navigation in the left column and content and the footer in the right column. Sample wire frame page

<div id="wrapper">
<div id="header">
<p>my header goes here</p>
</div>
<div id="leftcolumn">
<p>I will put navigation here</p>
</div>
<div id="rightcolumn">
<div id="content">
<p>lots of fascinating content</p>
</div>
<div id="footer">
<p>an informational footer<p>
</div>
</div>
</div>

The same external CSS file controls both layouts.The reason the layout is different is the order of the div tags and the way they are nested inside each other. External CSS file

#wrapper {margin:0 auto; width:80%; background:#cccc99;}
#leftcolumn {float:left; width:150px; }
#rightcolumn {margin-left:150px; background:#fff;}

Adding Content to the wire frame pages

I open up my index.html page and transfer the content from that page to the wire frame template. I do this for both 2 column layouts. Select one of the layouts for your permanent home page. Save the other layout as a sample page.

Garden site home page in a 2 columns side by side layout

Garden site home page in a 2 column layout with header stretching across 2 columns

External CSS file that is controlling both layouts

Hyperlinks in an unordered list

up until now our links have just been floating inside of a paragraph tag. Now we add unordered list code to allow them to display within a list. I begin by adding this code to the 2 column side by side layout.

Garden site with 2 columns side by side layout / links in a list.

Garden site with header stretching across 2 columns / links in a list

External CSS file that is controlling both layouts

HTML code
<div id="leftcolumn">
<ul>
<li> <a href="family.html">family</a> </li>
<li> <a href="perennials/perennials.html">perennials</a></li>
<li> <a href="shrubs/shrubs.html">shrubs</a></li>
<li> <a href="trees/trees.html">trees</a></li>
<li> <a href="succulents/succulents.html">succulents</a></li>
<li> <a href="links.html">links</a></li>
<li> <a href="contact.html">contact</a></li>
</ul>
</div>

I also need to modify the CSS file

#leftcolumn {float:left; width:150px; }
#leftcolumn ul {list-style-type:none;}
#leftcolumn a {text-decoration:none;}
#rightcolumn {margin-left:150px; background:#fff;}

Horizontal Navigation in an unordered list

In this example I moved the unordered list of links to the header area and surrounded the list with a div tag with an ID of "nav".

<div id="header">
<h1>Linda's Garden</h1>
<h2>Relax and Enjoy....</h2>

<div id="nav"><ul>
<li> <a href="family.html">family</a> </li>
<li> <a href="perennials/perennials.html">perennials</a></li>
<li> <a href="shrubs/shrubs.html">shrubs</a></li>
<li> <a href="trees/trees.html">trees</a></li>
<li> <a href="succulents/succulents.html">succulents</a></li>
<li> <a href="links.html">links</a></li>
<li> <a href="contact.html">contact</a></li>
</ul>
</div>

I also modified the CSS to include this code, by assigning a property of display and a value of inline, the links will be shown next to each other, instead of stacked on top of each other.

#nav ul {list-style-type:none;}
#nav li {display:inline;}
#nav a {text-decoration:none; padding-right:10px;}

Here is the sample HTML page

Here is the CSS file

CSS interactivity with pseudo classes

Garden site with 2 columns side by side layout / pseudo class values

Garden site with header stretching across 2 columns / pseudo class

External CSS file that is controlling both layouts

To achieve the interactivity, I simply add more CSS that allows the links to change when I hover or when I have visited the page. I only need to alter the CSS, the HTML stays the same.

#leftcolumn a {text-decoration:none; padding:10px; font-weight:bold:}
#leftcolumn a:link {color:red;}
#leftcolumn a:hover {color:blue; text-decoration:underline;}
#leftcolumn a:visited {color:purple;}
#rightcolumn {margin-left:150px; background:#fff;}

Practice with a 2 column layout :: navigation on the right

In this example I am only working with one of the 2 columns layouts:
the 2 column layout that has a header that stretches across 2 columns.

External CSS file that controls the layout

In this example I modified the HTML so the #leftcolumn ID was changed to #nav, the #rightcolumn div was removed, and the footer div is now by itself.

revised CSS
#wrapper {margin:0 auto; width:80%; background:#cccc99;}
#header {background:url(images/iris.gif) no-repeat; padding-left:100px; height:110px;}
#nav {float:right; width:150px; }
#nav ul {list-style-type:none;}
#nav a {text-decoration:none;}
#content {margin-right:150px; background:#fff; padding:10px; }
#footer {padding:10px;}

Optional lesson, using CSS to create the look of buttons

This code is not covered in our textbook but it may be of interest for some of you. I used the 2 column layout with a header that spans 2 columns. I have added CSS that modifies the list items so they appear as blocks, I add CSS to make the background color change when I hover.

#nav {float:left; width:150px; }

#nav ul {list-style-type:none; padding:0px;}

#nav li {padding:10px; background:#999966; margin:1px;}

#nav li:hover {background:#999;}

#nav a:link {text-decoration:none; color:#fff;}

#nav a:hover {text-decoration:underline; color:#000;}

#nav a:visited {color:#0f0; }

Here is the HTML page with button like links

Here is the external CSS file that controls the page

Homework: Week 1

  1. Create 4 pages which each display one of the position properties: static, relative, absolute, fixed. [10pts]
  2. Create a web page with 3 images & 3 paragraphs of text. Make one of the paragraphs very small. Use the float and clear properties to ensure that the images and text stack on top of each other. [10 pts]
  3. Create 2 wire frame patterns: [10pts]
    2 columns side by side
    A header that stretches across 2 columns

Homework: Week 2

  1. Add the content of your home page to both of the wire frame templates you created last week. [10pts]
  2. Select one of these styles to be the design of your website. Place the content of all your pages into this model. Place the links into an unordered list, add the following CSS code:
    a. format the list in either a horizontal or vertical block
    b. add pseudo class interactivity
    c. modify CSS with padding, margin, background images and color as needed
    d. if you would like to try and create the look of buttons - go for it!! [20 pts]
  3. Create one sample page that has the navigation on the right. [5pts]
  4. Sample page with horizontal navigation (if you final website design has horizontal navigation make a vertical navigation sample page) [5pts]

Website designed by Bartosz Brzezinski
Content developed by Linda Hemenway - lhemenway@santarosa.edu