nicht angemeldet
Teile der Seite sollen au-/zuklappen
Hallo, hey darf ich tatsächlich die erste Frage im neuen Forum stellen?! Also los geht's
Ich kenne mich zwar mit HTML aus, DHTML und layer sind mir jedoch noch fremd. Jetzt möchte ich folgendes machen:
Eine Adress-Liste zeigt zu Beginn nur eine Liste von untereinander stehenden Namen. Klickt man auf den Namen, klappt sich ein Bereich mit weiteren
Infomationen (Mail, Homepage, Telefon, etc) nach unten aus. Dabei soll nach Möglichkeit der darunterliegende Name nicht verdeckt werden. Der neu
Bereich soll also eingeschoben werden; weiter unten liegende Namen verschieben sich nach unten.
Vorher
+-----------------------------+
| Hans Wurst
+-----------------------------+
| Anna Nass
+-----------------------------+
| Claere Grube
+-----------------------------+
Nach Klick auf Hans Wurst
+-----------------------------+
| Hans Wurst
| - - - - - - - - - - - - - - |
| Tel: 12345 / 87890
| Mail: hans@wurst.de
|
+-----------------------------+
| Anna Nass
+-----------------------------+
| Claere Grube
+-----------------------------+
Im Moment liegt alles schon als Tabelle (also so, wie wenn alles ausgeklappt wäre) vor. Ich habe die Zusatzinfos mit layer-Tags umklammert, die mit
JavaScript visible=true/false geschaltet werden.
Problem: a)Layer überdecken (im Beispiel wäre Anna Nass nicht zu sehen, weil die aufgeklappten Infos von Hans Wurst sie überlagern) und verscheiben
nicht. b)Layer erscheinen nicht direkt unterhalb des Eintrags, sondern immer oben links.
Wer kann mir sagen, wie ich soetwas hinbekomme (wie gesagt, von DHTML hab ich noch wenig Ahnung). Bei Browsern, die mit den Angaben nichts
anfangen können, und bei denen der Benutzer nicht auf-/zuklappen kann, soll die Liste einfach komplett (also mit allen Angaben) zu sehen sein.
-
Hallo Markus
Hier ein Beispiel, dass mit Mozilla und IE 5 funktioniert.
<table border="1">
<tr>
<td>
<span onmouseover="document.getElementById('lay1').style.display='block'" onmouseout="document.getElementById('lay1').style.display='none'">Hans Wurst</span>
<div style="display:none" id="lay1">
text text text<br>
text text text
</div>
</td>
</tr>
<tr>
<td>
<span onmouseover="document.getElementById('lay2').style.display='block'" onmouseout="document.getElementById('lay2').style.display='none'">Anna Nass</span>
<div style="display:none" id="lay2">
bla bla bla<br>
bla bla bla
</div>
</td>
</tr>
</table>
Mit NN 4 funktioniert das vermutlich nicht. Dort solltest Du keine Tabelle verwenden sondern absolut positionierte Divs, die du dann entsprechend verschieben kannst.Gruß
Daniel
-
<table border="1">
<tr>
<td>
<span onmouseover="document.getElementById('lay1').style.display='block'" onmouseout="document.getElementById('lay1').style.display='none'">Hans Wurst</span>
<div style="display:none" id="lay1">wenn du jetzt statt display visibility nimmst, soll das angeblich sogar mir Opera 5 klappen :)
-
Hallo Kai
Mit visibility:hidden wird der DIV zwar auch ausgeblendet, aber der benötigte Platz wird trozdem frei gehalten.
Gruß
Daniel
-
Hallo Kai
Mit visibility:hidden wird der DIV zwar auch ausgeblendet, aber der benötigte Platz wird trozdem frei gehalten.
schon klar, aber idr. mach das keinen großen Unterschied.. in diesem Falle schon, wie ich beim Testen feststellte :)
..von wem die Leute bei Opera geritten wurden, als sie display: bei diesem Kram weggelassen haben, wüsste ich zu gerne....:/
p.s. konqueror (2.2.1) frisst beide Versionen, rallt aber das onMouseOut nicht so ganz
-
-
-