Positioning - Exercise

Contact Us or call 1-877-932-8228
Positioning - Exercise

Positioning

Duration: 15 to 25 minutes.

In this exercise, you will build a house from its individual parts using CSS positioning.

  1. Open PositioningAndVisibility/Exercises/Positioning.html in your browser. It will look like this:After Scrolling
  2. Your job is to build the house in the center of the green box. It will take some trial and error.
  3. Open PositioningAndVisibility/Exercises/Positioning.html in your editor and begin working. The code is shown below:

Code Sample:

PositioningAndVisibility/Exercises/Positioning.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Building a House</title>
<style type="text/css">
#plot {
	/* For centering the plot */
	/* Using relative positioning */
	position: relative;
	margin: 10px auto 0px auto;
	/* For centering the plot */
	/* Using absolute positioning */
	/*position: absolute;
	left: 50%;
	margin-left: -250px;*/
	width: 500px;
	height: 500px;
	border: 1px solid #060;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="plot"> 
		<img id="main" src="Images/main.png" alt="main">
		<img id="roof" src="Images/roof.png" alt="roof">
		<img id="chimney" src="Images/chimney.png" alt="chimney">
		<img id="door" src="Images/door.png" alt="door">
		<img id="window" src="Images/window.png" alt="window">
	</div>
</div>
</body>
</html>

Code Explanation

Challenge

  1. If you used absolute positioning, try doing it again with relative positioning.
  2. If you used relative positioning, try doing it again with absolute positioning.

Challenge

  1. Find grass.jpg in the PositioningAndVisibility/Exercises/Images folder.
  2. Use it to put your house in a nice new yard.

Solution:

PositioningAndVisibility/Solutions/PositioningAbsolute.html
---- C O D E   O M I T T E D ----
#main {
	position:absolute;
	top:150px;
	left:50px;
}

#roof {
	position:absolute;
	top:60px;
	left:34px;
}

#chimney {
	position:absolute;
	top:65px;
	left:261px;
}

#door {
	position:absolute;
	top:242px;
	left:353px;
}

#window {
	position:absolute;
	top:296px;
	left:129px;
}
---- C O D E   O M I T T E D ----

Code Explanation

Solution:

PositioningAndVisibility/Solutions/PositioningRelative.html
---- C O D E   O M I T T E D ----
#main {
	position:relative;
	top:149px;
	left:50px;
}

#roof {
	position:relative;
	top:-279px;
	left:34px;
}

#chimney {
	position:relative;
	top:-695px;
	left:261px;
}

#door {
	position:relative;
	top:-418px;
	left:275px;
}

#window {
	position:relative;
	top:-443px;
	left:-12px;
}
---- C O D E   O M I T T E D ----

Code Explanation

Next