Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite

Diskutiere Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite im HTML Forum im Bereich Programmierung; Hallo zusammen, ich habe folgendes Problem: ich möchte Buttons auf meiner Seite einbauen, welche einzelne Elemente ändern: Dadurch wird das...
B

Blvcksquid

Member
Beiträge
17
Punkte Reaktionen
0
Hallo zusammen,

ich habe folgendes Problem:

ich möchte Buttons auf meiner Seite einbauen, welche einzelne Elemente ändern:

<button type="button" onclick='document.getElementById("box3").innerHTML ="Dieser Text ersetzt einen längeren Text."'>

Dadurch wird das Element mit der Id box3 kleiner, allerdings verschieben sich darunter liegende Elemente in die enstehende Lücke.
Gibt es eine Möglichkeit, Elemente so festzulegen, das sich diese "statisch" verhalten, also nicht verschieben?

LG Blvcksquid
 
basti1012

basti1012

Well-known member
Beiträge
220
Punkte Reaktionen
16
Jo.
Erstmal einen Link zur Seite posten, dann kann man sehen, warum das so ist.
Es kommt ja auch immer darauf an wie die Elementstruktur ist und ob man Grid, Flex benutzt und so weiter.
 
B

Blvcksquid

Member
Beiträge
17
Punkte Reaktionen
0
Hier der Link.

Also wenn ich zum Besipiel die beiden linken "Click me!" Buttons aktiviere, rutscht der darunter liegende Inhalt in die Lücke. Wie kann ich das verhindern?
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Das ist schon mal sehr aufschlussreich. Eine Lösung kannst Du finden, wenn Du dich von float trennst und statt dessen mit Flexlayout vertraut machst. Mit align-items: stretch; kannst Du dann erreichen, dass der Container nicht schrumpft wenn Du den Inhalt verkleinerst. align-items: stretch; ist übrigens Default, d. h. man kann es auch weg lassen.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
B

Blvcksquid

Member
Beiträge
17
Punkte Reaktionen
0
Danke für die schnelle Antwort.
Brauche ich dann einen flex Container oder mehrere? Ich kann ja die flex-items beliebig in einem Container anordnen?
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Ja, Du brauchst auch einen Flexcontainer. Mit Flex kann man die Elemente nur in einer Richtung anordnen, daher wirst Du mehrere brauchen. Ich sehe da eine Zeile mit 3 Elementen und darunter eine mit 2. Für jede dieser beiden wirst Du einen Flexcontainer brauchen.
Ein anderes Layoutverfahren ist Gridlayout aber das ist für deinen Fall nicht so gut geeignet weil die Anzahl von in den Elementen in jeder Zeile anders ist und Du viel Cellspanning brauchen würdest, was das Ganze unübersichtlich machen würde.
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Freut mich zu sehen, dass es funktioniert.
Ich sehe da auch einen Audioplayer, das ist sicher auch ein interessantes Übungsobjekt.
 
Thema:

Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite

Oben Unten