A CTIVITY CSS NAVIGATION 5 CREATING A HORIZONTAL

NETWORKERS AND THEIR ACTIVITY IN INTENSIONAL NETWORKS
OVERWEIGHT OBESITY AND LACK OF PHYSICAL ACTIVITY
3 INTERNATIONAL TELECOMMUNICATION UNION ‘JOINT COORDINATION ACTIVITY’

BARRIERS TO EFFECTIVE CLIMATE CHANGE ADAPTATION PRODUCTIVITY COMMISSION
Getting Practical Work Into the Teaching of Radioactivity
INTER INTERNATIONAL FEDERATION OF ADAPTED PHYSICAL ACTIVITY

HANDOUT TITLE:

A CTIVITY:

CSS NAVIGATION 5 - CREATING A HORIZONTAL MENU USING CSS AND LISTS

Unless you have already done so, create a new folder in your My Sites folder called My CSS Navigation.

Create an images folder in the My CSS Navigation folder. Copy into this folder the images contained within the zipped folder images for My CSS Navigation.

Create a new Dreamweaver site pointing to the My CSS Navigation folder. Give the Dreamweaver site an appropriate name.

Creating a Horizontal Menu using CSS and Lists

All the examples we have seen so far have dealt with vertical navigation – the kind of navigation that will most likely be found in a column to the left or right of a site’s main content area. However, site navigation is also commonly found as a horizontal menu close to the top of the document.

Solution

This type of menu can be created using styled lists in CSS. The li elements must be set to display inline so that each list item does not display on its own line.

A CTIVITY CSS NAVIGATION 5 CREATING A HORIZONTAL

Here is the HTML and CSS that creates this display.

The markup for listnav_horiz.html remains the same as listnav2.html. Open listnav2.html, save immediately as listnav_horiz.html and change the CSS link to listnav_horiz.css.

You can now either create a new CCS file which you will save as listnav_horiz.css, or open listnav2.css, save the file as listnav_horiz.css and edit it as follows:

body {

background-color: #ffffff;

color: #000000;

margin: 0;

padding: 1em;

font: 1em Arial, Helvetica, sans-serif;

}

#navigation {

font-size: 90%;

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

padding-top: 1em;

}

#navigation li {

display: inline;

}

#navigation a:link, #navigation a:visited {

padding: 0.4em 1em 0.4em 1em;

color: #FFFFFF;

background-color: #B51032;

text-decoration: none;

border: 1px solid #711515;

}

#navigation a:hover {

color: #FFFFFF;

background-color: #711515;

}

* html #navigation a {

width: 100%;

}

Discussion

To create the horizontal navigation, we start with a list that is identical to the one we created for our vertical list menu:

<div id="navigation">

<ul>

<li><a href = "#">Recipes</a></li>

<li><a href = "#">Contact Us</a></li>

<li><a href = "#">Articles</a></li>

<li><a href = "#">Buy Online</a></li>

</ul>

</div>

We style the #navigation container to apply some basic font information as we did with the vertical navigation. In a CSS layout, this ID would probably also contain some additional styles that determine the navigation’s position on the page:

#navigation {

font-size: 90%;

}

In styling the ul element, we remove the list bullets and default indentation applied to the list by the browser:

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

padding-top: 1em;

}

The property that transforms our list from a vertical to a horizontal display is applied to the li element.

#navigation li {

display: inline;

}

After we set the display property to inline, the list appears as shown below:

A CTIVITY CSS NAVIGATION 5 CREATING A HORIZONTAL

All that is left for us to do is to style the links for our navigation:

#navigation a:link, #navigation a:visited {

padding: 0.4em 1em 0.4em 1em;

color: #FFFFFF;

background-color: #B51032;

text-decoration: none;

border: 1px solid #711515;

}

#navigation a:hover {

color: #FFFFFF;

background-color: #711515;

}

Note: If you are creating boxes around each link, as we have here, remember that in order to make more space between the text and the edge of its container, you will need to add more left and right padding to the links. To create more space between the navigation items add left and right margins to the links.

526299.doc Version 2

Page 4 of 4

MAINACTIVITYJAVA PACKAGE COMHKPROGRAMMYDEMO211 IMPORT ANDROIDSUPPORTV7APPACTIONBARACTIVITY IMPORT ANDROIDOSBUNDLE IMPORT
PRODUCTIVITY COMMISSION NATIONAL WATER REFORM PUBLIC HEARING DR
SUBMISSION TO PRODUCTIVITY COMMISSION INQUIRY INTO THE ECONOMIC

Tags: creating a, are creating, ctivity, navigation, creating, horizontal