|
|
Posted by Susanne West on 11/15/06 16:38
fist things first: it works! koudos! thanks a bunch!
i think i just tangled myself up in all the variations and
tests to get this working! you know how that can be - looking
in all the wrong places...
to the details:
>>>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.
>
>
> You can't set "align=right" on a span, it's invalid HTML for one thing,
> but also doesn't make sense. Right-alignment is something you set on a
> block, which determines how the block lays out the inline things inside
> it.
>
> You can set "align=right" (or 'style="text-align: right"') on the td, or
> you could change that span to a div, and set style=text-align: right on
> that.
>
totally true! switched span to div and got what i wanted.
had not tried that, because that div had yielded to bad results in
a different context, had to switch it to a span and ignored it from
then on.
> [snip]
>>
>>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.
>
>
> Ah, I thought you were talking about the bit that pops up. But I can't
> follow _you_ here, I can't see anything overflowing the <td> in my
> browser (Firefox).
>
>
caveat: we were talking about the third example. that clearly flows
out of the td, even in firefox (just tested that). but as i said, the
second variant was the one of choice. nevermind this bugger...
>>>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').
>
>
> That's because you've set a z-index (of 1) on the thing #shows_3 is
> supposed to be appearing on top of. Actually #shows_3 appears behind it
> but it has a transparent background (the default) which is why you can
> see #shows_3 at all.
>
> Unless I've misunderstood what you're talking about.
>
again: in the version i had attached in the reply(!), i had removed the
z-index of the div below and it still didn't do it. you were right for
the first bits of code i posted.
just for the sake of it, i attach a cleaned version of the code with
the solution of choice and two different amounts of text...
--------------------------------------------------------------
<!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 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>
<div 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>
</div>
</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 2 -->
<tr align=right onMouseOver="toggleDiv('shows_3','1');"
onMouseOut="toggleDiv('shows_3','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_3" 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>
<div align=right>
almost no text
</div>
</div></td>
<td valign="_top" style="padding-left:10">
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
<tr>
<td bgcolor=#cc7777> </td>
<td bgcolor=#cc7777> </td>
</tr>
</table></td>
</tr>
</table>
<br>
<br>
<br>
</body>
</html>
[Back to original message]
|