Topic: Problem with image and text positioning using link_to with image_tag

Hi all,
I have a problem with the fact that I really don't understand CSS and HTML very well although I'm learning fast.

I have a menu of links that don't do anything yet. (That'll come later)

The problem is I am trying to display a thumbnail image that will enlarge on roll over using pure css in a link_to tag that also displays text.

The following code does the job but has the unfortunate effect of obscuring the text that is displayed whilst it is in it's default thumbnail state (The fact that text is obscured when the mouse is rolled over, is not an issue for me).

I would be really grateful if someone could point me in the right direction as to how best to stop the text from being obscured.

<%for catalogue in @catalogues do%>
  <ul>
    <li>
      <p class = "thumbs">
    <%= link_to(image_tag(catalogue.thumbnail_url) + catalogue.name)-%>
      </p>
    </li>
  </ul>
<%end%>

with the following in my css
.thumbs a {
    display:block;
    width:20px;
    height:20px;
    line-height:25px;
    position:relative;
    z-index:1;
}
.thumbs a img {/* original img is 150x150px resized to 25x25 */
    width:20px;
    height:20px;
    position:absolute;
}
.thumbs a:hover {
    position:relative;
    overflow:visible;
    z-index:1000;
}
.thumbs a:hover img {
    width:75px;
    height:75px;
}

As I said, I would be really gratefull for any help.

It just occured to me that it might help if I added the result of the view page source from Firefox so here it is

<!-- J.G.W. 01-10-2008 store_site_store.html.erb Layout for the main store -->

<!-- Required Doc Type for use with liquid layout css -->
<!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" xmlns:v="urn:schemas-microsoft-com:vml" >
<!-- End of requirement for liquid layout css -->

    <head>
        <link rel="icon" type="image/ico" href="/public/favicon.ico"/>
        <link href="/stylesheets/liquid3col.css?1227098791" media="all" rel="stylesheet" type="text/css" /><!-- <label id="code.slt"/> -->
        <!-- END:stylesheet -->
        <script src="/javascripts/prototype.js?1225498323" type="text/javascript"></script>

<script src="/javascripts/effects.js?1225498323" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1225498323" type="text/javascript"></script>
<script src="/javascripts/controls.js?1225498323" type="text/javascript"></script>
<script src="/javascripts/application.js?1225498323" type="text/javascript"></script>
        <title></title>
    </head>
   
    <body>
        <div id="header">

           
    <p>
        Site title and banner logo will go here
    </p>
    <div id="roundbar-blue">
        <ul>
            <li class="active"><a href="#">Home Page</a></li>
            <li class="#"><a href="#">Our Products</a></li>
            <li><a href="#">About Us</a></li>

            <li class="#"><a href="#">Contact Us</a></li>
   
        </ul>
    </div>

        </div>
        <div class="colmask threecol">
            <div class="colmid">
                <div class="colleft">
                    <div class="col1">

                       




<h1>Main Content</h1>
<p>This will be your home page and will be replaced with product listings for chosen catalogue</p>




                    </div>
                    <div class="col2">
                       
    <p>
        Note:- Need to sort out image and menu styles
    </p>

       
       
            <ul>
                <li>
                    <p class = "thumbs">
                        <a href="/cloud_city_store"><img alt="Image" src="/images/image.jpg?1226614919" />Jewellery</a>                    </p>
                </li>
            </ul>
       
            <ul>
                <li>

                    <p class = "thumbs">
                        <a href="/cloud_city_store"><img alt="?1226752291" src="/images/?1226752291" />Ladies Wear</a>                    </p>
                </li>
            </ul>
       
            <ul>
                <li>
                    <p class = "thumbs">
                        <a href="/cloud_city_store"><img alt="?1226752291" src="/images/?1226752291" />test 3</a>                    </p>

                </li>
            </ul>
       
   

    <ul>
        <li>
            <script type="text/javascript">eval(decodeURIComponent('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%73%69%74%65%6f%77%6e%65%72%40%63%6c%6f%75%64%63%69%74%79%73%69%74%65%73%2e%63%6f%2e%75%6b%3f%73%75%62%6a%65%63%74%3d%53%75%70%70%6f%72%74%25%32%30%71%75%65%73%74%69%6f%6e%22%3e%53%69%74%65%20%4f%77%6e%65%72%3c%2f%61%3e%27%29%3b'))</script>
        </li>
    </ul>

                    </div>

                    <div class="col3">
                       
    This is rendered in the index.html.erb
    Shopping cart, admin menu and affiliate links go here
        <p>Admin Menu (This should only appear when you are logged in. Log in links have not been implemented yet</p>
       
        <ul>
            <li> <a href="/admin/">Site Administration</a></li>
        </ul>

                    </div>

                </div>
            </div>
        </div>
        <div id="footer">
           
    <p>
        <a href="http://validator.w3.org/check?uri=referer"><img
            src="http://www.w3.org/Icons/valid-xhtml10-blue"
            alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>

        <a href="http://jigsaw.w3.org/css-validator/">
            <img style="border:0;width:88px;height:31px"
                src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
                alt="Valid CSS!" /></a>

               
        <a href="http://www.w3.org/WAI/WCAG1AAA-Conformance"
            title="Explanation of Level Triple-A Conformance">
            <img height="32" width="88"
            src="http://www.w3.org/WAI/wcag1AAA-blue"
            alt="Level Triple-A conformance icon,
            W3C-WAI Web Content Accessibility Guidelines 1.0"></a>


    </p>

        </div>
    </body>
   
</html>


Cheers

James

Last edited by jamesw (2008-11-19 10:15:29)

What you want and what you need are too often not the same thing!
When your head is hurting from trying to solve a problem, stop standing on it. When you are the right way up you will see the problem differently and you just might find the solution.
(Quote by me 15th July 2009)

Re: Problem with image and text positioning using link_to with image_tag

You can get the basic logic for thumbnails with JavaScript at: http://javascript.about.com/gi/dynamic/ … /lightbox/

Save the .js files in your public/javascripts directory, then use the <%= javascript_tag(jsname) %> method. You want to use JavaScript for the majority of these tasks when doing that sort of thing. Let me know if you need any more help.

Re: Problem with image and text positioning using link_to with image_tag

jmbrink26

Sorry it's taken so long to reply.

Thank you so much for the info and the offer.
I may well take you up on it

James

What you want and what you need are too often not the same thing!
When your head is hurting from trying to solve a problem, stop standing on it. When you are the right way up you will see the problem differently and you just might find the solution.
(Quote by me 15th July 2009)