ACTIVITY:
LISTS, MENUS AND NAVIGATION BARS
The list is a very simple but essential tool for organizing data and it is incredibly useful for the web designer – think of bookmarks, blogrolls, link lists, site maps, file lists etc. View the source of any web site built using web standards and you are almost guaranteed to see a list for the navigation, a list for the external links andprobably a list for any buttons or arrays of data.
Utilizing the humble list at an early stage of aweb site project ensures the design will remain flexible, functional and degrade well in anyviewing scenario.
We will look at the basic markup for lists and assess the differentkind of lists that HTML provides - particularly unordered and ordered lists. You will apply IDand classes to lists to attain greater control - before taking things a bit further with nested listscontrolled first with IDs and classes and then manipulated using more complex CSS formatting.
Why Use Lists?
A list of items can be created in numerous ways using HTML although not all are semanticallycorrect. The lazier methods include adding a <br /> tag after each item, or treating eachitem as a paragraph. The correct approach is to use an ordered or unordered list element, usingsimple <li> tags to open each item.
The major benefit of this approach is that your list will be displayed as a numbered orbulleted list without CSS and is considerably easier to control with CSS. Using semanticallycorrect list markup also makes it easy to single out items within a list and also makes nestedlists easier to manage.
- Create a new folder in your My Sites folder called Lists, Menus and Navigation Bars.
- Create an images folder in the Lists, Menus and Navigation Bars folder. Copy into this folder the images contained within the images for Lists, Menus and Navigation Bars zipped folder.
- Create a new Dreamweaver site pointing to the Lists, Menus and Navigation Bars folder. Give the Dreamweaver site an appropriate name.
The Unordered List
- Open a new HTML file, and enter the following code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A List Template</title>
</head>
<body>
<div id="container">
<ul>
<li>Drinks Menu</li>
<li>Beer</li>
<li>Spirits</li>
<li>Cola</li>
<li>Lemonade</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
</div>
</body>
</html>
Notice that the unorderedlist is placed inside a container, which will act as a hook for more CSS later.
- Save your HTML file as lists.html.
- View the web page in a browser.
You now have an unordered list of the most basic kind. The only styling is that inherited from the parent elements - and in this case that isnone at all.
Note: This list features an initial list item Drinks menu. Semantically speaking, this would be better as a heading such as <h3>Drinks menu</h3>, but for the purposes of these exercises, it is declared as a listitem so that you can see how it can be treated differently. This approach will make more sense when we lookat nested lists later.
Basic List CSS
Before moving on to anything particularly clever, let us first work through some of the basic CSSlist properties. By default, the list will be bulleted with small discs, emulating a typical list suchas you might find in Microsoft Word. Note also that even though the container has no internalpadding the list is still placed well away from the left edge - approximately 30 pixels away. Thispadding is actually the distance between the left edge of the unordered list and each itemit contains.
list-style-type
The list-style-type property allows you to specify one of a number of possible markersinstead of the default disc for each list item. There are numerous values available, many of which you will not need - Hebrew or Armenian characters, for example. However, but the following fivevalues may well be useful:
none
disc
circle
square
latin
Other possibly useful list-style-types may be required from time to time. Three usefulexamples include upper-alpha, lower-alpha and upper-roman.
upper-alpha: A, B, C, D, E, etc.
lower-alpha: a, b, c, d, e, etc.
upper-roman: I, II, III, IV, V, etc.
- Create a new style sheet called lists.css and rememberto link to it in the head of lists.html.
- In lists.css you can try out each of the values by firstadding the following selector for the unordered list element:
/* Styles for all default lists */
ul {
list-style-type:circle;
}
- View the web page in a browser.
The result of specifying circle can be seen. Specifying disc would have madeno difference as that marker was already used by default. It goes without saying that squarewould produce a small squared marker.
Of particular use if you wish to get away from any kind of basic marker is the none value which of course removes the marker altogether.
list-style-type:none;
You can then either stick with no bullet marker or add a custom marker of your own using animage.
Margin and Padding
Note: The actual list items do not move to the left despite the lack of marker. This leaves too much whitespace in front of each item.
The default padding applied by the browser can be reduced by specifying yourpreferred padding. Most browsers place the list items 30 pixels away fromthe left edge of the unordered list (defaultpadding) and the unordered list itself approximately10 pixels from the top edge of the container (defaultmargin).
The following screen shot shows the defaultspacing applied to the list and its items by drawing a line around each:
Note: Each list item is block level. Therefore it will expand to fill the width of itscontainer and items above and below will wrap to a new line. Each of these defaults can beoverridden with simple CSS declarations.
To remove the default margin from the top and bottom of the unordered list specifyzero margins:
ul {
list-style-type:none;
margin:0;
}
To remove the default padding that pushes the listed items in by 30px specify zero padding:
ul {
list-style-type:none;
margin:0;
padding:0;
}
To prevent the listed items from extending the full width of the container set a maximumwidth:
ul {
list-style-type:none;
margin:0;
padding:0;
width:200px;
}
The results of these changes are shown below:
Note: The reason for all of this default padding becomes obvious if you reintroduce the list markers. The markers willappear outside of the container element.
Therefore, if you will be using markers but wish to override the default 30-pixel padding you can specify a custom leftpadding value. In the following example, 20pixels are enough toensure the markers appear just inside the container. Note that it is specified using paddingshorthand (top, right, bottom, left).
ul {
margin:0;
padding:0 0 0 20px;
width:200px;
}
The following screen shots show the result of this custom padding. This example demonstrates how toplace your unordered list precisely within a given container. It may be that you also wish tospecify custom margins to further refine the spacing.
list-style-position
Anyone who has created a bulleted list using a word processor will be aware that as long lines of text wrap - they line up exactly to the left with the bullet placed further left. The bullet is not treated as a character and simply indicates where each new list item begins. This is howHTML lists also work by default.
However, there may be occasions when the bullet needs to be inline with the text and thisis why the list-style-position property was created. The defaultvalue is outside, and thoughnot specified in the preceding examples, it was already in operation. To override this default, inside can be specified (note that for this example, the default padding is removed also).
ul {
list-style-position:inside;
margin:0;
padding:0;
width:200px;
}
The following screen shot shows the default setting with list-style-position as outside:
The following screen shot shows the default setting with list-style-position as outside:
Note: Since padding is set to zero, this will place the list marker inside the unordered list with not a pixel of padding.
There may be cases where this is ideal, but in most situations a little left padding will makethings neater. Specifying padding-left:5px or padding:0 0 0 5px will be enough to move themarkers neatly away from the edge of the unordered list. In the real world, list-style-position islittle used in favour of standard list formatting - but it is worth being aware of it.
Note: Remember that with a list-style-position value of inside, long lines of text will wrap and begin underneath their bullet markers as though the marker were a normal character.
list-style-image
The typical bullet markers provided by CSS are fine for very simple lists but in most cases acustom bullet marker will be more desirable.
The list-style-imageproperty allows a custom image to beused in place of the boring disc, circle, square and other basic bullets. Now that you know howto space your list items away from the left edge of the unordered list, playing with customimages of any width shouldnot be a problem.
For this example, we will use a 12px square image called list.gif. This should have already been copied to the images folder.
ul {
margin:0;
padding:0 0 0 25px;
width:200px;
list-style-image:url(images/list.gif);
}
As list-style-image is declared, there is no need to specify list-style-type. Note alsothat the left padding has been increased to compensate for the width of the image. The resultcan be seen in the screen shots below.
The wider your custom bullet image, the more left padding you may need. The list isalready looking a little more personalized, but could well benefit from some extra whitespacebetween the list items. This can be implemented using line-height.
ul {
margin:0;
padding:0 0 0 25px;
width:200px;
list-style-image:url(images/list.gif);
line-height:150%;
}
The following screen shot demonstrates the impact of adjusting the line-heightproperty:
The line-heightproperty adds legibility to the list making the whole thing much easier on the eye. Note that it also takes care of thespacing at the top and bottom of the list - removing the need for top or bottom unorderedlist margins.
This is only a hint of the possibilities with list styling. Later you will see howmore properties such as border and background can be used to add more definition to unorderedlists and the items they contain.
list-style Shorthand
List properties can be shortened into one declaration using the list-style property.
list-style: none inside url(images/list.gif);
However, it is not often that you would need to specify all three properties. In this example,declaring a custom image with list-style-image:url(images/list.gif) removes the need toalso turn off the basic list marker. Therefore, just specifying a customimage will be all you need in most scenarios.
Using Background Images for List Bullets
Using the list-style-image property is the easiest method of assigning a custom bullet to your list items but the results can be somewhat inconsistent. Some browsers will align the customimage directly in the middle of the list item text - while others will position it slightly higher. To beat this problem, a custom background image can be used for each list item. Note thatdefault bulleting is turned off in the ul selector.
ul {
list-style:none;
}
li {
background: transparent url(images/list.gif) no-repeat left center;
padding:0 0 0 25px;
}
Note that in the above example, the ul style was adjusted to:
ul {
margin:0;
padding:0 0 0 25px;
width:200px;
line-height:150%;
list-style:none;
}
For this example, the background-color is set to transparent in order to ensure that thewhite background colour of the container does not prevent the custom bullet images fromdisplaying. Also, by using background-position values leftcenter, the background image isforced to display the same distance from the top and bottom of the list element. Appropriateleft padding is also declared to allow enough space in front of the list text for the image to fallas shown above.
It is possible to assign classes to list items that can allow for severaldifferent background bullets to be used in one unordered list.
Note: It is important to be aware that should the custom image fail to load or be unavailable for some reason,your list will have no visual markers. If you were to approach the same design using the list-style-imageproperty to add your custom bullets, a normal bullet would show until the image was successfully downloadedor made available. If it is perfect bullet alignment you want then background images are still the best bet.
The Inline List
By default, unordered list items will display vertically with each list item on a new line. This isbecause the <li> element is a block-level element. There are, however, many occasions whenyou will need your list to display horizontally - for a main navigation bar, for example.
This calls for the default block-level value to be overridden using the display property. Let’s strip back the styling from the previous examples and examine the basic behaviour.
/* Styles for our basic list */
ul {
list-style-type:disc;
}
li {
display:inline;
}
Note: The unordered list merely specifies the bullet marker type, and that it is the liselector that is now doing all the work. By giving display a value of inline, the default block display is overruled forcing each list item to display on the same line.
This is a great starting point for a horizontal menu but what has happened to the bulletmarkers? Bizarrely, the bullet will not show when display is set to inline. This brings us back tousing background images with list items.
Background Images and Inline Lists
Earlier you learned how to apply a custom bullet as a background image in order to get arounda few cross-browser display quirks. Using this approach allows you to assign a bullet for inlinelists where default bullets refuse to be displayed.
The CSS is fairly simple. Again, turn default bullets off in the ulselector and ensuredisplay:inline is declared in the li selector. Note also that the same background rules(transparentbackground and specific positioning) are declared.
ul {
list-style:none;
}
li {
display:inline;
background:transparent url(images/list.gif) no-repeat left center;
margin:0 0 0 10px;
padding:0 0 0 15px;
}
As the list is now displaying horizontally everything appears on the same line and so thedefinition between each item is reduced. Therefore the left padding is reduced to just 15 pixels(just enough room for the 12-pixels-wide image) and 10pixels of left margin are applied tospace out each list item.
From this starting point, it should be clear how to further control the space between eachitem and get this thing to display exactly as you wish.
A - Creating lists, menus and navigation bars-Part 1.docVersion 2
Page 1 of 17