Help - Search - Members - Calendar
Full Version: help me!
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
icon
alright well ive done this site for a friend and i cant seem to figure out how i got the map on top. the maps got to be below the text and i cant figure it out any help please?? i just need to have the text on top and the map and img's below. im really new at the css thing and really need the help.. thanks guys.. dry.gif

<style type="text/css">
body {font-family: sans-serif; margin: 20px; margin-bottom: 150px}
h2 {margin-top: 0px}
img {border-width: 0px; display: block}
#summary {width: 600px; margin-bottom: 20px}
#summary {position: absolute; top: 350px; width: 600px}

#online_map {position: absolute; top: 5px; left: 5px}
#lpmap {position: absolute; top: 0px; left: 0px; width: 600px; height: 294px; z-index: 1}
#instruction {position: relative; top: 300px; width: 600px}

.notes p {margin: 5px; font-size: 8pt}
.notes p span {color: yellow}
.notes a {width: 20px; height: 20px; overflow: hidden; background-color: blue; color: white; z-index: 2}
.notes a:hover {width: 150px; height: 170px; overflow: visible; z-index: 3}

#point0 a {position: absolute; top: 60px; left: 560px}
#point1 a {position: absolute; top: 90px; left: 277px}
#point2 a {position: absolute; top: 0px; left: 175px}
#point3 a {position: absolute; top: 115px; left: 110px}
#point4 a {position: absolute; top: 165px; left: 55px}
#point5 a {position: absolute; top: 180px; left: 5px}
#point6 a {position: absolute; top: 222px; left: 15px}
#point7 a {position: absolute; top: 245px; left: 50px}
#point8 a {position: absolute; top: 245px; left: 100px}
#point9 a {position: absolute; top: 220px; left: 90px}
</style>
<style type="text/css" media="print">
body {font-family: sans-serif}
a {text-decoration: none}
img {border-width: 0px}
a:link, a:visited {color: black}
#instruction, #hideprint {display: none}
#lpmap {page-break-after: always}
.notes {page-break-inside: avoid; margin: 30px}
</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="instruction">Move your mouse pointer over the numbered landmarks
in the map to preview the hike.
</div>
<div id="lpmap"><img src="longs_files/lpmap.jpg" alt=""></div>
<div class="notes" id="point0">
<a href="#">
<img src="longs_files/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 class="notes" id="point1">
<a href="#">
<img src="longs_files/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 class="notes" id="point2">
<a href="#">
<img src="longs_files/image2.jpg" alt=""><br>
<p>
<span>7:30 a.m.</span> Time for break at Granite Pass.
</p>
</a>
</div>
<div class="notes" id="point3">
<a href="#">
<img src="longs_files/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 class="notes" id="point4">
<a href="#">
<img src="longs_files/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 class="notes" id="point5">
<a href="#">
<img src="longs_files/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 class="notes" id="point6">
<a href="#">
<img src="longs_files/image6.jpg" alt=""><br>
<p>
<span>10:00 a.m.</span> Follow the painted targets along the Ledges.
</p>
</a>
</div>
<div class="notes" id="point7">
<a href="#">
<img src="longs_files/image7.jpg" alt=""><br>
<p>
<span>11:00 a.m.</span> Take special care when crossing the Narrows.
</p>
</a>
</div>
<div class="notes" id="point8">
<a href="#">
<img src="longs_files/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 class="notes" id="point9">
<a href="#">
<img src="longs_files/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>
</body>
</html>
pandy
Can you post the URL to the page, so we can see what it looks like with images and all?

To you mean on top of as in before, higher up on the page, or do you mean literally on top of as in overlaying?
icon
QUOTE(pandy @ Sep 28 2009, 12:55 PM) *

Can you post the URL to the page, so we can see what it looks like with images and all?

To you mean on top of as in before, higher up on the page, or do you mean literally on top of as in overlaying?


well that's the thing this isnt live yet. its going to be my basis for it. i ment like having just the plain text on top of the map so it would be

h2 hed

Intro text

Paragraphs

Map would be down here below.
icon
Thanks for the help i got it. mixed up the summary so it put map in diff spot. thanks.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.