Scribd
Upload
81 views

CSS Layout Exercise

Uploaded by

Franz Erick Frondozo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
81 views

CSS Layout Exercise

Uploaded by

Franz Erick Frondozo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

L1 WEB DESIGN

EXERCISE

CSS layout exercise


For this exercise, use your results from the Simple CSS exercise. If you didn’t complete that
exercise, use the files inside the Exercise resources > Simple CSS exercise folder.
At each stage of this exercise, preview your work in a browser.
At the start of this exercise, you should have a page
containing text and an image, marked up with XHTML tags
and with colours specified in a CSS style sheet. Your HTML
page should look something like this (see right):
In this exercise, you will add CSS layout, to make the layout
of your page look like this:
<div id="container">
<div id="header">

<div <div id="main">


id="menu">

<div id="footer">

Add div tags


First, you need to add div tags to your HTML page, to mark out each section of the page.
1 Open your HTML page.
2 Place a div called header (or something similar) around the h1 and h2 tags at the top of
the page.
3 Place a div called menu (or something similar) around the menu list. Make sure the div
surrounds the ul tags, as well as the list items.
4 Place a div called main (or something similar) around all the main content, from
underneath the menu div, right down to the last paragraph: Call us on…
5 Place a div called footer (or something similar) around the last paragraph:
Call us on 01 234 5678 or email us.

Add a container div


Add one last div tag, surrounding everything inside the body tag. Call it container (or
something similar). You will use this div to restrict the width of the content, and to make it
sit in the middle of the page.

Add HTML comments


Although you won’t yet notice any difference in the display of your page, you will have
extra code on the page, some of which can be confusing.
• Add HTML comments to your HTML code, to indicate where the sections of the page
begin and end. For example:
–

Copyright © 2010 Natcoll DIGITAL TECHNOLOGIES TEACHER RESOURCES: LEVEL 1: CSS LAYOUT EXERCISE 1
L1 WEB DESIGN
EXERCISE
Create the container style
1 Open your CSS file.
2 Create a new id style for your container div.
3 Set its width to 750 pixels wide.
4 Set the left and right margins to auto. This will make the container sit in the middle of
the browser window.
Other optional settings
• You could change the background colour of the container. In the example (screenshot
at the end of this exercise), this has been set to white.
• You could run a border down the left and right hand sides of the container.
• If you do either of these things, you will also need to add some padding to the
container, so the content does not sit hard up against the edges of the container.

Create the menu styles


1 Create a new id style for your menu div.
2 Set the width of this div to 170 pixels.
3 Set this div to float left. When you save and preview your page, you will see the menu
sitting on the left hand side of the rest of the content.
4 Make a new style to target the ul tag inside the menu div:
–
5 Set the padding and margin to 0 pixels and change the list style type to none, (which will
take the bullet points off the list:
–
6 To make the menu links look more like buttons, target the li tag inside the menu div:
–
7 Give this style a background colour, a border on all edges and a few pixels padding.
8 To separate the buttons, add a few pixels of top and bottom margin to this style.
9 So that it is only the menu buttons that take on the already established link styles, add
to the front of the a:link, a:visited, a:hover and a:active styles:
–
Now when you preview the page, you should see that the links in the main part of the page
and the footer have gone back to their default blue/purple colour.

Create the main section styles


1 Create a new style for your main div.
2 To stop the main text wrapping underneath your menu, set its left margin to 190 pixels:
–
3 So that it is only the paragraph tags in the main section that take on your already
established style, add to the front of the p style:
–
4 Do the same for the h3 style.
5 Create new styles for #main a:link, #main a:visited, #main a:hover and #main a:active.

2 DIGITAL TECHNOLOGIES TEACHER RESOURCES: LEVEL 1: CSS LAYOUT EXERCISE Copyright © 2010 Natcoll
L1 WEB DESIGN
EXERCISE
Create the footer section styles
1 Create a new id style for your footer div.
2 Give it a background colour and add a little bit of top margin, so that the main content
does not sit hard up against the top of the footer:
–
3 In case you have any pages where the main content is shorter than the menu, you need
to add a clear property to the footer; this will always make the footer sit underneath any
floated sections (including the floated image):
–
4 Create a new style which targets the p tag inside the footer div.
5 Change the size and the colour. You might also want to align the text to the centre:
–
6 So you can get the text to sit in the vertical centre of the footer, set the margins to 0,
then add some padding at the top and bottom:
–
–
–
7 Create new styles for #footer a:link, #footer a:visited, #footer a:hover and #footer a:active.

Add CSS comments


Tidy up your CSS file:
1 Move some of the styles so they sit in logical groups and they make sense to you.
2 Add CSS comments to your code, to indicate where the sections of the styles begin and
end. For example:
–
3 You can also add some comments to individual lines if it will help you remember
which bit of code does what:
–

Copyright © 2010 Natcoll DIGITAL TECHNOLOGIES TEACHER RESOURCES: LEVEL 1: CSS LAYOUT EXERCISE 3
L1 WEB DESIGN
EXERCISE
Your finished page should look something like this when you preview it in a browser:

Extensions
If you have extra time for this exercise, try the following:
• Replace heading 1 with a text heading image you create in your image manipulation
software.
• Use this initial page as a template for more pages in the same site. Save the page with
one of the names you have already put into the menu, then find some appropriate text
online to copy and paste (or invent some text), and find a public domain or Creative
Commons licensed image to use to replace the tiger picture.
• Add a background image to the body tag style.

4 DIGITAL TECHNOLOGIES TEACHER RESOURCES: LEVEL 1: CSS LAYOUT EXERCISE Copyright © 2010 Natcoll

You might also like