No replies
on3wing3dang3l
on3wing3dang3l's picture
Offline
newbie
Last seen: 7 years 13 weeks ago
Timezone: GMT+3
Joined: 2013-05-03
Posts: 1
Points: 2

So I am just a novice website designer and I am currently taking an online HTML course while deployed. I am hoping to get some help with some code, because I am currently pulling my hair out trying to figure it out. Here we go:

I have some nested way-points on a map that need to re-size and display the text on hover. I cannot figure out how to get the style coding right.

Here is my style sheet:

   <style type="text/css" media="screen, tv">
      body             {font-family: sans-serif; margin: 20px; margin-bottom: 150px}
      h2               {margin-top: 0px}
      img              {border-width: 0px; display: block}
      .notes p         {font-size: 8pt; margin: 5px}
      .notes 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: 222}
      #point7 	       {position: absolute; left: 50px; top: 245}
      #point8	       {position: absolute; left: 100px; top: 245}
      #point9	       {position: absolute; left: 90px; top: 220}
      a.link:visited   {text-decoration: none}
      a.link:active    {text-decoration: none}
      a.linl:link      {text-decoration: none; width: 20px; height: 20px; overflow: hidden; background-color: blue; color:white; z-index: 1}
      a.link:hover     {text-decoration: none; width: 150px; height: 170px; overflow: visible; z-index: 2}
      #online_map      {width: 600px; height: 294px; border: 1px solid black; background-image: url(lpmap.jpg); position: relative; top: 0px; left: 0px}
      #summary         {width: 600px; margin-bottom: 20px}
   </style>

These are the waypoint im trying to add the styles to:
<div id="online_map">
 
      <div class="notes" id="point0">
            <a href="longs.htm"><img src="image0.jpg" alt="" />
            <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 class="link" href="longs.htm"><img src="image1.jpg" alt="" />
            <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="longs.htm"><img src="image2.jpg" alt="" />
            <p>
               <span>7:30 a.m.</span> Time for break at Granite Pass.
            </p></a>
      </div>
 
      <div class="notes" id="point3">
            <a href="longs.htm"><img src="image3.jpg" alt="" />
            <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="longs.htm"><img src="image4.jpg" alt="" />
            <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="longs.htm"><img src="image5.jpg" alt="" />
            <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="longs.htm"><img src="image6.jpg" alt="" />
            <p>
               <span>10:00 a.m.</span> Follow the painted targets along the Ledges.
            </p></a>
      </div>
 
      <div class="notes" id="point7">
            <a href="longs.htm"><img src="image7.jpg" alt="" />
            <p>
               <span>11:00 a.m.</span> Take special care when crossing the Narrows.
            </p></a>
      </div>
 
      <div class="notes" id="point8">
            <a href="longs.htm"><img src="image8.jpg" alt="" />
            <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="longs.htm"><img src="image9.jpg" alt="" />
            <p>
               <span>11:45 a.m.</span> Congratulations, you've reached the top!
               Time for lunch and a few photos.
            </p></a>
      </div>
 
   </div>

Here is the whole txt file:
<html>
<head>
<!-- 
   New Perspectives on HTML and XHTML
   Tutorial 4
   Case Problem 3
 
   Longs Peak Online Map
   Author: 
   Date: 
 
   Filename:         longs.htm
   Supporting files: image.jpg - image9.jpg, lpmap.jpg
-->
   <title>Longs Peak Online Map</title>
 
   <style type="text/css" media="screen, tv">
      body             {font-family: sans-serif; margin: 20px; margin-bottom: 150px}
      h2               {margin-top: 0px}
      img              {border-width: 0px; display: block}
      .notes p         {font-size: 8pt; margin: 5px}
      .notes 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: 222}
      #point7 	       {position: absolute; left: 50px; top: 245}
      #point8	       {position: absolute; left: 100px; top: 245}
      #point9	       {position: absolute; left: 90px; top: 220}
      a.link:visited   {text-decoration: none}
      a.link:active    {text-decoration: none}
      a.linl:link      {text-decoration: none; width: 20px; height: 20px; overflow: hidden; background-color: blue; color:white; z-index: 1}
      a.link:hover     {text-decoration: none; width: 150px; height: 170px; overflow: visible; z-index: 2}
      #online_map      {width: 600px; height: 294px; border: 1px solid black; background-image: url(lpmap.jpg); position: relative; top: 0px; left: 0px}
      #summary         {width: 600px; margin-bottom: 20px}
   </style>
 
</head>
 
<body>
   <div id="summary">
 
      <h2>Longs Peak Online 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>
      <p id="instruction">
         Move your mouse pointer over the numbered landmarks in the map to preview the hike.
      </p>
   </div>
 
 
   <div id="online_map">
 
      <div class="notes" id="point0">
            <a href="longs.htm"><img src="image0.jpg" alt="" />
            <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 class="link" href="longs.htm"><img src="image1.jpg" alt="" />
            <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="longs.htm"><img src="image2.jpg" alt="" />
            <p>
               <span>7:30 a.m.</span> Time for break at Granite Pass.
            </p></a>
      </div>
 
      <div class="notes" id="point3">
            <a href="longs.htm"><img src="image3.jpg" alt="" />
            <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="longs.htm"><img src="image4.jpg" alt="" />
            <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="longs.htm"><img src="image5.jpg" alt="" />
            <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="longs.htm"><img src="image6.jpg" alt="" />
            <p>
               <span>10:00 a.m.</span> Follow the painted targets along the Ledges.
            </p></a>
      </div>
 
      <div class="notes" id="point7">
            <a href="longs.htm"><img src="image7.jpg" alt="" />
            <p>
               <span>11:00 a.m.</span> Take special care when crossing the Narrows.
            </p></a>
      </div>
 
      <div class="notes" id="point8">
            <a href="longs.htm"><img src="image8.jpg" alt="" />
            <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="longs.htm"><img src="image9.jpg" alt="" />
            <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>

and the steps I am currently stuck on reads as follows:
5. In the embedded style sheet, ass the following styles for all of the div containers belonging to the notes class:
- For paragraphs nested within each note, set the font size to 8 points and the margin to 5 pixels.
- Set the font color to yellow for each span element nested within a note.
6. For each link nested within a notes class element, apply the following styles:
- Set the width and height of the link to 20 pixels.
- Hide any content that overflows the boundary of the link.
- Set the background color to blue and the font color to white.
- Set the z-index value to 1.
7. When the mouse hovers over a link within a notes class element, have the browser apply the following styles:
- change the width to 150 pixels and the height to 170 pixels.
- change the overflow property to visible.
- set the z-index value to 2

Now, I have completed these steps to the best of my ability and I seems to have step 5 working, but when I apply the same theory to 6 and 7 it does not seem to work. Any help would be greatly appreciated.

AttachmentSize
image0.jpg1.5 KB
image1.jpg12.74 KB
image2.jpg17.78 KB
image3.jpg17.91 KB
image4.jpg20.85 KB
image5.jpg18 KB
image6.jpg22.63 KB
image7.jpg20.68 KB
image8.jpg21.33 KB
image9.jpg20.44 KB
lpmap.jpg85.92 KB