Results 1 to 5 of 5

Thread: CSS Popup, anyway to auto position?

  1. #1
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Popup, anyway to auto position?

    Hi all

    i have an issue with a little CSS code i use to pop up information about a product from its thumbnail image.

    it works fine in all of site, apart from when i code it into a DD script, this one here:
    http://www.dynamicdrive.com/dynamici...tentslider.htm

    easiest way to describe this is visually, so if you take a look at :

    http://www.jmcsecurity.co.uk/test.asp

    and click on the tab "top sellers"

    then mouse over some of the images, you'll notice the one's around the edges hide most of the popup.

    so i was wondering if anyone either knows away around this? by using CSS to auto position the popup?

    heres my CSS for the pop up:

    Code:
    <Style>
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    z-index: 100;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: white;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    word-wrap:break-word;
    width:400px;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 10px;
    left: 0px; /*position where enlarged image should offset horizontally */
    }
    </style>
    if you need any more info, please let me know.

    Any advice welcome
    Last edited by isntworkdull; 09-25-2009 at 07:47 PM.

  2. #2
    Join Date
    Jul 2009
    Location
    Coquitlam BC Canada
    Posts
    46
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    looks ok to me.

  3. #3
    Join Date
    Sep 2009
    Location
    inside a computer
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Try adding

    z-index:100;

    to your thumbnail class. As far as positioning it, use or study the balloontip script or

    margin:auto;

    in CSS (which may not be ideal).

  4. #4
    Join Date
    Jul 2009
    Location
    Coquitlam BC Canada
    Posts
    46
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    oh..that problem...sorry, I'm not that experienced.so..I can't help you.

  5. #5
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hi,

    thanks for the suggestions, but nothing seems to be working...

    could it have something to do with the fact it is inside the featured content slider which has this code:

    Code:
    .sliderwrapper4{
    position: relative; /*leave as is*/
    overflow: hidden; /*leave as is*/
    border: 0px solid navy;
    border-bottom-width: 0px;
    width: 572px; /*width of featured content slider*/
    height: 715px;
    padding:0px;
    }
    is that hidding the popup overflow?

    sorry, i'm not CSS expert.

    thanks
    James

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
  •