SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    237
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    position:absolute replacing div

    When hovering over truncated text, I display the full version of the text. The problem with this is that the div is then absolute, and therefore doesn't take up any space, ultimately screwing with the other results.

    Example:
    http://is.gd/SmpXnI

    To see my problem, hover over #7, and #8 disappears.

    How would I fix this so that the other 9 results when hovering in each list are unaffected?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,620
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    jetnine,

    Give this method a look. The behavior is similar to your demo.

    I left some outlines in the CSS so you can see how the boxes are laid out.

    Hope it helps.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>testvast</title>
        <style type="text/css">
    .homebox {             /* 292px total width */
        display:table;
        table-layout:fixed;
        width:272px;
        border:1px solid black;
        background:#383838;
        padding:0 6px 4px 12px;
        margin-left:8px;
        margin-top:6px;
    }
    .homebox ul {
    /*    outline:1px solid blue;  /* TEST OUTLINE */
        list-style:none;
        display:table-cell;
        vertical-align:top;
        width:131px;
        padding:0;
        margin:0;
    }
    .homebox li {
    /*    outline:1px solid gray;  /* TEST OUTLINE */
        background:#383838;
        text-align:left;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        padding:3px 0;
    }
    .homebox li:hover {
        overflow:visible;
        width:auto;
        position:relative;    /* text in first column will overlay text in second column */
    }
    .homebox span {
    /*    outline:1px solid red;  /* TEST OUTLINE */
        display:inline-block;
        width:1.6em;
        font-size:10px;
        text-align:right;
        padding-right:6px;
    }
    .homebox a {
    /*    outline:1px solid magenta;  /* TEST OUTLINE */
        font-family:Arial,Verdana,Sans-serif,serif;
        font-size:11px;
        font-weight:700;
        text-decoration:none;
        color:#bdbdbd;
        background:#383838;
        padding-right:2px;
    }
    
        </style>
    </head>
    <body>
    <div class="homebox">
        <ul>
            <li><span> 1.</span><a href="/?search=Grand+Theft+Auto+V&amp;s=0&amp;n=0">Grand Theft Auto V</a></li>
            <li><span> 2.</span><a href="/?search=Outlast&amp;s=0&amp;n=0">Outlast</a></li>
            <li><span> 3.</span><a href="/?search=Kingdom+Hearts&amp;s=0&amp;n=0">Kingdom Hearts</a></li>
            <li><span> 4.</span><a href="/?search=Tomb+Raider&amp;s=0&amp;n=0">Tomb Raider</a></li>
            <li><span> 5.</span><a href="/?search=Skyrim&amp;s=0&amp;n=0">Skyrim</a></li>
            <li><span> 6.</span><a href="/?search=Grand+Theft+Auto&amp;s=0&amp;n=0">Grand Theft Auto</a></li>
            <li><span> 7.</span><a href="/?search=State+Of+Decay&amp;s=0&amp;n=0">State Of Decay</a></li>
            <li><span> 8.</span><a href="/?search=Minecraft&amp;s=0&amp;n=0">Minecraft</a></li>
            <li><span> 9.</span><a href="/?search=Amnesia&amp;s=0&amp;n=0">Amnesia</a></li>
            <li><span>10.</span><a href="/?search=Rayman+Legends&amp;s=0&amp;n=0">Rayman Legends</a></li>
        </ul>
        <ul>
            <li><span> 1.</span><a href="/?p=req1">Skies Of Arcadia Legends</a></li>
            <li><span> 2.</span><a href="/?p=req1">Shin Megami Tensei If</a></li>
            <li><span> 3.</span><a href="/?p=req1">Blue Stinger</a></li>
            <li><span> 4.</span><a href="/?p=req1">Resident Evil Code Veronica X</a></li>
            <li><span> 5.</span><a href="/?p=req1">Medarot 5</a></li>
            <li><span> 6.</span><a href="/?p=req1">Super Robot Taisen Og Saga Endless Frontier</a></li>
            <li><span> 7.</span><a href="/?p=req1">Lsd Kitty Force</a></li>
            <li><span> 8.</span><a href="/?p=req1">The Legend Of Zelda: Oracle Of Ages</a></li>
            <li><span> 9.</span><a href="/?p=req1">The Adventures Of Batman And Robin</a></li>
            <li><span>10.</span><a href="/?p=req1">Divekick</a></li>
        </ul>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    237
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. Your code is so pretty.

    The bit about "text in first column will overlay text in second column" is not true, but this is fine, as it operates how I wanted it to (breaking out of the div in one line).

    Thanks for your help!

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,620
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by jetnine View Post
    The bit about "text in first column will overlay text in second column" is not true
    Yes, it actually does work. If you will copy the code I posted to a standalone page, then swap the columns (swap the <ul>s), you should be able to tell that the text from the left column overlays that in the right column. You may need to change the padding in the anchor from {padding:1px} to something like {padding-right:6px} or more to make the end of the text from the left column more obvious. It doesn't overlay the full width of the right column unless the text in the left column happens to be long enough to do that. After verifying that the overlay is really happening, comment out {position:relative} and :hover again and you will see that the text from the left column slides under the text in the right column.

    If it does not work on your production page, then perhaps there is other code that is overriding the effect of position:relative.

    Glad it's helpful. Thanks for the feedback.

    Cheers!


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
  •