8 Replies - 11787 Views - Last Post: 12 September 2010 - 07:00 AM

#1 dunsta   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 79
  • Joined: 08-April 10

css .class a hover problem

Posted 11 September 2010 - 06:27 AM

Hi
I am having a problem with a class = notes,
that contains a hyperlink = a
that contains an image and a paragraph.

My goal is to box the class 20 *20 px
then when mouse hovers,
box expands to 150*170px and displays img and <p>

If I use

.notes a { width 20px ...etc}

the page doesn't box up everything into a 20*20px

if I use only .notes { width...}

it boxes down to 20*20,
but then I can't get the hover to work which should expand the img..
.notes  {            
                                 width: 20px;
                                 height: 20px;
                                 overflow: hidden;
                                 background-color: blue;
                                 color: white;
                                 z-index: 1;
                                 
                                 }


this works (ie, makes small boxes on a map)

.notes a:hover{     width: 150px;
                                 height: 170px;
                                 overflow: visible;
                                 z-index: 2;
                                 font-size: 2em;
                                 }

but then this doesn't

heres the full code using what I expected to work (I tested a similar code at w3schools example page, in regaurds to .class a, .class a:hover)
I think there may be a problem with <a href= " "> <p> ...</p></a>, maybe??


<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">

      body           {    font-family: sans-serif; margin: 20px; margin-bottom: 150px;
      background-color: lime;}

      h2             {    margin-top: 0px}

      img            {    border-width: 0px; display: block}

      #summary       {    width: 600px; margin-bottom: 20px}
      a                     {    text-decoration: none;}
      #online_map        {    width: 600px;
                              height: 294px;
                              border: 1px solid black;
                              background-image: url(lpmap.jpg);
                              position: relative;
                              left: 0px;
                              top: 0px;
                          
                          }
         .notes p        {        font-size: 8pt;
                                 margin: 5px;
                             }
                             
         .notes span    {        color: yellow;}
         
         .notes a {            
                                 width: 20px;
                                 height: 20px;
                                 overflow: hidden;
                                 background-color: blue;
                                 color: white;
                                 z-index: 1;
                                 
                                 }
     

                                 
         .notes a:hover{     width: 150px;
                                 height: 170px;
                                 overflow: visible;
                                 z-index: 2;
                                 font-size: 2em;
                                 }
         
         #point0{                position: absolute;
                                 left: 560;
                                 top: 60;
                                 }                    

   </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 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>


Is This A Good Question/Topic? 0
  • +

Replies To: css .class a hover problem

#2 CTphpnwb   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,998
  • Joined: 08-August 08

Re: css .class a hover problem

Posted 11 September 2010 - 07:37 AM

You're expanding the link, but you also need to expand the div.
@charset "UTF-8";
/* CSS Document */

.notes  {            
	width: 100px;
	height: 100px;
	overflow: hidden;
	background-color: blue;
	color: white;
	z-index: 1;
}

.notes:hover {
	width: 300px;
	height: 300px;
}

.notes a:link {            
	width: 20px;
	height: 20px;
	overflow: hidden;
	background-color: blue;
	color: white;
	z-index: 1;
}

.notes a:hover {
	width: 300px;
	height: 300px;
	overflow: visible;
	color: white;
	z-index: 2;
	font-size: 2em;
}


<html>
<head>
<title>title</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="notes"><a href="somelink">this is a test.</a></div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#3 dunsta   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 79
  • Joined: 08-April 10

Re: css .class a hover problem

Posted 11 September 2010 - 08:21 AM

I still can't get the hover image and paragraph to appear.

     .notes             {    width: 20px;
                                 height: 20px;
                                 overflow: hidden;
                                 background-color: blue;
                                 color: white;
                                 z-index: 1;
                                 
                                 }
     

                                 
 .notes:hover {     width: 170px;
                                 height: 150px;
                                 z-index: 2;
                                 }
                                 
 .notes a:link{
                     width: 20px;
                                 height: 20px;
                                 overflow: hidden;
                                 background-color: blue;
                                 color: white;
                                 z-index: 1;
                                 }
 .notes a:hover {     width: 170px;
                                 height: 150px;
                                 overflow: visible;
                                 z-index: 2;
                                 font-size: 2em;
                                 }


