...

View Full Version : hover after: need title text to stay in place



sterlingcooper
04-05-2011, 01:51 AM
Hi,
I'm almost done with my gallery. I've gotten some good help here and now all I have to do is make sure that the title text that appears when I hover over an image in an unordered list stays in place. Currently, each successive title moves further to the right as I go down the list.

It seems to be the ul a:hover:after section that is affecting the display of text.

If I can later I will post an actual live example, but for now I can't upload to my FTP, so all I have is the code.

Any help would be greatly appreciated!



<title>Test Page</title>

<style type="text/css">


#galleryContainer {
position: absolute;
float: left;
width: 950px;
height: 1000px;
background-color:yellow;
margin-top: 150px;

}

#container {
position: absolute;
top: 0px;
left: 0px;
/*background-color: yellow;*/
width: 600px;
}

img {
border: 1px solid gray;
-moz-box-shadow: 3px 3px 4px lightGray;
-webkit-box-shadow: 3px 3px 4px lightGray;
box-shadow: 3px 3px 4px lightGray;

}

#enlargementContainer {
/*position: fixed;*/
margin-top: 15px;
margin-left: 560px;
display: none;
}

#enlargementContainer img {
width: 374px;
height: 468px;
}

#container img {
float: left;
display: block;
width: 52px;
height:65px;
}

#container ul li {

display: block;
margin-right: 10px;
margin-bottom: 10px;
}

#container ul li img {
margin-right: 10px;
margin-bottom: 10px;
}

#header {
float: left;
width: 950px;
height: 150px;
background-color: gray;
}


ul a:hover:after
{
position: absolute;
content: attr(title);
margin-left: 460px;
margin-top: 485px;
width: 200px;
text-decoration: none;
}


a {

text-decoration: none;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
color: gray;
font-size: 15px;
left:460px;
top:485px;
}

#instructions {
position: absolute;
margin-left: 565px;
margin-top: 530px;
width: 400px;
font-family: arial, helvetica, sans-serif;
color: gray;
font-style: italic;
font-size: 13px;

}


</style>



<script type="text/javascript">
window.onload=function(){
var oThumbs = document.getElementById('container').getElementsByTagName('img');
for(i=0; i < oThumbs.length; i++){
oThumbs[i].onmouseover=function(){
document.getElementById('imgEnlarge').src = this.src;
document.getElementById('enlargementContainer').style.display='block';
}
}
}
</script>
</head>

<body>
<div id="header">
<h1>Headline Text</h1>
<p>Body Text Body Text.</p>
</div><!--header-->
<div id="galleryContainer">
<div id="wrapper">
<div id="container">
<ul>

<li><a href="#" title="Background 001"><img src="images/001.jpg" alt="Background 001" /></a></li>
<li><a href="#" title="Background 002"><img src="images/002.jpg" alt="Background 002" /></a></li>
<li><a href="#" title="Background 003"><img src="images/003.jpg" alt="Background 003" /></a></li>
<li><a href="#" title="Background 004"><img src="images/004.jpg" alt="Background 004" /></a></li>
<li><a href="#" title="Background 005"><img src="images/005.jpg" alt="Background 005" /></a></li>
<li><a href="#" title="Background 006"><img src="images/006.jpg" alt="Background 006" /></a></li>
<li><a href="#" title="Background 007"><img src="images/007.jpg" alt="Background 007" /></a></li>
<li><a href="#" title="Background 008"><img src="images/008.jpg" alt="Background 008" /></a></li>

</ul>
<div id="instructions">Right-Click on Image to Download to your Desktop.</div>



</div><!--container-->
<div id="enlargementContainer">
<img id="imgEnlarge" src="images/001.jpg" alt="Background 001" />

</div><!--enlargementContainer-->
</div><!--wrapper-->
</div><!--galleryContainer-->





</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum