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...
Neues Thema erstellen Antworten
  • Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite Beitrag #1
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."'>
Zum Vergrößern anklicken....

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
 
  • Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite Beitrag #2
basti1012
basti1012
Well-known member
Beiträge
242
Punkte Reaktionen
18
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.
 
  • Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite Beitrag #3
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?
 
  • Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite Beitrag #4
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
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/
 
  • Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite Beitrag #5
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?
 
  • Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite Beitrag #6
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
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.
 
  • Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite Beitrag #7
B
Blvcksquid
Member
Beiträge
17
Punkte Reaktionen
0
Es hat funktioniert :)

Das Ganze sieht jetzt so aus.
 
  • Neuling benötigt Hilfe: onclick Button ändert Layout meiner Seite Beitrag #8
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
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