1 reply [Last post]
mathieudeforge
mathieudeforge's picture
Offline
newbie
Last seen: 8 years 3 weeks ago
Timezone: GMT-5
Joined: 2014-11-07
Posts: 1
Points: 2

Hi, I'm new to the site, but have a feeling I'll be using it more and more. My problem is that I've followed what my text book and teacher have taught me but no matter what I do I can't get images to place or clip properly, so there is something I'm clearly overlooking. I've completed other tasks that required it in less complex methods, so maybe coming to a more difficult level I psyched myself out and made one mistake then because of that I repeated it or something. I just can't see them myself.

The question can be found in HTML & CSS: Comprehensive 6th edition on page 306 on google DOCs, I used the books tutorial to end up with these codes.

here is my html.

<!DOCTYPE html>
<html>
<head>
	<!--
		New Perspectives on HTML and CSS
		Tutorial 4
		Case Problem 3
 
		Longs Peak Online Map
		Author: 
		Date:   
		Filename:         longs.htm
		Supporting files: bluebar.png, 
		                  image0.jpg - image09.jpg, lpmap.jpg, 
		                  modernizr-1.5.js, map.css
	-->
 
	<meta charset="UTF-8" />
	<title>Longs Peak Interactive Trail Map</title>
	<script src="modernizr-1.5.js"></script>
	<link rel="stylesheet" type="text/css" href="map.css">
</head>
<body>
	<div id="page">
 
		<nav class="vertical">
			<ul>
				<li><a href="#">Home Page</a></li>
				<li><a href="#">Black Canyon Map</a></li>
				<li><a href="#">Black Lake Map</a></li>
				<li><a href="#">Continental Divide Map</a></li>
				<li><a href="#">Estes Cone Map</a></li>
				<li><a href="#">Flattop Map</a></li>
				<li><a href="#">Meeker Map</a></li>
				<li><a href="#">Odessa Map</a></li>
				<li><a href="#">Longs Peak Map</a></li>
				<li><a href="#">Lumpy Ridge Map</a></li>
				<li><a href="#">Petit Grepon Map</a></li>
				<li><a href="#">Sky Pond Map</a></li>
				<li><a href="#">Trail Ridge Road Map</a></li>
				<li><a href="#">Twin Sisters Map</a></li>
			</ul>
		</nav>
 
 
 
		<section id="summary">
			<h1>Longs Peak Interactive Map</h1>
			<p>
				At 14,255 feet, Longs Peak towers above all other summits in 
				Rocky Mountain National Park. The summer is the only season 
				in which the peak can be climbed by a non-technical route. 
				Early mornings break calm, but clouds build in the afternoon sky, 
				often exploding in storms of brief, heavy rain, thunder and 
				dangerous lightning. Begin your hike early, way before dawn, 
				to be back below timberline before the weather turns for 
				the worse.
			</p>
			<p>
				The Keyhole Route, Longs Peak's only non-technical hiking 
				pathway, is a 16 mile round trip with an elevation gain of 
				4,850 feet. Though non-technical, the Keyhole Route is still 
				challenging and is not recommended for those who 
				are afraid of heights or exposed ledges. Hikers should be 
				properly outfitted with clothing, food, and water. Use caution 
				when ascending or descending steep areas. Don't be afraid to 
				back down when bad weather threatens.
			</p>
			<p>
				Move your mouse pointer over the numbered landmarks in the 
				map to preview the hike.
			</p>
		</section>
 
 
 
		<section id="map">
			<figure id="point0">
				<img src="image0.jpg" alt="" />
				<figcaption>
					<time datetime="03:30">3:30 a.m.</time> Start from the Longs Peak Ranger
					Station, nine miles south of Estes Park. Be sure to pack 
					food, extra water, 
					sunblock, warm clothes, gloves, and caps.
				</figcaption>
			</figure>
 
			<figure id="point1">
				<img src="image1.jpg" alt="" />
				<figcaption>
					<time datetime="05:30">5:30 a.m.</time> Stop at Mills Moraine for a 
					view of the sunrise.
				</figcaption>
			</figure>
 
			<figure id="point2">
				<img src="image2.jpg" alt="" />
				<figcaption>
					<time datetime="07:30">7:30 a.m.</time> Time for a break at Granite Pass.
				</figcaption>
			</figure>
 
			<figure id="point3">
				<img src="image3.jpg" alt="" />
				<figcaption>
					<time datetime="08:30">8:30 a.m.</time> Climb through the Boulder Field 
					on the way to the Keyhole.
				</figcaption>
			</figure>
 
			<figure id="point4">
				<img src="image4.jpg" alt="" />
				<figcaption>
					<time datetime="09:00">9:00 a.m.</time> Stop at the
					Agnes Vaille shelter for a well-deserved breakfast.
				</figcaption>
			</figure>
 
			<figure id="point5">
				<img src="image5.jpg" alt="" />
				<figcaption>
					<time datetime="09:30">9:30 a.m.</time> It's time to go through
					the Keyhole. Be prepared for heavy winds.
				</figcaption>
			</figure>
 
			<figure id="point6">
				<img src="image6.jpg" alt="" />
				<figcaption>
					<time datetime="10:00">10:00 a.m.</time> Follow the painted targets 
					along the Ledges.
				</figcaption>
			</figure>
 
			<figure id="point7">
				<img src="image7.jpg" alt="" />
				<figcaption>
					<time datetime="11:00">11:00 a.m.</time> Take special care when crossing 
					the Narrows.
				</figcaption>
			</figure>
 
			<figure id="point8">
				<img src="image8.jpg" alt="" />
				<figcaption>
					<time datetime="11:15">11:15 a.m.</time> You're almost there! Climb the
					Homestretch to reach the summit.
				</figcaption>
			</figure>
 
			<figure id="point9">
				<img src="image9.jpg" alt="" />
				<figcaption>
					<time datetime="11:45">11:45 a.m.</time> Congratulations, you've reached 
					the top! Time for lunch and a few photos.
				</figcaption>
			</figure>
 
		</section>
 
	</div>
