HTML and CSS Reference
In-Depth Information
Figure 6.20
The page before
CSS for positioning
is configured
Part 2—Add Styles to the External Style Sheet
Open your wildflower.css file with Notepad and prepare to add additional styles to config-
ure the page1.html page. Let's take a moment to consider what type of positioning is
needed for the page shown in Figure 6.18, the page1.html page. Locate the following areas
on the sketch in Figure 6.19: wrapper, logo area, logo image, navigation links, content, and
footer. Type the CSS in your wildflower.css file as the styles are discussed as follows:
Wrapper. Configure a container, or wrapper, area to contain page and configure a
width of 700 pixels:
#wrapper { width: 700px;
}
Logo Area. This should be configured with the id value of contentlogo .
Configure this id so that the background-color is #e8b9e8 , the text color is
black, the font-size is larger, the minimum width is 500 pixels, and the padding
is 10 pixels. The CSS to configure this follows:
#contentlogo { background-color: #e8b9e8;
font-size: larger;
min-width: 500px;
padding: 10px;
color: #000000;
}
Logo Image. Notice how this image floats at the right edge of the browser win-
dow. Configure the id imagelogo with a right float. We have most often set the
margin to be the same for all sides of an element's box. The margins can be set
for each side individually using the margin-top , margin-right , margin-
bottom , and margin-left properties. A short-hand version of this is to set all
four values in one margin property. The order of the numeric values determines
which box side is configured (top, right, bottom, left). In this page layout the
margin at the top and right of the imagelogo should be set to 0; the bottom and
left margins should be set to 5 pixels. Configure a solid border. The CSS follows:
#imagelogo { float: right;
margin: 0 0 5px 5px;
border: solid;
}
Search WWH ::




Custom Search