Advanced Search

Results 1 to 6 of 6

Thread: Thumbnail Image jumping

  1. #1
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Thumbnail Image jumping

    Hello, I have only learnt HTML and CSS this week and am having great fun with it. I am having a problem however with a linked image, i have entered a code into my stylesheet to enlarge the HTML thumbnail image, this has worked fine apart from the image jumps whenever I hover a cursor over.

    Any help would be appreciated

    Thanks

  2. #2
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    also, the text under the pop-up image is wrapping under each other for some reason, do you know how I can stop this so it appears on 1 line

    This is the code in my HTML

    <a class="thumbnail" href="#thumb"><img src="Landscape 1.jpg" style="position:absolute;bottom:470px;right:220px; width="250px" height="140px" border="0" /><span><img src="Landscape 1.jpg" /><br />Stuart McAlpine Miller.</span></a>

    And this is what is in my CSS

    <style type="text/css">

    .thumbnail{
    position: relative;
    z-index: 0;
    }

    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: rgb(8,8,8);
    padding: 2px;
    left: 6000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: white;
    text-decoration: none;
    font-size: 8pt;
    font-family: Bradley Hand ITC;
    }

    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 5;
    left: 500px; /*position where enlarged image should offset horizontally */

    }

    </style>

  3. #3
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.

  4. The Following User Says Thank You to Medyman For This Useful Post:

    n1kk1 (01-28-2009)

  5. #4
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default file attachments

    Hi, I haven't uploaded it as yet, I have attached the txt and css files

    thanks for your help

  6. #5
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default image attached

    sorry I've just realised I need to attach the image also

  7. #6
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Indenting

    I see what is happening with this now I have set-up a style to indent all text which in turn is indenting the text on my thumbnail image - do you know how I turn of a style in a particular part of the HTML code, I have tried removing it from the head section and just adding to my paragraph section but that still applies it to all

    I hope that made sense, I am new to this - please help its driving me mad!

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
  •