Laying Out a Page - The Power of Float - Exercise

Contact Us or call 1-877-932-8228
Laying Out a Page - The Power of Float - Exercise

Laying Out a Page - The Power of Float

Duration: 30 to 45 minutes.

Creating well-designed pages is more art than science. Somebody has to come up with the design. You don't have to be a designer to be a CSS master. You just have to be able to turn a designer's design into a web page. In this exercise, you will learn how much you know. Most of the CSS is done, but you'll have to review it and compare it to the HTML to get an understanding of the different design elements. The design you're shooting for is shown below: Design

  1. Open CssPageLayout/Exercises/services.html in a browser. You'll see some work needs to be done.
  2. Open CssPageLayout/Exercises/services.html in your editor. Study the HTML. You'll only need to make one change to this file. If you need a hint, check out the footnote.
  3. Open CssPageLayout/Exercises/style.css in your editor.
    1. You'll notice a comment at the top with a bunch of float declarations. Your job is to figure out where to put these declarations. You will not need to add any new rules.
    2. One trick to getting a feel for the different elements on the page is to add dotted red borders to the different rules. For example, to call out the heading, change the rule like this:
      #header {
      	background-image: url(Images/header.png);
      	background-repeat: no-repeat;
      	height: 207px;
      	border: 5px dotted red;
      }
      The result: Resulting Image

Solution:

CssPageLayout/Solutions/services.html
---- C O D E   O M I T T E D ----
<div id="content">
---- C O D E   O M I T T E D ----
<div class="clearer"></div>
		</div>
---- C O D E   O M I T T E D ----

Code Explanation

Solution:

CssPageLayout/Solutions/style.css
* {
	padding: 0;
	margin: 0;
}

---- C O D E   O M I T T E D ----
#wrap #header #logo {
	width: 260px;
	padding-top: 50px;
	padding-left: 50px;
	height: 150px;
	float: left;
}
#wrap #header #headercontent {
	width: 300px;
	float: right;
	padding-right: 55px;
	padding-top: 60px;
	height: 125px;
}
---- C O D E   O M I T T E D ----
#submenu a {
	background-image: url(Images/submenudivider.png);
	background-repeat: no-repeat;
	background-position: left;
	display: block;
	float: left;
	height: 16px;
	padding-top: 2px;
	padding-right: 15px;
	padding-left: 15px;
	color: #666;
	text-decoration: none;
}
---- C O D E   O M I T T E D ----
#mainmenu a {
	display: block;
	height: 40px;
	padding-right: 25px;
	padding-left: 25px;
	float: left;
	text-decoration: none;
	padding-top: 15px;
	background-attachment: url(Images/menudivider.png);
	background-repeat: no-repeat;
	background-position: 0px 3px;
	color: #5B920A;
}
---- C O D E   O M I T T E D ----
#homeleft {
	width: 480px;
	float: left;
}
---- C O D E   O M I T T E D ----
#homeright .column1 {
	width: 31%;
	float: left;
	padding-right: 5px;
}
#homeright .column3 {
	float: left;
	width: 32%;
	padding-left: 8px;
}
#homeright .column2 {
	float: left;
	width: 33%;
}
---- C O D E   O M I T T E D ----
#submenu a:visited, #submenu a:active {
	background-image: url(Images/submenudivider.png);
	background-repeat: no-repeat;
	background-position: left;
	display: block;
	float: left;
	height: 16px;
	padding-top: 2px;
	padding-right: 15px;
	padding-left: 15px;
	color: #666666;
	text-decoration: none;
}
#submenu a:hover {
	background-image: url(Images/submenudivider.png);
	background-repeat: no-repeat;
	background-position: left;
	display: block;
	float: left;
	height: 16px;
	padding-top: 2px;
	padding-right: 15px;
	padding-left: 15px;
	color: #000000;
	text-decoration: none;
}
---- C O D E   O M I T T E D ----
.productimage {
	float: left;
}
---- C O D E   O M I T T E D ----

Code Explanation

Next