Buttons in CSS untereinanderstellen?
Hallo, ich muss für den Unterricht morgen eine eigene Seite erstellen, die ist noch relativ Leer, da ich 1. keine Kreativität besitze und 2. mich schon seit Stunden mit den Buttons rumplage. Mein Problem ist, ich habe zwei Buttons erstellen die beide "hovern" sollen, das funktioniert ja auch nur will ich die Buttons untereinander jedoch egal was ich mache, entweder der zweite Button wird weiß, er überlappt mit dem anderen oder ist gänzlich von ihm Abhängig, und genau da liegt mein Problem! Wie schaffe ich es, dass der zweite Button vom ersten unabhängig ist und ich ihn dort platzieren kann, wo es mir beliebt?
Hier die Screenshots der Seite und der Codierung, nicht wundern wegen dem Link, wollte nur ausprobieren ob es funktioniert
Wie man sehen kann ist die Schriftart bei "Über mich" geändert ohne jeglichen Befehl.
3 Antworten
Was die Positionierung angeht, hängen deine Buttons ziemlich in der Luft rum, der body ist groß.
Packe beide in einen (den selben) div und gebe ihm die Breite eines Buttons und display: flex, sowie flex-direction: column. Kann man auch anders lösen, aber diese Variante macht für dich im Moment am wenigsten Umstände. Deine Buttons sind nun also in diesem div gefangen, den du irgendwo hin schieben kannst. Die Höhe des div orientiert sich dank display: flex wegen am Inhalt und der Inhalt wird dank flex-direction: column untereinander gelagert. Den Abstand zwischen den Buttons kannst du normal mit margin handhaben.
Wenn du beide Buttons jeweils woanders auf der Karte haben möchtest, packe sie in die entsprechenden Container.
Es macht sich auch immer gut, mit Klassen zu arbeiten.
hier der zweite Link, konnte ihn nicht in die Frage einbringen ohne als Spam deklariert zu werden
Wenn du die Button untereinander haben willst, kannst du zum Beispiel einfach den BR-Tag nutzen.
<button>...
<br>
<button>...
Warum gibst du im CSS bei den margin-Anweisungen so unterschiedliche Angaben? Auch die Anweisungen für position machen so keinen Sinn.
Lösche die zunächst ganz raus. Entferne auch die Positionsangaben absolute und relative aus den CSS-Anweisungen.
Packe im html den BR-Tag zwischen die Button und schaue mal, was dann passiert.
Wir haben erst neulich mit HTML angefangen, ich verstehe um ehrlich zu sein noch gar nichts davon. Bis jetzt hatten wir nur spielerische Sachen wie Tabellen, wir haben nicht einmal mit CSS im Unterricht gearbeitet aber sollen es eben für die Seite nutzen. Da passiert sowas, trotzdem danke
Das Problem ist übrigens schon gelöst
Wenn du gerade erst angefangen hast, solltest du versuchen, Schritt für Schritt vorzugehen. Beschäftige dich stets zunächst mit einer Anweisung. Versuche diese zu verstehen und teste sie aus. Probiere diese auch mal mit unterschiedlichen Parametern und beobachte stets an der eigentlichen Seite, was dadurch passiert.
Wenn du zu viel Code gleichzeitig änderst oder mehrere Codezeilen aus dem Internet kopierst, ohne diese wirklich zu verstehen, dann läufst du ganz schnell Gefahr, immer wieder von vorne beginnen zu müssen.
Hatte ich schon versucht aber ohne Erfolg