maybe it is slightly different to your test because I'm using an image and paragraph inside the link. However I do understand how/why your example works, but I'm not sure we need seperate (though I am probably wrong here) class and link styles,
"any style applied to an element is passed down the doc tree." "So a style applied to an <a> is automatically passed down to elements contained in that <a>, unless it conflicts with a more specific style."<-- from text, Carey,P.
Maybe I have a conflict with the img or a style??




 <div class="notes" id="point1">

           <a 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>

This post has been edited by dunsta: 11 September 2010 - 08:30 AM

Was This Post Helpful? 0
  • +
  • -

#4 dunsta   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 79
  • Joined: 08-April 10

Re: css .class a hover problem

Posted 11 September 2010 - 08:32 AM

i tried it here too

http://www.w3schools...e=trycss_zindex

with this code

<html>
<head>
<style type="text/css">

.notes {width:50; height: 50;overflow:hidden;}
.notes:hover {width:100;height:141;}

.notes a:link{width:20; height:20;z-index:1 }
.notes a:hover{ width:150; height:150;z-index:2 }

</style>
</head>

<body>
<h1>This is a heading</h1>
<div class = "notes"><a href="http://benplayer.com"><img src="w3css.gif" width="100" height="140" /></a></div>
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>




no good :(
Was This Post Helpful? 0
  • +
  • -

#5 CTphpnwb   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,998
  • Joined: 08-August 08

Re: css .class a hover problem

Posted 11 September 2010 - 04:18 PM

Try making the image part of the background.
Was This Post Helpful? 0
  • +
  • -

#6 dunsta   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 79
  • Joined: 08-April 10

Re: css .class a hover problem

Posted 11 September 2010 - 06:43 PM

View PostCTphpnwb, on 11 September 2010 - 03:18 PM, said:

Try making the image part of the background.


in the hover psuedo class?
Was This Post Helpful? 0
  • +
  • -

#7 CTphpnwb   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,998
  • Joined: 08-August 08

Re: css .class a hover problem

Posted 11 September 2010 - 07:59 PM

I'd try it in notes.
Was This Post Helpful? 0
  • +
  • -

#8 dunsta   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 79
  • Joined: 08-April 10

Re: css .class a hover problem

Posted 11 September 2010 - 09:28 PM

like this?


     
.notes{   
   width: 20px;
   height: 20px;
   overflow: hidden;
   background-color: blue;
   color: white;
   z-index: 1;
  background-image:inherit;
 }
     


and this
 .notes a:hover {
      width: 170px;
    height: 150px;
    overflow: visible;
    z-index: 2;
    font-size: 2em;
    background-image: inherit;
}



or this
 .notes a:hover {
      width: 170px;
    height: 150px;
    overflow: visible;
    z-index: 2;
    font-size: 2em;
    background-image: url("image2.jpg"); <!-- need a different img for aech link though -->
}


I still cant do it

This post has been edited by dunsta: 11 September 2010 - 09:37 PM

Was This Post Helpful? 0
  • +
  • -

#9 CTphpnwb   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,998
  • Joined: 08-August 08

Re: css .class a hover problem

Posted 12 September 2010 - 07:00 AM

This works for me:
@charset "UTF-8";
/* CSS Document */

.notes  {            
	width: 100px;
	height: 100px;
	overflow: hidden;
	background-color: blue;
	color: white;
	z-index: 1;
	background-image:url('image.png');
}

.notes:hover {
	width: 300px;
	height: 300px;
}

.notes a:link {            
	width: 20px;
	height: 20px;
	overflow: hidden;
	background-color: blue;
	color: white;
	z-index: 1;
}

.notes a:hover {
	width: 300px;
	height: 300px;
	overflow: visible;
	color: white;
	z-index: 2;
	font-size: 2em;
}

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1