display:inline bzw. display:none beeinflusst andere HTML-Elemente

[du-it]

Ich bin dabei, eine bestehende HTML-Seite von <table>-Tags zu befreien und dafür <div>s zu verwenden (wo sinnvoll).

Es ist auch ein DIV dabei, welches über einen Click ein-/ausgeblendet werden kann. Sobald ich das DIV verstecke, verändert sich leider auch der Abstand zwischen vorher angezeigten Elementen. Wie kann ich das verhindern? Ich möchte, dass das DIV, was verborgen werden soll verschwindet und nachfolgende Elemente "raufrutschen", aber sich auf der Seite VOR dem zu versteckenden DIV befindliche Elemente überhaupt nicht verändern.

Wie kann ich das erreichen?

Vielen Dank,
Dirk

;Jump

 

[flapo]

Wie machst du das "Verschwinden" des <div>?

 

[matcho]

5 mal gelesen und trotzdem nix verstanden
link oder sowas?
also mein erster gedanke war über float: und clear:,aber ich kann mir leider dein prob garnet vorstellen

 

[flapo]

Du sagst ja, dass dein <div> ausgeblendet wird. Wie wird es ausgeblendet, JS, CSS, whatever?

ODER

Hast du das mit dem ausblenden noch nicht umgesetzt?

 

[du-it]

Das Ausblenden erfolgt in einem JavaScript wie folgt:

document.getElementByID('${id}').style.display = "none";

und das Einblenden:

document.getElementByID('${id}').style.display = "inline";


${id} ist eine Variable (EL = Expression Language in einer JSP).

Das eigentliche Ein- und Ausblenden funktioniert ja auch (wie eingangs beschrieben). Es verbleibt lediglich ein Abstand oberhalb des ausgeblendeten Bereichs (oder rechts daneben).

Grds. ist natürlich noch viel mehr drumherum codiert. Es ist ein Auschnitt aus einer JSP, welche ein TagFile verwendet (also ein selbst programmeirtes Tag). Kern dieses Tags ist eine Tabelle in der "Mitte", welche INPUT-Elemente zeigt. Drumherum wird, je nach Platzierung eines Labels(Caption), entweder eine <tr> vorher oder nachher bzw. eine <td> vorher oder nachher eingefügt.

Im Anhang findet ihr mal den HTML-Code. Ausserdem ist im Zip-file noch ein Screenshot, der den "Versatz" zeigt, der entsteht, wenn ich per Button-Click das DIV verstecke.

 

[du-it]

...wie gesagt. Bitte den Code der letzten vier Postings hintereinander in eine Datei kopieren und im Browser laufen lassen.

Noch einmal die Frage:
Wenn ich auf den letzten "verstecken"-Button klicke, dann ändert sich die Höhe der ersten zeile. Nicht aber der zweiten. Woher kommt es, dass sich die Zeilenhöhe ändert und wie kann ich das verhindern?

(Das der Code bspw. bzgl. der JavaScripts (ggf. auslagern) nicht supertoll ist, ist mir schon klar. Bin ja auch am Aufräumen. ;-) )

Vielen Dank,
Dirk ;ugl

Mod-Edit: Hab deinen Code mal entfernt. -Artemis

 

[Artemis]

Hallo?
Wie wärs, wenn du das einfach mal hochlädst?

 

[du-it]

OK! Problem gelöst.
Zum Einen war der Code nicht ganz valide. habe das mit dem W3C-Validator auf http://www.w3c.org geprüft und behoben.
Weiterhin hatte ich für die Tabellen in den ersten beiden Zeilen die gleiche ID vergeben und auch noch ein JavaScript zu viel heraus geschnitten (beim Verkürzen des Codes, um es hier anzuzeigen).

Ausserdem hatte ich den Fehler gemacht, innerhalb eines <span> ein <table> einzufügen... und <table> ist nunmal ein Block-Element, welches nicht in einem Inline-Element vorkommen darf.

Dirk :lol:

Edit:
Meinst als Zip-Datei? Ich soll ja eigentlich nicht so viel Zeilen hier reinpappen (schmunzel).

Mod-Edit: Zum letzten Mal: Keine Doppelpost. Demnächst werden die bei dir einfach gelöscht.

 

[Artemis]

Nein, als HTML-Datei auf deinen Webspace.