Hi folks,
I have encountered a problem with CSS and setting the z-index values to the proper value. This web page contains an interactive map of a hiking trail map. When you mouse over each number, the blue box and picture should appear on top of everything else. However, I've spent hours on this, and still haven't been successful at it.
If you have a moment to review my code, I would GREATLY appreciate it. If you find any errors, please guide me in the direction that I should take.
Here is the code:
HTML Code:
<html>
<head>
<title>Longs Peak Online Map</title>
<style type="text/css" media="screen, tv, tty">
body {font-family: sans-serif}
.notes a:link {text-decoration: none; background-color: blue;
color: white; width: 20px; height: 20px; overflow: hidden; z-index: 2}
.notes a:visited {text-decoration: none; background-color: blue;
color: white; width: 20px; height: 20px; overflow: hidden; z-index: 2}
.notes a:hover {text-decoration: none; width: 150px; height: 170px; overflow: visible; z-index: 3}
.notes a:active {text-decoration: none; background-color: blue;
color: white; width: 20px; height: 20px; overflow: hidden; z-index: 2}
img {border-width: 0}
#summary {margin-top: 350px; width: 600px}
#online_map {position: absolute; left: 5px; top: 5px}
#lpmap {position: absolute; left: 0px; top: 0px; width: 600px; height: 294px; z-index: 1}
#instruction {position: relative; left: 0px; top: 300px; width: 600px}
.notes p {margin: 5px; font-size: 8pt}
.notes p span {color: yellow}
#point0 {position: absolute; left: 560px; top: 60px}
#point1 {position: absolute; left: 277px; top: 90px}
#point2 {position: absolute; left: 175px; top: 0px}
#point3 {position: absolute; left: 110px; top: 115px}
#point4 {position: absolute; left: 55px; top: 165px}
#point5 {position: absolute; left: 5px; top: 180px}
#point6 {position: absolute; left: 15px; top: 222px}
#point7 {position: absolute; left: 50px; top: 245px}
#point8 {position: absolute; left: 100px; top: 245px}
#point9 {position: absolute; left: 90px; top: 220px}
</style>
</head>
<body>
<div id="summary">
<h2>Longs Peak <span id="hideprint">Online</span> Trail Map</h2>
<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, 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>
</div>
<div id="online_map">
<div id="lpmap"><img src="lpmap.jpg" alt="" /></div>
<div id="point0" class="notes">
<a href="#"><img src="image0.jpg" alt="" /><br />
<p>
<span>3:30 a.m.</span> Start from the Longs Peak Ranger Station,
nine miles south of Estes Park. Be sure to pack food, extra water, sunblock,
and warm clothes, gloves, and caps.
</p></a>
</div>
<div id="point1" class="notes">
<a href="#"><img src="image1.jpg" alt="" /><br />
<p>
<span>5:30 a.m.</span> Stop at Mills Moraine for a view of the
sunrise.
</p></a>
</div>
<div id="point2" class="notes">
<a href="#"><img src="image2.jpg" alt="" /><br />
<p>
<span>7:30 a.m.</span> Time for break at Granite Pass.
</p></a>
</div>
<div id="point3" class="notes">
<a href="#"><img src="image3.jpg" alt="" /><br />
<p>
<span>8:30 a.m.</span> Climb through the Boulder Field on the
way to the Keyhole.
</p></a>
</div>
<div id="point4" class="notes">
<a href="#"><img src="image4.jpg" alt="" /><br />
<p>
<span>9:00 a.m.</span> Stop at the
Agnes Vaille shelter for a well-deserved breakfast.
</p></a>
</div>
<div id="point5" class="notes">
<a href="#"><img src="image5.jpg" alt="" /><br />
<p>
<span>9:30 a.m.</span> It's time to go through
the Keyhole. Be prepared for heavy winds.
</p></a>
</div>
<div id="point6" class="notes">
<a href="#"><img src="image6.jpg" alt="" /><br />
<p>
<span>10:00 a.m.</span> Follow the painted targets along the Ledges.
</p></a>
</div>
<div id="point7" class="notes">
<a href="#"><img src="image7.jpg" alt="" /><br />
<p>
<span>11:00 a.m.</span> Take special care when crossing the Narrows.
</p></a>
</div>
<div id="point8" class="notes">
<a href="#"><img src="image8.jpg" alt="" /><br />
<p>
<span>11:15 a.m.</span> You're almost there! Climb the Homestretch
to reach the summit.
</p></a>
</div>
<div id="point9" class="notes">
<a href="#"><img src="image9.jpg" alt="" /><br />
<p>
<span>11:45 a.m.</span> Congratulations, you've reached the top!
Time for lunch and a few photos.
</p></a>
</div>
<div id="instruction">Move your mouse pointer over the numbered landmarks
in the map to preview the hike.
</div>
</div>
</body>
</html>
Please note that I am missing the graphics. *EDIT: I uploaded the map and a few of the "hover notes" (call them what you will!)*
I hope that this has been posted in the right place. Any advice you can offer me would be most appreciated. Thanks!
31-Mar-2006, 02:48
Last Week of IA Training by crystalattice
Similar Threads
