Frage von Jounuser, 63

Wie kann ich Buttons unabhängig von einander platzieren, bei html?

Hallo, ich habe das Problem, dass ich bei html und css buttons untereinander platziert habe. Ich habe das mit Background-color und line-height gemacht. Wenn ich jetzt aber einen Hovereffekt hinzufüge, z. B. das der Button größer wird, werden dann auch alle Buttons darunter mitbewegt. Ich möchte aber, das die Buttons unabhängig von einander sind und nicht beeinflusst werden können. Ich habe das auch mit display: inline-block gemacht. Ich hoffe, ihr könnt mir helfen!

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von medmonk, 29

Dem Eltern-Element ein position: relative; geben. Außerdem den Kind-Elementen ein position: absolute; und unterschiedlichen z-index zuweisen. Warum sich der Rest nicht verschieben darf jedoch nicht so ganz nachvollziehen kann. Ist wohl der Tatsache geschuldet, das ich (wir) dein Layout nicht kennen. 

Antwort
von Minilexikon, 30

Mach mal ein jsfiddle oder codepen. Dann kann man das besser sehen. Sofern sich die Buttons beim Ändern nicht überlagern sollen, müssen sie schon voneinander abhängig sein. Eine absolute Positionierung ist also nicht zu empfehlen. 

Antwort
von cgpro, 37

Du kannst die Buttons auch absolut positionieren. Wichtig ist dass das Elternelement ein position: relative; bekommt. Aber sobald es responsive sein soll kommt man damit auch schnell an Grenzen. Hast Du ein Beispiel bei codepen.io z.B.?

Antwort
von perhp, 37

Display inline-block hat damit gar nichts zu tun. Gib deinem Button eine Klasse und sprich sie damit an, dann ist dein Problem gelöst.

Kommentar von Jounuser ,

Das mit der Klasse habe ich doch gemacht, aber wenn ich zum Beispiel noch border einfüge, dann verändert sich ja die Größe des Buttons und die unteren werden verschoben.

Kommentar von RedKungFuMastr ,

wenn du ne border brauchst, dann setz bei allen buttons nen border *transparent*

Kommentar von medmonk ,

Mit dem Pseudo-Selektor :nth-child kann man sich die Vergabe einer Klasse sparen. Vor allem sinnvoll, wenn man keine weiteren Elemente mit den selbigen Eigenschaften formatieren möchte. 

https://developer.mozilla.org/de/docs/Web/CSS/:nth-child

Deine Antwort ist aber nicht falsch. Mit einer Klasse kann man natürlich auch ein bestimmtes Element ansprechen. Macht vor allem sinn, wenn man die Eigenschaften häufiger verwenden möchte. 

LG medmonk  

Kommentar von perhp ,

Natürlich kannst du auch den nth-Selektor nehmen, was ich aber wirklich nicht empfehlen würde, da bei eventuellen Änderungen am Code die Reihenfolge der Elemente nicht mehr zusammenpasst und man das ganze neu anpassen müsste.

Antwort
von PetcosWebdesign, Business, 11

Versuche es mit... 

bootstrap 2 ( getbootstrap.com/2.3.2/ )

bootstrap 3 ( getbootstrap.com )

bootstrap 4 ( v4-alpha.getbootstrap.com)

Viel Spaß! ;)

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten