/    Sign up×
Community /Pin to ProfileBookmark

Hover, Position: Relative vs. Absolute

Copy linkTweet thisAlerts:
May 27.2010

So, I was trying to figure out a way to hover over some images/button and then have it displayed on top of a table ( I wish I could give ya’ll a screen shot).

Anywho, I got it to work… but when I change the size of the browser (IE 7 and Firefox) the image remains in the same position causing it to look out of place.

When I tried to use position:relative, it’s even worse…
Could someone explain relative position vs. absolute… below is a condensed version.

Also, my verbage is underlined?

Why and how would I go about fixing that?…

I thought what I did was pretty clever, but it seems like a lot of trouble… do I have to start over?

<head>
<!–hoverover–>

<style type=”text/css”>

div#links a span {display: none;}

div#links a:hover span {display: block;
position: absolute?; top: 345px; left: 705px; width: 195px;
padding: 5px; z-index: 100;
color: #0174DF; margin: 10px; background: #FFFFFF;
font: 10px verdana, sans-serif; text-align: left;}

.showme {display: block;
position: absolute?; top: 345px; left: 705px; width: 195px;
padding: 5px; z-index: 100;
color: #0174DF; margin: 10px; background: #FFFFFF;
font: 10px verdana, sans-serif; text-align: left;}

</style>

<!–hoverover–>
</head>

<BODY>
<table width=”178″ height=”1175″ cellspacing=”0″ cellpadding=”0″ border=”0″>

<tr>
<td width=”178″ height=”84″ align=”center” valign=”top”>
<div>
<a href=”http://www.something.com/“>
<img src=”something/something/something.jpg” width=”158″ height=”84″ border=”0″ alt=””>
<span class=”showme”>
<img src=”something/something/something.jpg”><BR><BR><BR>
WORD: DEFINITION…VERBAGE
</span>
</a>
</div>
</td>
</tr>
<tr>
<td width=”178″ height=”84″ align=”center” valign=”top”>
<div = “links”>
<a href=”http://www.something.com/“>
<img src=”something/something/something.jpg” width=”158″ height=”84″ border=”0″ alt=””>
<span>
<img src=”something/something/something.jpg”><BR><BR><BR>
WORD: DEFINTION…VERBAGE
</span>
</a>
</div>
</td>
</tr>
</table>

</BODY>

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaMay 28.2010 — maybe this css positioning demo might help you understand how positioning works:

[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--

#redDiv {
position: relative;
top: 50px;
left: 50px;
background-color: red;
width: 100px;
height: 100px}

#greenDiv {
position: absolute;
top: 35px;
left: 35px;
background-color: green;
width: 100px;
height: 100px}

#inputs {
position: absolute;
top: 350px;
left: 10px}

-->
</style>
<script type="text/javascript">
<!--

function moveDiv(elemId,coord) {
switch (elemId) {
case "greenX":
document.getElementById("greenDiv").style.left = coord+"px";
break;
case "greenY":
document.getElementById("greenDiv").style.top = coord+"px";
break;
case "redX":
document.getElementById("redDiv").style.left = coord+"px";
break;
case "redY":
document.getElementById("redDiv").style.top = coord+"px";
break;
}
}

//-->
</script>
</head>
<body>

<div id="redDiv">
Parent Div
<div id="greenDiv">Child Div</div>
</div>

<div id="inputs">
<p>Enter x,y values in pixels to move the green and red elements around the page.</p>
<table cellspacing="15">
<tr>
<td>Red X<br />Relative to page</td><td><input type="text" id="redX" onchange="moveDiv(this.id,this.value)" /></td>
</tr>
<tr>
<td>Red Y<br />Relative to page</td><td><input type="text" id="redY" onchange="moveDiv(this.id,this.value)" /></td>
</tr>
<tr>
<td>Green X<br />Relative to parent</td><td><input type="text" id="greenX" onchange="moveDiv(this.id,this.value)" /></td>
</tr>
<tr>
<td>Green Y<br />Relative to parent</td><td><input type="text" id="greenY" onchange="moveDiv(this.id,this.value)" /></td>
</tr>
</table>
<p>The text boxes have onchange event handlers.</p>
</div>

</body>
</html>
[/code]
×

Success!

Help @kkaldrich spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...