Wie bekomme ich einen Abstand zwischen zwei Buttons?
Hi
Ich programmiere gerade aus Langeweile eine kleine Website (erstmal nur mit HTML) und möchte einen größeren Abstand zwischen den Buttons bekommen, die nebeneinander sind. Welchen Code muß ich dafür verwenden?
So ist der Code bisher geschrieben:
Und das kommt dabei raus:
Und ich möchte den Abstand zwischen den beiden Buttons vergrößern (der Abstand mit dem Blauen Pfeil)
Wäre echt nett wenn mir jemand helfen könnte! ❤️
Danke im Voraus!! 🙏🙏🙏
2 Antworten
Bevor ich auf dein Problem eingehe, würde ich dich gern darauf aufmerksam machen, dass dein Code nicht valid ist bzw. kein gültiges HTML5 repräsentiert (was du mit deinem Doctype allerdings explizit vorgibst).
- Statt nur einem hast du zwei öffnende body-Elemente
- Das bgcolor-Attribut ist nicht mehr Teil des Standards
- Das font-Element ist nicht mehr Teil des Standards
- Selbst bei einer älteren HTML-Version dürfte das h1-Element nicht innerhalb des font-Elements stehen, denn es handelt sich (mit alten Begrifflichkeiten erklärt) nicht um ein Inline-, sondern um ein Blockelement
- In Zeile 15 und 22 sind die spitzen Klammern nicht maskiert (< und >); für das geschützte Leerzeichen würde dir im Übrigen ein Semikolon fehlen:
Eine bessere Lösung, die auch deine Fragestellung berücksichtigt, könnte so aussehen:
<!DOCTYPE html>
<html>
<head>
<title>Fantasy.Ai</title>
<meta charset="utf-8">
<style>
body {
background-color: black;
}
.headline {
color: #f535aa;
font-style: italic;
}
.button-container {
column-gap: 20px;
display: grid;
grid-template-columns: 150px 150px;
grid-template-rows: 220px 220px;
row-gap: 20px;
}
</style>
</head>
<body>
<h1 class="headline">Fantasy.AI</h1>
<button type="button">Search</button>
<div class="button-container">
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button">Click me</button>
</div>
</body>
</html>
Eine schrittweise Erklärung:
1) Im head habe ich einen Metatag hinzugefügt, welcher dem Dokument eine UTF-8-Zeichenkodierung vorschreibt. Damit wird sichergestellt, dass Sonderzeichen (wie z.B. Umlaute) innerhalb des Dokuments vom Browser richtig dargestellt werden.
2) Die Hintergrundfarbe der Seite wird nun via CSS gesetzt. Ich habe dafür eine Regel mit Elementselektor hinzugefügt.
3) Im body habe ich dem h1-Element ein class-Attribut zugeordnet. Über dessen Wert kann ein Mapping auf eine CSS-Regel mit Klassenselektor vorgenommen werden. Das heißt, die Properties der CSS-Regel .headline, die ich oben innerhalb des style-Elements definiere, beeinflussen das Aussehen des h1-Elements.
Man könnte das zwar ebenso mit einem Inline-Style lösen:
<h1 style="color: #f535aa; font-style: italic">Fantasy.AI</h1>
Allerdings ist so eine räumliche Aufteilung von Markup und Styles übersichtlicher.
Grundsätzlich wird alles, was die visuelle Darstellung der Seitenelemente beschreibt, mit CSS geregelt. Elemente wie i oder b werden nur dann verwendet, wenn sie die Art des umklammerten Elements speziell auszeichen (auf Metaebene hervorheben) sollen.
Dazu drei Beispiele:
<p>Er sagte, das ist <i>schon okay</i> so.</p>
<p>Das <i>Camelus dromedarius</i> ist in Afrika und Asien weit verbreitet.</p>
<p>Schlussendlich lässt sich feststellen, dass der <b>Wischmob 3000</b> das beste Produkt ist, welches ich je gekauft habe.</p>
- Im ersten Beispiel gibt es ein indirektes Zitat, in welchem zwei direkt zitierte Wörter eingewoben werden. Der i-Tag hebt sie speziell hervor.
- Im zweiten Beispiel wird ein Fachbegriff hervorgehoben. Es könnte ebenso eine Einführung eines Fachbegriffs sein, welcher im Folgetext noch öfter eingesetzt werden soll.
- Das dritte Beispiel ist ein klassischer Anwendungsfall für das b-Tag. Es gibt eine Zusammenfassung, in der ein Begriff speziell markiert wird. Er soll die Aufmerksamkeit des Lesers auf sich lenken (nicht visuell!), aber steht deswegen in der inhaltlichen Hierarchie nicht über den anderen Worten (so wie es eine Überschrift täte).
4) Den Buttons habe ich jeweils ein type-Attribut mitgegeben, welches sie explizit als einfache Klickbuttons auszeichnet. Sie sind keinem Formular zugeordnet und schicken demzufolge bei Klick keine Daten ab, wie es der Standardtyp (submit) vermitteln würde.
5) Ich habe alle Buttons in einen Container gepackt und die br-Elemente entfernt. Letztere sind eigentlich nur dazu gedacht, Zeilenumbrüche innerhalb eines Paragraphen zu erzwingen. Zum Anlegen von Abständen ist wieder CSS zuständig.
In diesem Fall habe ich eine CSS-Regel formuliert, die die Darstellung des Containers zu einem Gridlayout umwandelt. Dieses Grid hat zwei Spalten und zwei Zeilen. Mit den gap-Properties wird der Abstand zwischen den Zellen definiert.
Mehr zu CSS Grids kannst du dir beispielsweise auf dieser Seite anlesen.
Und da es in einer anderen Antwort empfohlen wurde: Eine Lösung mittels Tabelle (table) würde nur infrage kommen, wenn du Inhalte tabellarisch zueinander aufstellen möchtest. Das heißt zwischen den Inhalten gäbe es z.B. eine Art vergleichenden Aspekt (wie eine Aufstellung verschiedener Produkte, die nach bestimmten Kriterien betrachtet werden).
Wow danke! Das war eine ausführliche Antwort... damit konnte ich viel anfangen! Danke fürs Erklären 🫶❤️❤️
Hi SweetSuny,
du kannst mit CSS die entsprechende Elemente selektieren und die margin-Eigenschaft angeben. Diese ist für den Außenabstand des Elements zu anderen Elementen zuständig. Hier ein Beispiel:
<button style="height: 220px; width: 150px; margin: 8px;">click me!</button>
Viel Erfolg SweetSuny
Danke!!!!!!! Du hast mir das leben gerettet!!! (P.S: Wohl eher die Website... trotzdem danke!!!!!)