#header, #footer, #content styling
Add the following to #header in index.html.
<h1><a href="/"><img src="images/ci.gif" alt="java-school" /></a></h1>
Remove the rest of #header and #footer styles except for the background color in /*** Just for Looks ***/.
#header, #footer { background: #999; }
#header
Since the h1 element has a default margin, the #header moves down by the margin value. For delicate design, remove the default margin and padding of h1 in the #header.
Add the following to /*** The Essential Code ***/ to move h1 down 9px in #header.
#header h1 { margin: 0; padding: 0; position: relative; top: 9px; }
#footer
Add the following to the #footer in index.html.
<ul> <li><a href="#">Guide</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Email Collection Ban</a></li> <li id="company-info">Phone : 1234-5678, FAX : 1234-5678<br /> johndoe@gmail.org<br /> Copyright java-school.net All Rights Reserved.</li> <li><a href="#">Map</a></li> </ul>
Modify #footer in /*** The Essential Code ***/ as shown below.
#footer { clear: both; height: 70px; font-size: 11px; color: #8d8d8d; letter-spacing: -1px; border-top: 1px solid #DAEAAA; position: relative; top: 7px; }
Remove #header, #footer in /*** Just for Looks ***/.
Add the following to /*** The Essential Code ***/ to arrange #footer menu items horizontally.
#footer > ul { margin: 0; padding: 0; list-style-type: none; } #footer > ul > li { float: left; }
Finish styling #footer as shown below.
#footer > ul { margin: 0; padding: 0; list-style-type: none; position: relative; left: 8px; } #footer > ul > li { float: left; padding: 6px 12px 6px 8px; background: url('../images/circle.gif') no-repeat 0 50%; } #footer > ul > li > a { color: #8D8D8D; text-decoration: none; } #footer > ul > li > a:hover { text-decoration: underline; } #footer > ul > li#company-info { margin-left: 350px; letter-spacing: 0; background: none; }
#content
Increase #content the left and right margins of #content by 5px to make the gap between #content and #sidebar and #content and #extra.
#content { margin-left: 180px; margin-right: 210px; }
The size of #content box is 1000px. The #content's width is 610px because the sum of left and right margins is 390px (180 + 210). With borders set to 1px on the left and right, #content's width will be 608px.
Modify #container and #extra as shown below.
#container { float: left; width: 100%; border-top: 1px solid #DAEAAA; }
#extra { float: left; width: 205px; margin-left: -205px; margin-bottom: 20px; position: relative; top: 7px; }
Change the height of #content from 100px to 300px in the /*** Just for Looks ***/ for testing.
#content { font-size: large; text-align: center; background: #DDD; height: 300px; }
References