| Autor | Zpráva | ||
|---|---|---|---|
| bob99 Profil |
#1 · Zasláno: 7. 2. 2012, 14:22:47
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> |
||
|
Časová prodleva: 12 let
|
|||
0