css rollover/popup effect 1

gregmosu · Jul 15, 2004

Here is the code I have so far that basically makes a div element visible on a mouse over.

STYLE SHEET=======================================
div#links {font: 16px Verdana, sans-serif; }

div#links a:hover
{color: black; background: #AAA;}

div#links a span {display: none;}

div#links a:hover span
{display: block;
top: 18px; left: 0; width: 250px;
padding: 5px; margin: 10px;
color: black; background: #CCC;
font: 10px Verdana, sans-serif; text-align: left;
BORDER-LEFT: 1px outset;
BORDER-RIGHT: 1px outset;
BORDER-TOP: 1px outset;
BORDER-BOTTOM: 1px outset;
position: absolute;
z-index: 200;
}

HTML PAGE==================================
<table border="1" width="500">
<tr><td width="500">
<div id="links">
<a href=""><img src="bulb.jpg" border="0"><span>
MY TEXT...
</span></a>
</div>
</td></tr>
</table>

The problem I'm having is trying to find a div position that works for the page. If I do anything other than absolute postion, it screws w/the table size. If I get rid of the 'top' and 'left' positions, the div element shows up next to the image, but is off the page. Is there a way to get the element to show up near the tag w/out going off the page and w/out using javascript?

Thanks,
Greg

BillyRayPreachersSon · Jul 15, 2004

This will get it showing up just next to the image (I wasn't sure exactly what placement you were after):

Code:

<html>
<head>
	<style type="text/css">
		div#links {
			font: 16px Verdana, sans-serif;
		}

		div#links a:hover {
			color: #000000;
			background: #AAAAAA;
		}

		div#links a span {
			display: none;
			vertical-align: top;
			font: 10px Verdana, sans-serif;
			text-decoration: none;
			padding: 0px;
			margin: 0px;
			color: #000000;
			background: #CCCCCC;
			text-align: left;
			border: 1px #000000 solid;
		}

		div#links a:hover span {
			display: inline;
		}
	</style>
</head>

<body>
	<table border="1" width="500">
		<tr>
			<td width="500">
				<div id="links"><a href=""><img src="bulb.jpg" border="0"><span>MY TEXT...</span></a></div>
			</td>
		</tr>
	</table>
</body>
</html>[code]

Although I seem to get a slight height increase on the hover that I can't seem to budge ;o(

The main trick was making the span "inline", not "block" when it was shown.

Hope this helps,
Dan

gregmosu · Jul 16, 2004

Thanks for replying Dan. I still have a couple of problems..

1) The div element is still expanding the table when it becomes visible

2) The text no longer displays only within the element, but rather on separate lines some of which are outside the box.

Thanks for your help, but I think I'm going to just force the element to display in a static position on the page.

-Greg

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

css rollover/popup effect 1

gregmosu

Programmer

BillyRayPreachersSon

Programmer

gregmosu

Programmer

Similar threads

Part and Inventory Search

Sponsor