Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts

    hover after: need title text to stay in place

    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!

    Code:
     <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>
    Last edited by sterlingcooper; 04-05-2011 at 02:53 AM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •