HTML and CSS Reference
In-Depth Information
The width of each column (cell) in the table is specified as a class in the external
style sheet, which will be linked to the home page and all other Web pages in this Web
site later in the chapter. (If you do not define the width for these cells, the width defaults
to the size of the word, image, or symbol in the cell.) The menuicon and menupipe classes
need to be inserted in the navigation bar in order to adopt the styles as defined in the
external style sheet. The class menuicon will be used to set each of the cells in which
there are images to 23% of the width of the table. The menupipe class will be used to set
each of the cells in which there are pipe symbols to 1% of the size of the table. When you
specify sizes in percentages, it is generally best not to set the width to 100% as it will fill
the entire width of the browser window.
Just as you did in Chapter 3, you will add the class names to your Web pages before
you create the classes, in this case, in the external style sheet. All navigation bar styles are con-
trolled with the external style sheet. If you didn't use an external style sheet, you would have
to type each style into each navigation bar on each Web page in the Web site. The advantage
of using an external (linked) style sheet is that if you need to make a change across the entire
Web site, you make that change only once — in the external style sheet. The change then
takes effect in every Web page into which the external (linked) style sheet has been linked.
Using an external style sheet, you will create the .css file once and link it with one line of code
into each Web page.
To Create a Horizontal Menu Bar with Image Links
Table 4-6 shows the HTML code for the horizontal navigation bar table.
Table 4-6 HTML Code to Insert a Menu Bar
Line
HTML Tag and Text
15
<br /><table class=”menu” style=”border-style: none”>
<tr>
16
17
<td class="menuicon"><a href="oceanside.html"><img src="home.gif" width="50" height="21"
alt="Home" /></a></td>
18
<td class="menupipe">|</td>
19
<td class="menuicon"><a href="golf.html"><img src="golf.gif" width="50" height="21"
alt="Golf" /></a></td>
20
<td class="menupipe">|</td>
<td class="menuicon"><a href="tennis.html"><img src="tennis.gif" width="50" height="21"
alt="Tennis" /></a></td>
21
<td class="menupipe">|</td>
22
23
<td class="menuicon"><a href="dining.html"><img src="dining.gif" width="50" height="21"
alt="Dining" /></a></td>
24
</tr>
25
</table>
The following step shows how to create a table that contains image links to four pages on the Web site, sepa-
rated by pipe symbols. The pipe symbol is usually found above the
enter
key; it is inserted when you press Shift and
the \ (backslash) key.
