|
|
Posted by Susanne West on 11/14/06 08:49
hi...
i'm trying to sort out a problem with a table containing multiple
entries and one div-overlay for each entry (let's call it entry-
details), and i just can't get it to work properly:
in one version i tried, the div that i'm showing/hiding scales the
whole table up and down because it thinks it's part of the regular text.
that i definately don't want!
the second version i tried looks fine somehow, but the z-index seems
to be completely disrespected and then the text seems to be flowing
out of the containing cell if it becomes too long...
what the hell am i doing wrong??? it seems like such a simple problem,
but every idea i come up brings in new problems.
any help is deeply appreciated (see testcase below).
---------------------html starts here---------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function toggleDiv(divId,onoff) {
var db = MM_findObj(divId);
if (onoff == 1){
db.style.display = 'block';
} else {
db.style.display = 'none';
}
}
//-->
</script>
</head>
<body>
<table width=100% border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="13"> </td>
<td align="left">
<table width="96%" border="0" cellspacing="0">
<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>
<!-- variant 1 -->
<tr align=right onMouseOver="toggleDiv('shows_1','1');"
onMouseOut="toggleDiv('shows_1','0');">
<td width="500" align=left bgcolor=#cccccc><strong>mouseover
here to open details</strong></td>
<td class=bar_l2_small valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500;">
<div align=right style="z-index:1; width:350;
position:absolute; right:0; border:1px;">
this is basically the 'look' of what i'd like to achieve, with the
drawback, that i have to
manually force the text to the right. if i don't do that, the text
will show up above the div,
although z-index is set. the second drawback is, that if the
reserved space is too small, this
text will hang down into the next entry. both problems are made
visible in the last example at
the bottom...
</div>
<div id="shows_1" style="display:none; width:100;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div contains </nobr><br>
<nobr>details</nobr><br>
</strong>
</div>
</div></td>
<td valign="_top">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>
<!-- variant 2 -->
<tr align=right onMouseOver="toggleDiv('shows_2','1');"
onMouseOut="toggleDiv('shows_2','0');">
<td width="500" bgcolor=#dddddd align=left><strong>mouseover
here to open details</strong></td>
<td valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500; border=1px
solid #999999">
<div id="shows_2" style="display:none; width:100;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should </nobr><br>
<nobr>open over the text</nobr><br>
<nobr>and not scale the table</nobr><br>
</strong>
</div>
<span align=right>
<strong>this text and should be right-aligned and the details should
open over the text, without the whole table scaling up</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron i
oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
<br>
</span>
</div></td>
<td valign="_top" style="padding-left:10">second try with
only one div. sadly, the whole table is scaled... bad, bad, bad...
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>
<!-- variant 3 -->
<tr align=right onMouseOver="toggleDiv('shows_3','1');"
onMouseOut="toggleDiv('shows_3','0');">
<td width="500" align=left bgcolor=#cccccc><strong>mouseover
here to open details (second variant)</strong></td>
<td class=bar_l2_small valign=top> </td>
</tr>
<tr>
<td width="500" valign=top>
<div style="position:relative; top:0; left:0; width:500;">
<div align=right style="z-index:1; width:500;
position:absolute; right:0; border:1px;">
<strong>alignment of both elements is fine, but the text is still
over the detail-div and flows out of the containing cell-box</strong><Br>
A Olórin i yáresse Mentaner i Númeherui Tírien i Rómenóri, Maiaron
i oiosaila Manan elye etevanne Nórie i malanelye? Ú-reniathach i amar
galen I reniad lín ne môr, nuithannen In gwidh ristennin, i fae
narchannen I Lach Anor ed ardhon gwannen Calad veleg, ethuiannen. Melme
nóren sina núra ala Eäro. Ilfirin nairelma ullume nucuvalme Nauva i
nauva.A Elbereth Gilthoniel, silivren penna miriel o menel aglar
elenath, na-chaered palan diriel o
</div>
<div id="shows_3" style="display:none; width:100;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; z-index:10; padding: 0 5 0 5;">
<strong>
<nobr>this div should open over the text</nobr><br>
<nobr>bla</nobr><br>
<nobr>bla</nobr><br>
</strong>
</div>
</div></td>
<td valign="_top" style="padding-left:10">in here, the
problems of the first entry are made visible: the detail-div lies below
the text, although z-index is set. The second problem: if the text gros
too big, it flows out of the containing cell...
</td>
</tr>
</table></td>
</tr>
</table>
<br>
<br>
<br>
</body>
</html>
Navigation:
[Reply to this message]
|