</body>
</html>

And here is my CSS style sheet

nav {
display: block;
}
 
section {
display: block;
}
 
figure {
display: block;
}
 
figcaption {
display: block;
}
 
 
#page .vertical {
display: block;
}
 
#page #summary {
display: block;
}
 
#page #map{
display: block;
}
 
#page #map #point0 {
display: block;
}
 
#page #map #point0 figcaption {
display: block;
}
 
#page #map #point1 {
display: block;
}
 
#page #map #point1 figcaption {
display: block;
}
 
#page #map #point2 {
display: block;
}
 
#page #map #point2 figcaption {
display: block;
}
 
#page #map #point3 {
display: block;
}
 
#page #map #point3 figcaption {
display: block;
}
 
#page #map #point4 {
display: block;
}
 
#page #map #point4 figcaption {
display: block;
}
 
#page #map #point5 {
display: block;
}
 
#page #map #point5 figcaption {
display: block;
}
 
#page #map #point6 {
display: block;
}
 
#page #map #point6 figcaption {
display: block;
}
 
#page #map #point7 {
display: block;
}
 
#page #map #point7 figcaption {
display: block;
}
 
#page #map #point8 {
display: block;
}
 
#page #map #point8 figcaption {
display: block;
}
 
#page #map #point9 {
display: block;
}
 
#page #map #point9 figcaption {
display: block;
}
 
#page #map #point0 figcaption time {
display: inline;
}
 
#page #map #point1 figcaption time {
display: inline;
}
 
#page #map #point2 figcaption time {
display: inline;
}
 
#page #map #point3 figcaption time {
display: inline;
}
 
#page #map #point4 figcaption time {
display: inline;
}
 
#page #map #point5 figcaption time {
display: inline;
}
 
#page #map #point6 figcaption time {
display: inline;
}
 
#page #map #point7 figcaption time {
display: inline;
}
 
#page #map #point8 figcaption time {
display: inline;
}
 
#page #map #point9 figcaption time {
display: inline;
}
 
 
 
* {
padding: 0px;
margin: 0px;
}
 
body {
font-family: "Verdana", "Geneva", sans-serif;
}
 
#page {
background-color: rgb(255,255,128);
background-image: url(bluebar.png);
background-repeat: repeat-y;
border-style: rigid;
border-width: 15px;
border-color: rgb(70,76,222);
border-radius: 50px;
width: 900px;
height: 750px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 200px;
}
 
#page .vertical {
float: left;
width: 230px;
}
 
#page .vertical ul li {
list-style-type: none;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 20;
margin-right: 20;
}
 
#page .vertical ul li a {
color: white;
text-decoration: none;
}
 
#page .vertical ul li a:hover {
color: yellow;
}
 
#page #summary {
float: left;
margin-left: 30px;
width: 600px;
}
 
#page #summary h1 {
color: rgb(70,76,222);
font-size: 24px;
font-weight: normal;
letter-spacing: 5px;
margin: 20px;
}
 
#page #summary p {
margin: 10px;
}
 
