4 replies [Last post]
structure
Offline
newbie
Rochester, NY
Last seen: 16 years 46 weeks ago
Rochester, NY
Joined: 2003-05-13
Posts: 3
Points: 0

on http://www.stegelnet.net/Hillel/index.php?page=events I have css setup so when the mouse moves over "Shabbat Services" text should appear describing the event. I cannot figure how to get this text to align underneath the menu. I had it working w/ position: absoulte; but that makes IE mad...so I ahve to find another way, any ideas?

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 8 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Anchors, Spans and hiding

You want to set the span style to:
clear:both;
to knock it below the menu. Assuming that's what you're after of course...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

structure
Offline
newbie
Rochester, NY
Last seen: 16 years 46 weeks ago
Rochester, NY
Joined: 2003-05-13
Posts: 3
Points: 0

Anchors, Spans and hiding

So here's the new css

.eTitle a {
	display: block;
	}
	
.eTitle a span {
	display: none;
	text-decoration: none;
	clear: both;
	}

.eTitle a:hover span {
	display: block;
	position: absolute;
	top: 250px;
	right: 10px;
	text-decoration: none;
	text-align: left;
	z-index: 100;
	
	}

.eTitle a:hover {
border: none;
}

And I can now see it in IE, but when I move the mouse away, the menu get's f*ed up.

Take a look http://www.stegelnet.net/Hillel/index.php?page=events

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Anchors, Spans and hiding

Hi Structure,
I've had a little play.

#content {
    margin: 10px 0px 0 0;	
    border:solid 1px red;   
    height:500px;
}

#content #menu {
	border: 1px solid #000; 	
	width:170px; 
	background-color: #99CCFF;
	margin:0px 0px 10px 10px;
	padding: 2px;
	text-align: right;   
        float:right;
	}

.eTitle a {
   display: block;  
   }
   
.eTitle a span {
   display: none;
   text-decoration: none;
   clear: both;
   }

.eTitle a:hover span {
   display: block;
   float:right;
   text-decoration: none;
   text-align: left;  
   }

This works for me in ie and netscape at the moment.
When the moment is over and you add more content, who knows what will happen. :roll:
You may be better off keeping the menu and content completely separate and using a little javaScript Dom combination to hide/show the information.

structure
Offline
newbie
Rochester, NY
Last seen: 16 years 46 weeks ago
Rochester, NY
Joined: 2003-05-13
Posts: 3
Points: 0

Anchors, Spans and hiding

Thank you tony...with your help and others (here and @ devshed, etc). I got it to work...Thank you for being so helpful and respectful

Peace out! Laughing out loud Laughing out loud