HTML and CSS Reference
In-Depth Information
●
Modify the
footer
id to display a 2 pixel double black top border (
border-
top
: 2
px double #000000
). Also configure 20 pixels of
padding-top
and
padding-bottom
in the
footer
id.
Save the javajam.css file.
3. Modify the index.html File.
Add
<div>
elements and modify the code as follows:
●
Configure the logo area. Assign the
<h1>
to the id logo.
●
Configure the left column navigation area. The navigation links are the only
content in the left column. Remove other code, including any
charac-
ters that may be present.
●
The right column content area should already be contained within the
div
assigned to the
content
id.
●
Configure the area that floats to the right. Modify the winding road image ele-
ment. Remove the
align="right"
attribute and add
class="floatright"
to
the winding road image element.
Save the index.html file. It should look similar to the Web page shown in Figure
6.25. Remember that validating your XHTML and CSS can help you find syntax
errors. Test and correct this page before you continue.
4. Modify the menu.html and music.html Files.
Modify the code in these Web page
files in a similar manner as you did in Step 3. Save and test your pages in a
browser. As you test your pages, use the CSS and XHTML validators to help you
find syntax errors.
5. Bonus Style:
text-transform
.
Figure 6.26 shows an alternate design for the
music.html page. Notice how the
<h2>
elements are styled differently—with all
uppercase text (using a new property,
text-transform
) different background
and text colors, font size, bottom border, and margin. Open javajam.css in a
text editor and replace the
h2
selector style rules with the following:
h2 { text-transform: uppercase;
background-color: #ffffcc;
color: #663300;
font-size: 1.2em;
border-bottom: 1px solid #000000;
margin-right: 20px;
}
Save the javajam.css file. Test your pages in a browser. Your music.html page
should look similar to the one shown in Figure 6.26. The other pages do not use
<h2>
elements and should appear as they did at the end of Step 4.
In this case study you changed the page layout of the JavaJam Web site pages. Notice
that with just a few changes in the CSS and XHTML code, you configured a two-
column page layout.
Search WWH ::
Custom Search