#page #map {
position: relative;
background-color: white;
background-image: url('lpmap.jpg');
background-position: top-left; 
background-repeat: no-repeat;
border-style: solid;
border-width: 1px;
float: left;
margin-left: 30px;
width: 600px;
height: 294px;
}
 
#page #map figure {
background-color: rgb(70,76,222);
color: white;
width: 150px;
border-radius: 15px;
position: absolute;
z-index: 1;
}
 
#page #map #point0 {
clip: rect(0, 20, 20, 0);
}
 
#page #map #point1 {
clip: rect(0, 20, 20, 0);
}
 
#page #map #point2 {
clip: rect(0, 20, 20, 0);
}
 
#page #map #point3 {
clip: rect(0, 20, 20, 0);
}
 
#page #map #point4 {
clip: rect(0, 20, 20, 0);
}
 
#page #map #point5 {
clip: rect(0, 20, 20, 0);
}
 
#page #map #point6 {
clip: rect(0, 20, 20, 0);
}
 
#page #map #point7 {
clip: rect(0, 20, 20, 0);
}
 
#page #map #point8 {
clip: rect(0, 20, 20, 0);
}
 
#page #map #point9 {
clip: rect(0, 20, 20, 0);
}
 
#page #map #point0:hover {
clip: rect(0, 20, 20, 0);
z-index: 2;
}
 
#page #map #point1:hover {
clip: rect(0, 20, 20, 0);
z-index: 2;
}
 
#page #map #point2:hover {
clip: rect(0, 20, 20, 0);
z-index: 2;
}
 
#page #map #point3:hover {
clip: rect(0, 20, 20, 0);
z-index: 2;
}
 
#page #map #point4:hover {
clip: rect(0, 20, 20, 0);
z-index: 2;
}
 
#page #map #point5:hover {
clip: rect(0, 20, 20, 0);
z-index: 2;
}
 
#page #map #point6:hover {
clip: rect(0, 20, 20, 0);
z-index: 2;
}
 
#page #map #point7:hover {
clip: rect(0, 20, 20, 0);
z-index: 2;
}
 
#page #map #point8:hover {
clip: rect(0, 20, 20, 0);
z-index: 2;
}
 
#page #map #point9:hover {
clip: rect(0, 20, 20, 0);
z-index: 2;
}
 
#page #map #point0 figcaption {
font-size: 12px;
margin: 10px;
}
 
#page #map #point1 figcaption {
font-size: 12px;
margin: 10px;
}
 
#page #map #point2 figcaption {
font-size: 12px;
margin: 10px;
}
 
#page #map #point3 figcaption {
font-size: 12px;
margin: 10px;
}
 
#page #map #point4 figcaption {
font-size: 12px;
margin: 10px;
}
 
#page #map #point5 figcaption {
font-size: 12px;
margin: 10px;
}
 
#page #map #point6 figcaption {
font-size: 12px;
margin: 10px;
}
 
#page #map #point7 figcaption {
font-size: 12px;
margin: 10px;
}
 
#page #map #point8 figcaption {
font-size: 12px;
margin: 10px;
}
 
#page #map #point9 figcaption {
font-size: 12px;
margin: 10px;
}
 
#page #map #point0 figcaption time {
color: yellow;
}
 
#page #map #point1 figcaption time {
color: yellow;
}
 
#page #map #point2 figcaption time {
color: yellow;
}
 
#page #map #point3 figcaption time {
color: yellow;
}
 
#page #map #point4 figcaption time {
color: yellow;
}
 
#page #map #point5 figcaption time {
color: yellow;
}
 
#page #map #point6 figcaption time {
color: yellow;
}
 
#page #map #point7 figcaption time {
color: yellow;
}
 
#page #map #point8 figcaption time {
color: yellow;
}
 
#page #map #point9 figcaption time {
color: yellow;
}
 
#page #map #point0 {
left:560;
top:60;
}
 
#page #map #point1 {
left:277;
top:90;
}
 
#page #map #point2 {
left:175;
top:0;
}
 
#page #map #point3 {
left:110;
top:115;
}
 
#page #map #point4 {
left:55;
top:165;
}
 
#page #map #point5 {
left:5;
top:180;
}
 
#page #map #point6 {
left:15;
top:222;
}
 
#page #map #point7 {
left:50;
top:245;
}
 
#page #map #point8 {
left:100;
top:245;
}
 
#page #map #point9 {
left:90;
top:220;
}

AttachmentSize
longs.txt4.74 KB
map.txt.txt6.32 KB
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Clip has been around a

Hi

Clip has been around a long time but it is still hard to get your head around.

Play around with the example here clip it might help.