Birkbeck, University of London - Department of Media and
Cultural Studies
Postgraduate Certificate in Web Design and Development
WDD33
Session 3 Notes - Saturday 22th March 2014
Aims & Objectives
This session will cover:
 Images and CSS

Background images

Image replacement

Creating a graphical navigation bar
Creating a graphical navigation bar in Photoshop CS3.
1. Go to File>New to create a new document. If the units of measurement
are not already pixels then you can change them in the menus to the
right of the width and height values.
2. Select one of the shape tools to draw the first of your buttons.
3. If you want to draw a fixed size shape then choose this option in the
Rectangle Options window accessible via the Geometry options in the
toolbar.
4. The shape you have drawn will appear on its own layer. Make sure that
this layer is selected and then go to the Layer menu and select Layer
Style.
5. You can apply any of the layer styles to your shape. We used the
Gradient Overlay.
6. Selecting Gradient Overlay will open the Gradient Settings. Here you
can change the appearance of your gradient.
7. By default the gradient will be between black and white. To change the
colours click on the gradient itself in the gradient setting window to
open the Gradient Editor. Click on the tabs underneath the gradient to
change the start and finish colours.
8. Adding text to your image will create a new text layer. Text layers are
identified in the layers panel with a T icon. To align the text and shape
layers, click on the shape layer first then press the shift key and click
on the text layer.
9. Then make sure that the move tool is selected and then use the align
buttons to align the text and shape.
10. To create other buttons reselect the shape and text layers and then
use the Duplicate Layers option in the Layer menu. New layers will
appear in the same position as existing ones so you will need the move
tool move the new layers into position.
11. To increase canvas size and add another row of buttons then go to
Image>Canvas Size and alter the width or height to make room for the
new row. If you want to add the space underneath the current row then
click on the top centre square in the anchor options.
Using CSS to create the ‘rollover’ navigation bar
The example code below marks up a series of list items in a horizontal menu
like this:
Here are the links marked up in a list:
<ul id="menu">
<li>a href="#">Apple</a></li>
<li>a href="#">Dell</a></li>
<li><a href="#">HP</a></li>
<li><a href="#">Elonex</a></li>
<li><a href="#">Time</a></li>
<li id="tiny"><a href="#">Tiny</a></li>
</ul>
And here are the CSS rules that create the horizontal menu and set the space
for each link (a tag) within a list item at 100px x 40px.
#menu {
float: left;
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
margin:0;
padding:0;
float:left;
}
#menu li a {
float:left;
width:100px;
height:40px;
text-align:center;
text-decoration:none;
}
Here is the background image:
To add the background image to the links in the list item use the backgroundimage property. As the portion of image that we want to use is the same size
as the space allocated to the link in the list item we don’t need to use the
background-repeat or background-position properties at this point.
#menu li a {
float:left;
width:100px;
height:40px;
text-align:center;
color:#000;
text-decoration:none;
background-image:url(navbar.jpg);
}
Your navigation bar should now look something like this:
To shift the linked text out of view, use the text-indent image replacement
method.
#menu li a {
float:left;
width:100px;
height:40px;
text-align:center;
color:#000;
text-decoration:none;
background-image:url(navbar.jpg);
text-indent:-1000em;
}
Your navigation bar should now look something like this:
We now need to shift the position of the background image for the 2nd, 3rd, 4th
etc. links in list items. The first step to achieving this is to identify all of the list
items individually. We can do this by adding a unique id to each list item.
<ul id="menu">
<li id="apple"><a href="http://www.bbk.ac.uk">Apple</a></li>
<li id="dell"><a href="http://www.bbk.ac.uk">Dell</a></li>
<li id="hp"><a href="http://www.bbk.ac.uk">HP</a></li>
<li id="elonex"><a href="http://www.bbk.ac.uk">Elonex</a></li>
<li id="time"><a href="http://www.bbk.ac.uk">Time</a></li>
<li id="tiny"><a href="http://www.bbk.ac.uk">Tiny</a></li>
</ul>
For each link in a list item we need to shift the background horizontally to the
left(but not vertically). In this example by 100px. We can do that using the
background-position property and the horizontal value (always the first value)
-100px.
#dell a {background-position: -100px 0;}
Your navigation bar should now look something like this:
You can then write rules for all of the list item links shifting the background
image a further -100px as you move down the list.
#dell a {background-position: -100px 0;}
#hp a {background-position: -200px 0;}
#elonex a {background-position: -300px 0;}
#time a {background-position: -400px 0;}
#tiny a {background-position: -500px 0;}
Your navigation bar should now look something like this:
Finally you can add another set of rules for the hover state of each of the
links. This time you’ll need to shift the horizontal position by the requisite
amount and also shift the vertical position so that the background image
moves up to show the second row of links.
#apple a:hover {background-position: 0px -40px;}
Your navigation bar should now look something like this when you move the
mouse over the first link:
To complete the CSS just write the rules for all of the other links.
#apple a:hover {background-position: 0px -40px;}
#dell a:hover {background-position: -100px -40px;}
#hp a:hover {background-position: -200px -40px;}
#elonex a:hover {background-position: -300px -40px;}
#time a:hover {background-position: -400px -40px;}
#tiny a:hover {background-position: -500px -40px;}