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

04-05-2011, 02:51 AM
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;
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;

#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;

#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;



<script type="text/javascript">
var oThumbs = document.getElementById('container').getElementsByTagName('img');
for(i=0; i < oThumbs.length; i++){
document.getElementById('imgEnlarge').src = this.src;

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

<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>

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

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