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