Page Layout with CSS - Web Development and Design Foundations with XHTML - page 235

in Figure 6.16 and to the screenshot shown in Figure 6.15. Type the CSS in your
wildflower.css file as the styles are discussed as follows:
● Splash Screen Logo Area. This should be configured with the id value of
splashlogo . This id will use absolute positioning, appear 210 pixels from the
top and 80 pixels from the left of the browser viewport, use the background
color of #e8b9e8 , use a text color of black, display in Times New Roman or serif
font with center-aligned text, have about 5 pixels of padding on the top and bot-
tom sides, and have 20 pixels of padding on the left and right sides. There should
be a 2 pixel solid border. This element will overlap the images so it must have a
higher z-index value than the three images. The CSS follows:
#splashlogo { background-color: #e8b9e8;
padding: 5px 20px;
color: #000000;
font-family: "Times New Roman", serif;
position: absolute;
text-align: center;
z-index: 4;
top: 210px;
left: 80px;
border: 2px solid #000000;
}
● Trillium Image Area
#trillium { position: absolute;
z-index: 3;
left: 220px;
top: 80px;
}
● Pink Lady Slipper Image Area
#pls { position: absolute;
z-index: 2;
left: 420px;
top: 130px;
}
● Yellow Lady Slipper Image Area
#yls { position: absolute;
z-index: 3;
left: 300px;
top: 270px;
}
● Hyperlink Area
#enter { position: absolute;
left: 520px;
top: 350px;
font-family: Verdana,sans-serif;
}
Save the wildflower.css file in the wildflowers folder.