Autor Zpráva
bob99
Profil
Do klikatelného odkazu s nastavenou výškou jsem vložil absolutně poziciovaný div. V tom problém není. Ale potřeboval bych na absolutně poziciovaném odkazu vytvořit nějaký tooltip (např. http://flowplayer.org/tools/demos/tooltip/any-html.html) a to už se mi nedaří (nejspíše to blokuje overflow: hidden na prvku...). Jde to nějak vyřešit? Díky

Zde je ukázka části kódu:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="text/javascript" src="../css/jquery.js"></script>
<script src="../css/tooltip/jquery.tools.min.js" type="text/javascript"></script>
 
 
<style type="text/css"> 
table {
    border-collapse:collapse;
    margin: 50px auto;
}
td {
    padding: 0px;
    border: 1px solid red;
    vertical-align:middle;
    height: 150px;
    width: 100px;
    overflow:hidden /* tohle nezapomenout - oriznete tim nize nastaveny velky padding */
}
td a {
    display:block;
    padding:2000px; /* vyrobite si dostatecne velky padding */
    margin:-2000px; /* a stejnou hodnotu pouzijete jako zaporny margin */
    text-decoration:none;
    color:#F60;
    zoom:1 /* zapneme hasLayout pro IE 6 */
}
td a:hover {
    background: #000;
    color:#fff;
}
.vnejsidiv {
     POSITION: relative;  
}
.test {
     white-space: nowrap; 
     overflow: hidden; 
     background-color: #FFD9DA ; 
     BORDER-TOP: green 1px solid;
     BORDER-BOTTOM: green 1px solid;  
     position: absolute; 
     left: 0px; 
     width: 100px; 
}
 
</style>
 
<style type="text/css"> 
#download_now:hover {
    background-position:0 -44px ;        
}
 
/* clicked state */
#download_now:focus {
    background-position:0 -88px;
}
/* tooltip styling */
.tooltip {
    display:none;
    background:url(../css/tooltip/white_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
    z-index: 999;
}
/* a .label element inside tooltip */
.tooltip .label {
    color:yellow;
    width:35px;
}
 
.tooltip a {
    color:#ad4;
    font-size:11px;
    font-weight:bold;
}
</style>
 
<script>
     // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
     $(document).ready(function() {
     
     $("#download_now").tooltip({ 
          effect: 'slide'
           });
     });
</script>
 
</head> 
<body>
<table>
     <tr>
        <td>
             <div class="vnejsidiv">
                  <div class="test" style="height: 60px; top: 40px;">
                       <a style="height: 60px;" href="" id="download_now">Tooltip1</a>
                         <div class="tooltip">
                             <a href="/3.2/">What's new in 3.2</a>
                             Ič haliví klaskonivec bartí rynt hostěduš dyže svě škovenek
                              <a href="/3.2/">What's new in 3.2</a>
                         </div>
                    </div>
               </div>
               <a style="height: 150px;" href="">Den1</a>
          </td>
          <td>
             <div class="vnejsidiv">
                  <div class="test" style="height: 60px; top: 80px;">
                       <a style="height: 60px;" href="" id="download_now">Tooltip2</a>
                         <div class="tooltip">
                             <a href="/3.2/">What's new in 3.2</a>
                             Ič haliví klaskonivec bartí rynt hostěduš dyže svě škovenek
                              <a href="/3.2/">What's new in 3.2</a>
                         </div>
                    </div>
               </div>
               <a style="height: 150px;" href="">Den2</a>
          </td>
    </tr>
</table>
</body>
</html>

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: