SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    430
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    text under picture ... not

    I'm pretty inexperienced still, so you will be hearing a lot from me over the next few days as I try to finish up this website for Sweetiepies Inc. On my products page, I planned to have a thumbnail, with a title under the picture, of each type of chocolate pizza which turns into a larger image with a description when the mouse hovers over it. So far so good, except for the second thumbnail from the left on the top row - for some reason part of the title has snuck up behind the image. This didn't happen for any of the others, so for the life of me, I can't figure out what went wrong. I have attached a screen shot of the page in question. Note: the images are just dummy images right now (all the same), but I will change that soon. Could you please give me some idea of what issues to look for in my coding?
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It's a bit hard to tell without the code that goes with it

    You haven't forgotten something simple like forgetting to put a break (<br>) before the text have you ?

  3. #3
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    430
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, you were right. Thanks. I'm curious, though. Exactly the same code was repeated for each thumbnail so why didn't this problem show up with the other ones? By the way, I added the <br> to all the sections before I copied the code below. Nothing else was changed.

    My html code:
    HTML Code:
    <div id="crispndeliscious" class="pizza"> <a href="images/Pizza1Large.htm"><img class="thumbnail" src="images/Pizza1Small.jpg" 
    alt="Ebony and Ivory Pizza" width="100" height="100" /><span><img 
    src="images/Pizza1Large.jpg" alt="Rocky Road Pizza Ingredients" width="400" 
    height="400"/></span><br>Crisp and Deliscious Pizza</a></div>
    My CSS code:
    Code CSS:
    .pizza:hover, #doityourself {background-color: transparent;
    			z-index: 50;}
     
    .pizza span, #doityourself span{ /*CSS for enlarged image*/
    		position: absolute;
    		left: -1000px;
    		visibility: hidden;
    		text-decoration: none;}
     
    .pizza span img, #doityourself span img{ /*CSS for enlarged image*/
    		border: 2px solid #4A2E00;}
     
    .pizza:hover span{ /*CSS for enlarged image on hover*/
    		visibility: visible;
    		top: 0;
    		left: 60px; /*position where enlarged image should offset horizontally */}

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm curious, though. Exactly the same code was repeated for each thumbnail so why didn't this problem show
    At a guess I'd say it was because there just happened to be more room for that piece of text so it didn't wrap but that's just a guess

    I'd need to see the whole page to give proper answer


Bookmarks

Posting Permissions

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