Positioning the Banner Element

Positioning the Banner Element

Positioning the Banner Element
The banner element is the first object in the page layout. The normal flow of the document controls
the position of this element, so no explicit positioning is necessary. However, because no tables
contain the element, you must specify a width and height for the element.
Find the rule for the banner element in the document’s style section. Specify a width of 750
pixels and a height of 100 pixels by adding the following black code:
/* The banner element */
div.banner {background-image: url(pawback.gif);
background-repeat: repeat-x;
width: 750px;
height: 100px;}
Set the bottom margin for the banner element to 10 pixels, as in the following black code.

/* The banner element */
div.banner {background-image: url(pawback.gif);
background-repeat: repeat-x;
width: 750px;
height: 100px;
margin-bottom: 10px}
Positioning the Links Element
The links element fills the left column of the lower-half section of the layout You will need to specify width and height properties as you did with the banner element earlier. Although this element would align to the left side of the page in the normal flow, you will specify absolute positioning and offset properties to make sure that this element is placed exactly where you want it to appear on the page.

To size the links element:
Find the rule for the links element in the document’s style section. Specify a width of 150
pixels and a height of 360 pixels by adding the code that appears in black.

/* The links element */
div.links {text-align: center;
font-family: arial, sans-serif;
background-color: #ff9933;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
width: 150px;
height: 360px;}

2. Set the links element’s position property to absolute, and offset it from the top of the page
by 140 pixels by adding the code that appears in black.
/* The links element */
div.links {text-align: center;
font-family: arial, sans-serif;
background-color: #ff9933;...

Similar Essays