nicht angemeldet
Tabelle im DIV und display:none funktioniert nicht
Wieso funktioniert der folgende HTML-Code nicht, wie er soll?
Ebenso wie der Text "Tabelle:" soll natürlich auch die Tabelle (und der Button) im DIV erscheinen und erst beim Klick auf den Button sichtbar sein.
<html>
<head></head>
<body>
<table>
<tr>
<td>
Text
</td>
<div id="more" style="position:absolute; top:100pt; left:100pt; width:100pt; height:100pt; display.none; overflow:visible; background-color:yellow; border-style:solid; border-width:1pt; border-color:red;">
Tabelle:<br/>
<table border="1">
<tr>
<td>
BingoBongo!
</td>
</tr>
</table>
<br/>
<input type="button" name="hideDiv" value="close" onClick="javascript:document.getElementById('more').style.display='none'"/>
</div>
<td>
<input type="button" name="showDiv" value="..." onClick="javascript:document.getElementById('more').style.display='inline'"/>
</td>
</tr>
</table>
</body>
</html>
-
Hallo!
Wieso funktioniert der folgende HTML-Code nicht, wie er soll?
display:none; und nicht display.none;
LG maiskolben
-
Hallo!
Wieso funktioniert der folgende HTML-Code nicht, wie er soll?
display:none; und nicht display.none;
LG maiskolben
Danke,
Aber das ändert nichts am Problem. ...nicht wirklich im Browser ausprobiert, häh? ;-)
Schick doch mal den Code an deinen Browser. Dann siehst Du, dass die Tabelle einfach auf die Seite geklatscht wird, obwohl sie ja erst nach dem Button-Klick IM DIV erscheinen soll.
-
Hallo!
Aber das ändert nichts am Problem. ...nicht wirklich im Browser > ausprobiert, häh? ;-)
Schick doch mal den Code an deinen Browser. Dann siehst Du, dass die > Tabelle einfach auf die Seite geklatscht wird, obwohl sie ja erst nach > dem Button-Klick IM DIV erscheinen soll.
Warum packst Du Deine styleangaben nicht in eine CSS?
Und ich kann nichts mit dem geposteten anfangen, ich weiß ja noch nicht mal was in div id="more" steht!
Es klappt aber sowieso nicht so wie Du Dir das vorgestellt hast.
Um einen Div-Bereich bei klick anzeigen zu lassen, könntest Du mit der Pseudoklasse div:active rumprobieren.Selfhtml ist Dein Freund, so schwer ist es nicht! ;)
LG maiskolben
-
Hell-O!
display:none; und nicht display.none;
Aber das ändert nichts am Problem. ...nicht wirklich im Browser ausprobiert, häh? ;-)Oh doch. Und es funktioniert, zumindest wird da was ein- und ausgeblendet.
Dann siehst Du, dass die Tabelle einfach auf die Seite geklatscht wird, obwohl sie ja erst nach dem Button-Klick IM DIV erscheinen soll.
Du hast soeben die Nachteile des Tabellenlayouts entdeckt. Folgendes funktioniert bestens:
<body> <h1>Testseite</h1> <div id="more" style="position:absolute; top:100pt; left:100pt; ..."> <h2>Die Tabelle:</h2> <table border="1"> <tr> <td>BingoBongo!</td> </tr> </table> <p><input type="button" name="hideDiv" value="close" onClick="javascript:document.getElementById('more').style.display='none'"/></p> </div> <p><input type="button" name="showDiv" value="show" onClick="javascript:document.getElementById('more').style.display='block'"/></p> </body>Und übersichtlicher ist es auch noch :-)
Siechfred
--
Ich bin strenggenommen auch nur interessierter Laie. (molily)
Kabelkuddelmuddel || Steuerfreie Geburtsbeihilfen? || RT 221 Erfurt-Altstadt i.V.-
Hi Siechfried.
Stimmt. Das klappt prima!
Was allerdings bedeutet, dass scheinbar die darumliegende Tabelle der Störfaktor ist. Ich versuche ohnehin gerade, die bestehenden Tabellen zu entsorgen und dafür DIVs etc. einzusetzen. Habe nur noch keine richtige Erfahrung damit, wie ich soz. die Tabelle "nachbilden" kann/sollte. Ich meine, Tabellen haben ja grds. ihre Daseinsberechtigung, sollten halt nur nicht als Layout-Mittel verwendet werden. Da ich aber aus einer unbekannten Menge von Werten max. 3 in Tabellenform (drei Spalten) darstellen möchte (sind es mehr, soll eine weitere Spalte mit einem Button erscheinen, durch den man ein DIV sichtbar machen kann, dass alle (weiteren) Werte anzeigt, also soz. wie ein Popup-Dialog), wäre eine darumliegende Tabelle doch in Ordnung, gelle!?Danke
Dirk-
Hell-O!
Da ich aber aus einer unbekannten Menge von Werten max. 3 in Tabellenform (drei Spalten) darstellen möchte (sind es mehr, soll eine weitere Spalte mit einem Button erscheinen, durch den man ein DIV sichtbar machen kann, dass alle (weiteren) Werte anzeigt, also soz. wie ein Popup-Dialog), wäre eine darumliegende Tabelle doch in Ordnung, gelle!?
Dein Code sah halt wie eine Layouttabelle aus :-)
Aber egal. Du möchtest also Spalten hinzufügen? Das dürfte schwierig werden, da du so viele td in deine Tabelle einfügen müsstest wie du Zeilen hast. Oder willst du einfach nur zusätzlich zur eigentlichen (statischen) Tabelle eine weitere als "Infobox" anzeigen? Dann folge dem Hinweis von "OhneNamen".
Siechfred--
Ich bin strenggenommen auch nur interessierter Laie. (molily)
Kabelkuddelmuddel || Steuerfreie Geburtsbeihilfen? || RT 221 Erfurt-Altstadt i.V.
-
-
...hab herausgefunden, dass das ganze Problem das war, dass ich den Code des <DIV>s nur in ein <td>...</td> hätte packen müssen.
Tststs... :-)
Vielen Dank.
Jetzt muss ich nur noch zusehen, dass ich die Größe des DIV dynamisch machen kann. Soll heissen, das DIV soll automatisch so groß werden, dass der Inhalt vom Rahmen des DIV "umschlossen" wird.
overflow:visible; macht es im IE so wie ich will, aber der Firefox belässt die Abmessung des DIVs und vergrößert diese nicht, wenn der Inhalt größer ist.
Beim IE fiel mir dafür auf, dass dass das DIV zwar "on top" erscheint, aber wenn ein <form>-Element an dieser Stelle ist, liegt das <form>-Element soz. auf dem DIV. ???
Gruß
Dirk-
Jetzt muss ich nur noch zusehen, dass ich die Größe des DIV dynamisch machen kann. Soll heissen, das DIV soll automatisch so groß werden, dass der Inhalt vom Rahmen des DIV "umschlossen" wird.
overflow:visible; macht es im IE so wie ich will, aber der Firefox belässt die Abmessung des DIVs und vergrößert diese nicht, wenn der Inhalt größer ist.
Beim IE fiel mir dafür auf, dass dass das DIV zwar "on top" erscheint, aber wenn ein <form>-Element an dieser Stelle ist, liegt das <form>-Element soz. auf dem DIV. ???
...habt ihr diesbezüglich eine Idee?
Danke
Dirk
-
-
-
-
-
Hallo Dirk,
<table>
<tr><tr> darf kein <div> enthalten, wenn du schon Tabellen fürs Layout missbrauchst, dann halte dich wenigstens an die Regeln und tu das <div> anständig in ein <td>.
<div id="more" style="position:absolute; top:100pt; left:100pt; width:100pt; height:100pt; display.none; overflow:visible; background-color:yellow; border-style:solid; border-width:1pt; border-color:red;">
style-Angaben gehören entweder ins externe Stylesheet oder in den <head>-Bereich, aber niemals ins Element selbst.
pt ist keine geeignete Maßangabe für das Ausgabemedium Computer, nimm stattdessen die flexiblen Angaben em und %. Wenns sein muss dann auch px. pt kannst du im Druckstylesheet verwenden.
Und die Angabe heißt display:none, das hätte dir aber wahrscheinlich auch der CSS-Validator des W3C gesagt.</div>
</tr>
</table>Wenn der Quelltext dann valide ist (d.h. du sollst den Validator benutzen), dann ist wahrscheinlich auch dein Fehler verschwunden.
Desweiteren will ich dich noch darauf hinweisen, dass man in deiner Version mit deaktiviertem Javascript die Tabelle nie sehen wird.gruss,
OhneName