...

View Full Version : CSS DIV & SPAN Issue



oo0oo
12-29-2005, 05:46 PM
I am trying to make a CSS referenced (No JavaScript) webpage that allows a user to :hover an anchor <A> tag and have information from that anchor tag's <SPAN> be displayed in a <DIV> tag which is in the center of the page. An example is here:
http://z23.org/example.o0o

An example image of what I would like to do is located here:
http://z23.org/example.jpg

Most of the page is complete and the CSS file is halfway completed. I apologize for the extra info in the CSS but most of the <SPAN> and <DIV> info is at the very bottom of the CSS file, which is located here:
http://z23.org/example.css

Basically, the page is pretty much in working order, but when you place your cursor over any of the Some Link Text anchors as opposed to Text Link Here anchors, you will see the <IMG> and <SPAN> info displayed, albeit not where I would like them to. I want the <IMG> and <SPAN> info displayed in the center column. I realize that it has something to do with the position as well as me having a brainfart as to how to get the <SPAN> info into a <DIV> area.

I am sure I have seen CSS perform this before without the use of JavaScript, although I have searched Google and other forums for a day trying to find what I am looking for, and I can't seem to locate anything. If there isn't a CSS solution, JavaScript would be okay to use as an alternative.

Thanks in advance.
oo0oo

_Aerospace_Eng_
12-29-2005, 06:06 PM
You can't do this in just CSS, you will need javascript. CSS can't make text appear on other parts of the page in other elements, it can only make things appear that are within the anchor tag itself.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>EXAMPLE</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<base href="http://z23.org/example.o0o/">
<link rel="stylesheet" type="text/css" href="/example.css" />
<style type="text/css">
/* --------[ IMG Display SPAN Info ]-------- */
a.imgdis {
position: relative;
z-index: 100;
}
a.imgdis:hover {
z-index: 200;
}
a.imgdis span {
display: none;
}
a.imgdis:hover span {
background-color: #e4edf1;
color: #3a454a;
display: none; /*you don't want this showing :hover*/
left: 11px;
margin: 0;
padding: 4px;
position: absolute;
text-align: left;
top: 11px;
}
</style>
<!--[if IE 5]>
<style>#nlist a {height: 1em; float: left; clear: both; width: 100%;}</style>
<![endif]-->
<!--[if IE 6]>
<style>#nlist a {height: 1em;}</style>
<![endif]-->
<script type="text/javascript">
function showInfo(where,what){
document.getElementById(where).innerHTML=document.getElementById(what).innerHTML;
}
</script>
</head>

<body>
<br /><br />
<center>
<table border="0" width="700" cellpadding="0" cellspacing="0" class="topbot">
<tr>
<td>
<center>
<b>BLAH BLAH BLAH SOME HEADER INFORMATION GOES HERE</b>

</center>
</td>
</tr>
</table>
<br class="br8" />
<table border="0" width="700" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
<div id="nlist">

<ul>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo0')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="empty"></span><span id="maininfo0"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo1')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo1"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo2')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo2"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo3')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo3"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo4')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo4"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo5')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo5"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
</ul>
</div>
</td>

<td width="8"><img src="/img/blank.gif" width="8" height="8" border="0" alt="" /></td>
<td width="284" class="cendis">
<div id="maininfo"></div>
</td>
<td width="8"><img src="/img/blank.gif" width="8" height="8" border="0" alt="" /></td>

<td width="200">
<div id="nlist2">
<ul>
<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo6')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo6"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo7')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo7"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo8')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo8"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo9')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo9"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis" onmouseover="showInfo('maininfo','maininfo10')" onmouseout="showInfo('maininfo','empty')">Some Link Here<span id="maininfo10"><center><img src="/example.jpg" alt="" /></center><br /><br /><b>Bold</b>: <br /> * some text</span></a></li>

<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
<li><a href="#" class="imgdis">Text Link Here</a></li>
</ul>

</div>
</td>
</tr>
</table>
<br class="br8" />
<table border="0" width="700" cellpadding="0" cellspacing="0" class="topbot">
<tr>
<td>
<center>

blah blah blah some other footer information goes here.
</center>
</td>
</tr>
</table>
</center>
<br /><br />
</body>
</html>

oo0oo
12-29-2005, 07:28 PM
This worked as described and I appreciate your assistance. :thumbsup:

Thanks again,
oo0oo

rmedek
12-29-2005, 07:36 PM
There are CSS ways to do this… I coded this as an example for someone else some time ago:

http://richardmedek.com/temp/example4.htm

For what you're doing I think the JS is the way to go but just letting you know it's possible. :)

_Aerospace_Eng_
12-30-2005, 04:02 AM
Would be possible but that image will appear in the same spot every time and the layout the op is using would center itself on the screen and the top and left values wouldn't line up because its not the same on everyone's resolution.

rmedek
12-31-2005, 06:58 AM
Sure it would. If the main container was the relative container all of the images would be placed relative to it, so it would compensate for any centering or moving around.

Unless I'm missing something here? :confused:

_Aerospace_Eng_
12-31-2005, 10:20 PM
Hmm yeah I see what you are saying. Kinda forgot about the position:relative; thing.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum