|
|
Posted by Susanne West on 11/15/06 10:59
hi
thanks for your effort!
i followed your suggestions but the problem remains (IE6)
>>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 the first version, also set position: relative on div#shows_1.
> z-index only applies to positioned elements, which is why your z-index:
> 10 wasn't doing anything.
jep. but that version has enough space anyway..
>>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!
>
> In the second example, set position: absolute on div#shows_2. That takes
> it out of the normal flow (so the table doesn't grow to fit it in), and
> also puts it on top (positioned things are drawn on top of normal-flow
> descendents anyway, no need to set z-index).
>
right, but the larger text still disrespects the span align=right and
alings to the left of the cell. if i could get the text right-aligned,
that would be the solution i'd go for.
>>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...
>
>
> Set position: relative on div#shows_3 to get the z-index working (or
> just set position: absolute and don't bother setting z-index).
>
> It overflows the containing cell because you use <nobr> (which amounts
> to whitespace: nowrap) and you've set a width. There just isn't room for
> the text and you've told the browser not to break lines, so it
> overflows.
can't follow you here. i was referring to the cell that contains the
larger amount of text 'alignment of both...'). that has no NOBR and
is encapsulated in a div which should result in normal textflow
within the div.
> If you set position: absolute, get rid of z-index which is no longer
> necessary (absolute things go on top anyway), and remove width: 100,
> then the div gets a shrink-to-fit width (that's what absolutely
> positioned things with auto width do), which means it grows to the right
> size for the text.
not true. there's a <div><div></div><div></div></div> structure
in the third example and i still get the first encapsulated div on
top of the second (text on top of 'details').
> Incidentally you should use "100px" not just "100".
jup. true.
updated code
-------------------------------------------------------------------
<!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:500;
position:relative; 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:100px;
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="position:absolute; display:none;
width:100px; 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="position:absolute; display:none;
border-top:1px solid #db2b2b; border-bottom:1px solid #db2b2b;
background-color:#cccccc; 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]
|