Stylish Horizontal Navigation List

FIND A SOLUTION AT Academic Writers Bay

ITECH2003: Web Design
CRICOS Provider No. 00103D | RTO Code 4909 Page 1 of 13
Lab 05
More Complex CSS
This week’s lab exercises:
Stylish Horizontal Navigation List;
Breadcrumb Navigation;
Fast Rollover Menu Items;
Rollover Image Gallery;
Continue assignment 1 with the Content Inventory.
This tutorial exposes the student to more of the power of CSS. Pure CSS code is investigated via a series of exercises
that are designed to show the level of control CSS can assert over any styling issue associated with the creation of
The images required for the exercises can be found on Moodle and are contained in the Week 05 Lab Files zip file for
this week.
Exercise 1: Horizontal Navigation List
Before doing anything else, create an empty CSS file and a basic structure for an HTML file. Basic structure refers to the
structural tags such as <!DOCTYPE html>, <html>, <head>, and <body> tags.
Name your files wk5ex1.html and wk5ex1.css
Add the following unordered list inside a <nav> structural tag to your HTML file:
<li><a href=”#”><span>Home</span></a></li>
<li><a href=”#”><span>Me</span></a></li>
<li><a href=”#”><span>You</span></a></li>
<li><a href=”#”><span>The Others</span></a></li>
<li class=”last”><a href=”#”><span>And Them</span></a></li>
And while you are at it, also provide the code for your Style sheet:
<link rel=”stylesheet” type=”text/css” href=”wk5ex1.css” />
Test your code in the browser to make sure that you have a simple unordered list sitting on
your page that looks like this to the right:
ITECH2003: Web Design
CRICOS Provider No. 00103D | RTO Code 4909 Page 2 of 13
The next step is the styling; we will use the HTML5 <nav> tag as a CSS selector. The following CSS code will create
a horizontal navigation bar that is centred:
nav ul, nav ul li
list-style: none;
margin: 0;
padding: 0;nav ul
text-align: center;nav ul li
display: inline;
margin-right: .75em;nav ul li.last
margin-right: 0;The first attempt at making our list resulted in a bulleted, vertical display of the items in our list. When we use an
unordered list for something like a navigation bar the last thing we want are bullets! The way to remove the bullets is
simple; by setting the list-style to none (list-style: none;) we remove basically all default styles that are
associated with our list.
display: inline; causes the list to be displayed in a horizontal fashion rather than the vertical list you began
The use of “em”s keeps the design as fluid as possible.
Save your work and test in the browser.
If all went well you should see a very basic horizontal navigation section,
From this point it is really only cosmetics that are needed to make the navigation more appropriate for the website that
you want to create.
As you will see from the following exercises, there is not much to be changed to create an entirely different look.
Navigation area
To make the entire navigation bar more obvious and better-looking, add colour and a border, as follows (update the
CSS with a new style!):
nav RTO Code 4909 Page 3 of 13This is the “parent” selector if you like of the entire navigation CSS it is best to place the code at the beginning of your
CSS file.
Removal of underlines and colouring of link background
Because we know, and everyone else can see, that we are working with a navigation bar full of links, there really is no
reason to underline the categories. It would also be nice to separate the links with more than simply titles, so we will
add a different colour just to the categories. Since the above is related to the actual link area, we will add another
style to our sheet that deals with just that:
nav ul li a
background: #aaaaff;
background-repeat: no-repeat;
text-decoration: none;Font look and size
For navigation it really is NOT a good idea to have very large text, nor is the use of serif fonts. Add the following code
to the nav selector to remove the serif font from the navigation titles, and to reduce the font size to a more
appropriate size (notice how this is done via ems and not pixels!)
background: #c0c0ff;
border: 1px solid #858589;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;Save your changes and test in the browser. If nothing changed, check your code and fix any problems.
The titles on the navigation bar can do with a bit of space around them and so to achieve this we change the nav
selector to read:
background: #c0c0ff;
border: 1px solid #858589;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 5px;
font-size: 0.75em;Add the following code to the unordered list selector:
ITECH2003: Web Design
CRICOS Provider No. 00103D | RTO Code 4909 Page 4 of 13
nav ul
text-align: center;
padding: 3px;And add the following to the anchor selector:
nav ul li a
background: #aaaaff;
background-repeat: no-repeat;
padding: 5px 1em;
text-decoration: none;Save your changes and test in the browser. If nothing changed, check your code and fix any problems. At this point
your navigation bar should look a bit
If you want more of a tab like appearance, it is a simple matter to change the link colour to a suitable image. This is
how you go about it.
An example set of suitable tab-style images have been placed on Moodle in this week’s zip file “Week 05 Lab Files”.
Unzip the files and place them in a new folder called “images”. This folder should be in the same location your
HTML/CSS files are located.
Change the anchor selector code to read:
nav ul li a
color: #06C;
padding: 5px 0;
text-decoration: none;
background-image: url(images/right-tab.gif);
background-repeat: no-repeat;
background-position: 100% 0;Then add a new selector as shown on the next page:
ITECH2003: Web Design
CRICOS Provider No. 00103D | RTO Code 4909 Page 5 of 13
nav ul li a span
padding: 5px 1em;
background-image: url(images/left-tab.gif);
background-repeat: no-repeat;To make the tabs look like real tabs, without the bottom border, simply set the margin-bottom of the nav ul
selector to -1px as shown below:
nav ul
text-align: center;
margin-bottom: -1px;
padding-top: 3px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;Finally, add a new a:hover selector to create a nice effect:
nav ul li a:hover
color: red;Save your files and test.
You should now see this:
A usable and nice looking navigation bar, with a mouse over colour change.
Exercise 2: More Navigation – Breadcrumbs
Another type of navigation, that seems to be in “seasonal use” by designers, is the humble breadcrumb navigation. (Why
it goes out of fashion so frequently is anyone’s guess, but it keeps coming back!)
Often used on large websites, this is a “nicety” often appreciated by power users as it allows them to get to other areas of
the website without superfluous clicks.
Here is an exercise that creates such a breadcrumb “trail”:
ITECH2003: Web Design
CRICOS Provider No. 00103D | RTO Code 4909 Page 6 of 13
Once again, the breadcrumb navigation is CSS-based and it uses an unordered list as well as one background image
to help separate the links. The image (separator.gif) can be found in the files for this week’s lab.
Just like before create 2 files, one HTML with basic structure tags, one CSS and call them wk5ex2.html and
The HTML code (to place in the body) for the unordered list is:
<ul id=”bctrail”>
<li><a href=”#”>home</a></li>
<li><a href=”#”>me</a></li>
<li><a href=”#”>you</a></li>
<li><a href=”#”>the others</a></li>
<li>where you are now</li>
CSS is as follows:
ul, li
margin:0;/*selector breadcrumbs with a specific, relative, height */
height: 1.5em;/*list element styling*/
#bctrail li
float:left; /* float is used here to make all list elements appear on 1
line-height: 1.5em;
padding-left: 0.75em;
color:#858585; /*colour of the text *//*display: block makes the entire area clickable; the image will shape the area
as a series of arrows to the right of the link title; */
#bctrail li a
display: block;
padding: 0 15px 0 0;
background: url(images/separator.gif) no-repeat right center;/*making sure no underlining happens */
ITECH2003: Web Design
CRICOS Provider No. 00103D | RTO Code 4909 Page 7 of 13
#bctrail li a:link, #bctrail li a:visited
text-decoration: none;
color: #858585;/* text colour when the mouse hovers over the link */
#bctrail li a:hover, #bctrail li a:focus
color: #800080;To keep everything looking neat and tidy, it is best to keep control over the body element as well:
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
line-height: 150%;The end result, after having tested your code in the browser, should look a bit like this (depending on what you have
clicked on…)
Exercise 3: Fast (!) Roll-Overs without Preloading the Images
If you use images to indicate rollover states, server requests for these images happen
each time you hover over or click on a navigation link, or any other link, for that matter, if
there is behaviour attached to it.
With smartphones incredibly widespread it is important that the server requests are being
kept to an absolute minimum.
There is one way to help that process along, without having to return to an almost textbased interface. By combining the images necessary to create the visual changes to a
link, it becomes possible to make dynamic changes faster and without any preloading of
The way this is made possible is via the CSS negative positioning for “hover” and
“active” as seen in the code on the next page.
This code requires the button.gif in your images folder.
First view this image. All three states of the button are located in one image.
Enter the HTML code on the next page into wk5ex3.html:
<!DOCTYPE html>
<title>Fast rollovers, no preload needed – Example</title>
<link rel=”stylesheet” type=”text/css” href=”wk5ex3.css” />
ITECH2003: Web Design
CRICOS Provider No. 00103D | RTO Code 4909 Page 8 of 13
<a href=””>menu item 1</a>
<a href=””>menu item 2</a>
<a href=””>menu item 3</a>
<a href=””>menu item 4</a>
<a href=””>last one</a>
<hr />
And this is the CSS for the wk5ex3.css file:
nav a
margin: 1em 0; padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
background: url(“images/button.gif”) 0 0 no-repeat;
text-decoration: none;nav a:hover
background-position: -157px 0;
color: #E9BE75;nav a:active
background-position: -314px 0;
color:white;Save and test to make sure it looks like the example at the beginning of this exercise.
By setting the width to 120 pixels, only the first state of the image button is visible.
Using negative positioning for the mouse hover moves the second state into the visible area.
ITECH2003: Web Design
CRICOS Provider No. 00103D | RTO Code 4909 Page 9 of 13
Exercise 4: Rollover Gallery of Images
This exercise is designed to show you how an image gallery could be put together using one image for both the thumbnail
and the larger image.
You will be given the CSS code in its totality, but the HTML code needs to be extended to complete the matrix of 20
images shown in the example below. You will need to find images that can be resized to 200px wide 150px high, which is
the size of the images for this particular gallery. Should you wish to make the images larger, you will need to adjust the
CSS to reflect the new size.
The first few images are from the weeks lab files, and should be placed in the images folder.
First the partial HTML:
<!DOCTYPE html>
<meta charset=”utf-8″ />
<title>Image Gallery</title>
<link rel=”stylesheet” href=”wk5ex4.css” />
ITECH2003: Web Design
CRICOS Provider No. 00103D | RTO Code 4909 Page 10 of 13
<h1>Image Gallery based on Nathan’s Smith’s Hoverbox</h1>
<ul class=”hoverbox”>
<a href=”#”><img src=”images/photo01.jpg” alt=”Kuala Lumpur Airport”
/><img src=”images/photo01.jpg” alt=”Kuala Lumpur Airport” class=”preview” /></a>
<a href=”#”><img src=”images/photo02.jpg” alt=”UB Library” /><img
src=”images/photo02.jpg” alt=”UB Library” class=”preview” /></a>
<a href=”#”><img src=”images/photo03.jpg” alt=”Huntsman spider” /><img
src=”images/photo03.jpg” alt=”Huntsman spider” class=”preview” /></a>
<a href=”#”><img src=”images/photo04.jpg” alt=”Eucalyptus flower” /><img
src=”images/photo04.jpg” alt=”Eucalyptus flower” class=”preview” /></a>
<a href=”#”><img src=”images/photo05.jpg” alt=”Agapanthus” /><img
src=”images/photo05.jpg” alt=”Agapanthus” class=”preview” /></a>
<!– keep adding more –>
The complete CSS:
border: 0;
margin: 0;
padding: 0;
atext-decoration: none;body
background: #fff;
color: #777;
margin: 0 auto;
padding: 50px;
position: relative;
width: 620px;h1 RTO Code 4909 Page 11 of 13
background: inherit;
border-bottom: 1px dashed #ccc;
color: #933;
font: 17px Georgia, serif;
margin: 0 0 10px;
padding: 0 0 5px;
text-align: center;
pclear: both;
font: 10px Verdana, sans-serif;
padding: 10px 0;
text-align: center;p a
background: inherit;
color: #777;p a:hover
background: inherit;
color: #000;/* —————-Hoverbox Code—————*/
cursor: default;
list-style: none;
hoverbox a
cursor: default;
hoverbox a .preview
display: none;
hoverbox a:hover .preview
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
hoverbox img RTO Code 4909 Page 12 of 13
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
hoverbox li
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
hoverbox .preview
border-color: #000;
width: 200px;
height: 150px;Try and understand the CSS code and place a comment /* like this */ next to each of the selectors with a
short explanation of what the code does.
By understanding how this gallery has been put together it will be easier for you to implement something similar,
regardless of the way you wish to display the gallery. Example:
o 2 rows of 5 images,
o 5 rows of 3 images,
o 10 rows of 2 images,
o Etc.
Extend the gallery to complete the matrix of 20 images shown in the example at the beginning of this exercise. You
will need to find images that can be resized to 200px wide 150px high
This concludes the CSS exercises.
On the next page is an exercise that will help you with Assignment 1.
ITECH2003: Web Design
CRICOS Provider No. 00103D | RTO Code 4909 Page 13 of 13
Exercise 5: Content Inventory for Assignment 1
This exercise is designed to help you continue your Design Document assignment that is due on Friday of Week 7. Today
you will focus on the Content Inventory which begins section 2 of the design document. The Content Inventory was
described back in Lecture 2.
As it indicates on the assignment specifications, the content inventory is a simple list of all the content and their types
needed for each web page in your website. Each page will contain a number of contents and their labels (based on the
assignment specifications), categorised to one of your eight webpages.
Begin by reading the Website Overall requirements section from “Assignment 1 Design Document” file in the
Assessment section on Moodle, in particular the content requirements needed for each web page on your website, then
continue with your Design Document you have been writing.
3.1. Content Inventory
Below is a small but clear example of a start to a content inventory for a personal website
Note, this is just an example! You should not write “Etc…” yours should include ALL of your content requirements
for any content that is global to the entire website, and any content specific to one of the eight webpages.
Remember that the home and contact page have very specific requirements, and the other six pages of your own
choice have a few particular requirements, but overall must relate to the website’s purpose.
Content Type
All Pages (Global)
Website title/banner
JPG Image
My face picture used as a Logo
Copyright information in footer
Links to pages: Home, Contact, etc, etc, etc…
Short blurb about myself
Labels for form elements: Name, Email, Message
Once you have your content inventory completed, you should start collecting all of the content from this content
inventory. You will need it for Raw Data as described in Lecture 2. This raw data will be ready to use and rework for the
website you will build in Assignment 2: Website Development. There should be no excuses about not being able to
obtain images or data for your website when you have known all semester about the assignments.
In next week’s Lab you will need your completed content inventory so you have a clear idea of the content needed for
each wireframe. You may also want to gather some of the actual content so you can work on your Mock-up.
For all assignment work you should make the most of your tutors while they are present in the lab class with you, and
show them your progress as well as see if they have any suggestions. Remember they cannot do the work for you, but
they can give you advice or refer you to online material that could help you.

READ ALSO...   G310 Advanced Analytics and Statistics
Order from Academic Writers Bay
Best Custom Essay Writing Services