Erstes Tutorial!
OMG OMG OMG!!! ♥
Hallo erst einmal an alle!
Ich bin wahnsinnig aufgeregt, dass ich hier einmal unser erstes Tutorial für euch präsentieren darf! Wenn das ganze gut ankommt, dann werden wir auf jeden Fall damit weiter machen. Hierbei muss auch gar nicht zwingend nur um HTML/CSS gehen. Vielleicht interessieren euch ja ganz andere Dinge! Haut es in die Kommentare oder schreibt mir eine Iris!♥
Wir starten direkt mit etwas schwierigem, aber wenn man alle Schritte befolgt, dann kann man auch sicher was mitnehmen! Auch wenn das ganze ein wenig overwhelming wirkt, sind die Schritte simple und mit Videos erklärt.
Keine Panik! Dieses Tutorial ist wohl eher für die Schnecken geeignet, die schon ein bisschen mehr Erfahrung in HTML/CSS sammeln durften. Aber auch jeder blutige Anfänger kann hier Wissen mitnehmen!
Was brauche ich?
- Einen Editor, ich verwende codepen.io
- Ein bisschen Zeit
- Eine coole Playlist ;D
- Geduld & Spaß!
Was ist, wenn ich Hilfe brauche?...
Du kannst dich gerne immer bei mir melden! Sei es hier oder auf Discord: mahrico :)
Was ist das?
Mit Grid-Layouts lassen sich verschiedene Dinge anstellen und auch vereinfachen. Wir sparen uns ein wenig Gecode und vermeiden dadurch auch Fehlerquellen. Also könnt ihr euch mit diesem Tool schnell mal einen schönen Profilcode zaubern!
Anwendungsbeispiele
Gallery & Profilcode
wofür brauche ich das?
Ein Grid-Layout ist eine großartige Möglichkeit, um Inhalte auf einer Webseite zu strukturieren und übersichtlich anzuordnen. Es gibt viele Grid-Generatoren, die dir helfen können, ein solches Layout zu erstellen, ohne dass du tief in die Details der CSS-Codierung eintauchen musst. In diesem Tutorial zeige ich dir Schritt für Schritt, wie du ein Grid-Layout mit Hilfe eines Grid-Generators erstellen kannst.
Das Ergebnis wird so aussehen: >>Klick mich!<<
Grid-Generator
Es gibt viele Online-Tools, die dir bei der Erstellung eines Grid-Layouts helfen können. Einige beliebte Grid-Generatoren sind:
- CSS Grid Generator
- Grid Layoutit
- Grid by Example
Für dieses Tutorial verwenden wir den "CSS Grid Generator".
Öffne den CSS Grid Generator
Gehe auf die Webseite des CSS Grid Generators ⇒ https://cssgrid-generator.netlify.app/
Konfiguriere dein Grid
In diesem Beispiel habe ich folgendes eingestellt:
- Columns (Spalten): 3
- Rows (Reihen): 4
- Column Gap (in px): 10
- Row Gap (in px): 10
Das bedeutet: Unser Grid-Netz hat jetzt insgesamt drei Spalten mit einem Abstand von 10px und vier Reihen mit einem Abstand von 10px.
Das Grid-Netz sollte jetzt so aussehen:
Jetzt müssen wir natürlich die Grid-Items platzieren. Das machen wir, indem wir auf das erste Feld klicken und dann mit der Maus über die Zeilen und Spalten ziehen, die wir auswählen möchten.
Das Grid-Item heißt erst mal nur .div1. Das beschreibt, wie sie später als Klasse im CSS-Bereich beschrieben ist. Wenn wir nun alle unsere Items markiert haben, dann haben wir insgesamt 4 Items von .div1 - .div4. Lasst das Bild/den Generator gerne einmal offen, damit ihr eine Orientierung habt, wie euer Layout aussehen wird.
CSS-Code generieren
Sobald du mit deinem Grid-Layout zufrieden bist, kannst du den CSS-Code generieren.
CSS-Code anzeigen:
Um den CSS-Code anzuzeigen, klickst du einmal auf “Please may I have some code”. Das variiert natürlich nach dem, welches Tool wir nutzen, um unser Grid-Layout zu erstellen.
Das sollte dann folgendermaßen aussehen:
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 5 / 4; }
.div3 { grid-area: 2 / 1 / 4 / 3; }
.div4 { grid-area: 4 / 1 / 5 / 3; }
Dieser Code kommt an den Anfang deines Codes in den CSS-Bereich, der in den Tags <style> …dein CSS… </style> definiert ist. Lässt du die Style-Tags weg, funktioniert der Code nicht mehr. Wir werden gleich auch noch in diesem CSS-Bereich herumbasteln!
HTML kopieren:
Das gleiche müssen wir auch noch mit HTML machen. Wir kopieren also den Code, welchen uns unser schlaues Tool so ausspuckt!
<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
</div>
Dieser Codefetzen kommt jetzt unter den CSS-Bereich deines Codes. Wenn wir vernünftig wären, dann würden wir den Code jetzt im <body>-Tag einfügen, was für unser Vorhaben aber nicht weiter notwendig ist.
Im Gesamten sollte dein Code jetzt so aussehen:
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 5 / 4; }
.div3 { grid-area: 2 / 1 / 4 / 3; }
.div4 { grid-area: 4 / 1 / 5 / 3; }
</style>
<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
</div>
Ihr könnt diese Fetzen immer kopieren. Ich werde den Code auch immer aktualisieren. Wenn ihr irgendwann mal an einer Sackgasse angelangt seid, dann könnt ihr immer noch in meinem CodePen Beispiel gucken!
CSS-Styling
Wie du schon gesehen hast, wird uns nichts ausgespuckt. Das liegt daran, dass wir optisch noch gar nichts definiert haben. Unser Code funktioniert zwar, aber optische Merkmale wie Farben, Breite etc. haben wir einfach noch nicht angegeben. Also ändern wir das nun!
Hintergrundfarbe
In unserem CSS-Bereich haben wir nun folgende Klassen definiert:
- parent: Umfasst den Bereich, in welchem die Items sitzen
- div1
- div2
- div3
- div4
In CSS wird eine Klasse verwendet, um mehreren HTML-Elementen gemeinsame Stile zuzuweisen. Eine CSS-Klasse wird durch einen Punkt (.) gefolgt von einem Klassennamen definiert und enthält eine Sammlung von Stilregeln, die in geschweiften Klammern {} eingeschlossen sind.
Eine Klasse sieht so aus:
.Selector { .Klassenname {
property: value; Eigenschaft: Wert;
property: value; Eigenschaft: Wert;
property: value; } Eigenschaft: Wert; }
Wir fügen jetzt durch das Definieren einer Hintergrundfarbe eine neue Property hinzu, die background heißt. Farben werden in HTML entweder mit Hexcodes (z.B. #00000 = schwarz) oder in RGB(z.B. rgb(0,139,139) = darkcyan) ausgegeben.
Wir fügen also in jede Klasse folgende Properties und Values hinzu:
Beispiel: .parent-Klasse
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
background: #b9e6e3; ⇐ Diese Property haben wir hinzugefügt
}
Der Code sollte jetzt so aussehen:
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
background: #b9e6e3;
}
.div1 { grid-area: 1 / 1 / 2 / 3; background: #d4f0ef; }
.div2 { grid-area: 1 / 3 / 5 / 4; background: #f1fffe;
}
.div3 { grid-area: 2 / 1 / 4 / 3; background: #fde8ef;
}
.div4 { grid-area: 4 / 1 / 5 / 3; background: #fbd4e1;
}
</style>
<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
</div>
Keine Sorge, es ist normal, dass es noch hässlich ist und gar keinen Sinn macht!
Wir brauchen eine Breite!
Wir haben jetzt schon gelernt, was eine Property ist und dass wir diese quasi als “Befehl” brauchen, damit unser Code schön wird. Wir haben aber noch nicht festgelegt, wie groß die Items jetzt sein sollen oder wie die Abstände zu sein haben.
Das Property, mit dem wir arbeiten, ist width (Breite) und die Value wird beispielsweise in px oder % angegeben. Wir arbeiten jetzt einmal mit px, wobei ich persönlich % immer empfehlen würde. Px gibt einen festen Wert, während %-Angaben sich prozentual am vorhandenen Platz anpassen. Als Gegenpart zu width gibt es noch height (Höhe), was wir aber in diesem Beispiel nur einmal brauchen, da sich das Grid automatisch anpasst.
Aus diesem Grund definieren wir nur einmal die Breite unseres gesamten Grids mit width:700px in der .parent-Klasse. Dann suchen wir uns das größte Item unseres Grid-Entwurfs (guck dir gerne noch einmal die Grafik an oder im Tool, wie du dein Grid aufgebaut hast).
- parent: width: 700px;
- div3: height: 500px;
Wenn du das geschafft hast, dann sieht dein CSS jetzt so aus:
<style<
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
background: #b9e6e3;
width: 700px;
}
.div1 { grid-area: 1 / 1 / 2 / 3; background: #d4f0ef; }
.div2 { grid-area: 1 / 3 / 5 / 4; background: #f1fffe;
}
.div3 { grid-area: 2 / 1 / 4 / 3; background: #fde8ef;
height: 500px;
}
.div4 { grid-area: 4 / 1 / 5 / 3; background: #fbd4e1;
}
</style<
Abstände!
Natürlich sind wir noch lange nicht fertig, weshalb wir jetzt ein paar Abstände festlegen müssen.
Margin wird verwendet, um den äußeren Abstand um ein HTML-Element herum zu definieren. Mit Margin kannst du den Abstand zwischen einem Element und seinen umgebenden Elementen kontrollieren.
Es gibt vier spezifische Margin-Eigenschaften:
- margin-top: Abstand oberhalb des Elements.
- margin-right: Abstand rechts vom Element.
- margin-bottom: Abstand unterhalb des Elements.
- margin-left: Abstand links vom Element.
Dies kann man auch folgendermaßen zusammenfassen:
margin: 10px 20px 30px 40px;
An unserem Beispiel gehen wir wie folgt vor:
parent: margin: 20px auto;
Das bedeutet übersetzt: Abstand: 20px (von Oben) automatisch; Das “auto” zentriert unser Element im Abstand zu den Anderen. Dann wollen wir dies natürlich auch noch für unsere anderen .div-Klassen machen. Dabei fällt uns aber auch, dass wir in unserem Grid-Tool bereits Abstände von 10px definiert haben. Wenn wir jetzt noch eine margin-property hinzufügen würden, dann wären die Abstände unterschiedlich breit. Also brauchen wir eine neue Property.
Padding ist eine CSS-Eigenschaft, die den inneren Abstand eines HTML-Elements definiert, also den Abstand zwischen dem Inhalt des Elements und seinem Rand (Border).
Auch hier gibt es vier verschiedene Eigenschaften von padding-top bis padding-left und auch hier kann man auch zusammenfassen:
padding: 10px 20px 30px 40px;
In unserem Beispiel wollen wir also den inneren Abstand in einer Klasse vergrößern und das wäre in diesem Fall erst einmal in der parent-Klasse sinnvoll.
parent: padding: 10px;
Das macht ihr so:
Wenn wir jetzt alles richtig gemacht haben, dann sieht unser CSS jetzt so aus:
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
background: #b9e6e3;
width: 700px;
margin: 30px auto;
padding: 10px;
}
.div1 { grid-area: 1 / 1 / 2 / 3; background: #d4f0ef;
}
.div2 { grid-area: 1 / 3 / 5 / 4; background: #f1fffe;
}
.div3 { grid-area: 2 / 1 / 4 / 3; background: #fde8ef;
height: 500px;
}
.div4 { grid-area: 4 / 1 / 5 / 3; background: #fbd4e1;
}
</style>
CSS-Styling 2
Ich möchte einen Border!
Oft peppen Border und Outlines ein Layout wirklich auf, weshalb wir damit auch weitermachen. Hier gibt es viele Design-Möglichkeiten, die den Rahmen etwas sprengen würden, weshalb ich Properties vorgebe, die ihr so einfügen könnt.
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
background: #b9e6e3;
width: 700px;
margin: 30px auto;
padding: 10px;
border: 5px solid white;
outline: 1px solid #ccc;
}
.div1 { grid-area: 1 / 1 / 2 / 3;
background: #d4f0ef;
border: 5px solid white;
outline: 1px solid #ccc;
}
.div2 { grid-area: 1 / 3 / 5 / 4;
background: #f1fffe;
border: 5px solid white;
outline: 1px solid #ccc;
}
.div3 { grid-area: 2 / 1 / 4 / 3;
background: #fde8ef;
height: 500px;
order: 5px solid white;
outline: 1px solid #ccc;
}
.div4 { grid-area: 4 / 1 / 5 / 3;
background: #fbd4e1;
border: 5px solid white;
outline: 1px solid #ccc;
}
</style>
Border-Radius!
Unser Design nimmt langsam Gestalt an! Jetzt wollen wir aber runde Ecken haben, was wir ganz bequem mit dem Property-Border-Radius machen können. Hier gibt es wieder mehrere Möglichkeiten, die wir einmal kurz beleuchten wollen! Auch hier können wir wieder mit px oder % gehen, was aber zu unterschiedlichen Ergebnissen führt. Wir merken uns, dass px immer einen festen Wert hat und % sich prozentual anpasst.
Wir wollen jetzt folgende Property in unsere parent-Klasse hinzufügen:
Jetzt überschneiden sich die Kanten aber an manchen Stellen, weshalb wir die Klassen div2 und div4 einmal anpassen müssen!
- div2: border-radius: 0px 50px 0px 0px;
- div4: border-radius: 0px 0px 0px 50px;
Jetzt sieht unser Layout so aus:
<style>
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
background: #b9e6e3;
width: 700px;
margin: 30px auto;
padding: 10px;
border: 5px solid white; outline: 1px solid #ccc;
border-radius: 0px 50px 0px 50px;
}
.div1 { grid-area: 1 / 1 / 2 / 3; background: #d4f0ef; border: 5px solid white; outline: 1px solid #ccc;
}
.div2 { grid-area: 1 / 3 / 5 / 4; background: #f1fffe; border: 5px solid white; outline: 1px solid #ccc; border-radius: 0px 50px 0px 0px;
}
.div3 { grid-area: 2 / 1 / 4 / 3; background: #fde8ef;
height: 500px; border: 5px solid white; outline: 1px solid #ccc;
}
.div4 { grid-area: 4 / 1 / 5 / 3; background: #fbd4e1; border: 5px solid white; outline: 1px solid #ccc; border-radius: 0px 0px 0px 50px;
}
</style>
Wir wollen einen Header, also ein background-image!
Jetzt knüpfen wir uns die Klasse div1 vor und fügen ein neues property hinzu, dieses Mal geht es um ein background-image, was wir auch nur kurz anschneiden werden.
Das wird dann so aussehen:Also fügen wir folgendes hinzu:
- div1: background-image:url(https://i.pinimg.com/564x/09/02/ad/0902ad1e1442a66c08e27bdf8d551141.jpg);
Huch! Jetzt sieht das ganze aber gar nicht gut aus, weshalb ein neues property zum Einsatz kommt: background-size
Die background-size-Eigenschaft in CSS wird verwendet, um die Größe eines Hintergrundbildes festzulegen. Diese Eigenschaft kann verschiedene Werte annehmen, um zu steuern, wie das Hintergrundbild letztlich skaliert.
Schlüsselwörter- auto: Behält das Seitenverhältnis des Hintergrundbildes bei. Die Höhe wird automatisch basierend auf der angegebenen Breite berechnet (und umgekehrt).
- cover: Skaliert das Hintergrundbild so, dass es den gesamten Container bedeckt, wobei das Seitenverhältnis beibehalten wird. Teile des Bildes können abgeschnitten werden, um den Container vollständig zu füllen.
- contain: Skaliert das Hintergrundbild so, dass es vollständig im Container sichtbar ist, wobei das Seitenverhältnis beibehalten wird. Es kann zu Leerraum im Container führen, wenn die Proportionen des Bildes und des Containers unterschiedlich sind.
Aufgrund dessen entscheiden wir uns für die Cover-Variante, weil wir nicht wollen, dass es leere Flecken im Container gibt.
Also fügen wir zu unserer background-image-property noch die background-size-property hinzu:
- div1 background-size: cover;
So sollte die Klasse jetzt aussehen:
.div1 { grid-area: 1 / 1 / 2 / 3; background: #d4f0ef; border: 5px solid white; outline: 1px solid #ccc; background-image:url(https://i.pinimg.com/564x/09/02/ad/0902ad1e1442a66c08e27bdf8d551141.jpg); background-size: cover; Text-Styling
Es werde Text!
Jetzt wollen wir Text in unsere div3 Klasse einfügen, das ist die große hellrosa Box in der Mitte. Also gehen wir zunächst in den HTML-Bereich unseres Codes und suchen die Stelle, an der unser Container sich öffnet.
Die Stelle sieht so aus:
<div class="div3">Wichtig ist, dass man Tags immer schließen muss. Das heißt, wir fügen jetzt einen Lorem Ipsum-Text hinzu!
<div class="div3"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
Das sieht natürlich doof aus, also wenden wir etwas an, was wir eben noch gelernt haben! Wir wenden das padding-property in der zugehörigen div3-Klasse im CSS-Bereichs unseres Codes an. Wer also gut aufgepasst hat weiß, dass die padding-property die inneren Abstände definiert.
Wir ergänzen also:
- div3
padding: 15px;
Das sieht schon viel besser aus! Aber die Farbe des Textes gefällt mir nicht so. Das ist tatsächlich ganz einfach. Wir sind immer noch im CSS-Bereich und fügen jetzt die color-Property hinzu. Diese allein bestimmt immer nur die Textfarbe in einem Container.
- div3
color: #008B8B;
Mir gefällt das schon ganz gut, aber ich will das ganze nicht mehr linksbündig machen. Ich möchte nicht so eng auf die Textformatierung eingehen, da das wieder den Rahmen sprengen würde. Aber wir haben folgende Optionen, wenn wir die text-align-Property nutzen.
- left: Richtet den Text am linken Rand des Container-Elements aus.
- right: Richtet den Text am rechten Rand des Container-Elements aus.
- center: Zentriert den Text innerhalb des Container-Elements.
- justify: Richtet den Text so aus, dass die Zeilen die gesamte Breite des Container-Elements füllen, indem der Abstand zwischen den Wörtern angepasst wird. Dies wird oft im Print-Layout verwendet.
- start: Richtet den Text am Startpunkt des Textflusses aus, was in der Regel links für Sprachen mit links-nach-rechts-Schrift und rechts für Sprachen mit rechts-nach-links-Schrift ist.
- end: Richtet den Text am Endpunkt des Textflusses aus, was in der Regel rechts für Sprachen mit links-nach-rechts-Schrift und links für Sprachen mit rechts-nach-links-Schrift ist.
Wir entscheiden uns jetzt für die justify-value und passen unseren Code so an, indem wir das in unserer div3-Klasse ergänzen
text-align: justify; Das gefällt mir auch nochmal besser. Ihr könnt euch ja ausprobieren, welche Ausrichtungen euch gut gefallen!
Jetzt wollen wir noch die Schriftart ändern. Wir nutzen für dieses Tutorial System-Schriftarten, die auf den meisten Betriebssystemen vorinstalliert sind. Sonst könnte man alternativ noch über Drittanbieter wie zum Beispiel Google Fonts interessante Schriftarten importieren/einbetten.
Wir entscheiden uns hier für Helvetica und ergänzen das im CSS-Bereich unter der div3-Klasse
font-family: Helvetica;
Wir brauchen eine Überschrift!
Es sieht ja alles immer noch relativ lame aus, weshalb wir uns jetzt mit dem Thema Headlines beschäftigen wollen. HTML bietet sechs verschiedene Überschriftsebenen, die von <h1> bis <h6> reichen, wobei <h1> die wichtigste und prominenteste Überschrift darstellt und <h6> die am wenigsten "wichtige.""
Also wollen wir in unserem HTML innerhalb des Div-Tags, in welchem wir gerade unseren Text definiert haben, eine Überschrift hinzufügen.
Das Ganze sieht dann einmal so aus:
<div class="div3"> <h1>Titel </h1> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> Jetzt sehen wir erst einmal eine hässliche Überschrift, die wir einmal anpassen wollen!
Also gehen wir wieder in den CSS-Bereich unseres Codes und fügen eine neue Klasse hinzu, aber diesmal ohne den Punkt davor zu setzen. Das zu erklären wäre zu kompliziert also ... macht es einfach! ;D Wir geben dem Titel eine andere Farbe und einen anderen Hintergrund und wenden gelerntes einmal an!
h1 { color: #b9e6e3; background: #f1fffe; padding: 5px; text-align: center; border-bottom: 3px solid #d4f0ef; } Das ganze sieht doch schonmal ganz nett aus. Jetzt füge ich aber noch ein paar Text-Styles hinzu, die den Rahmen wieder sprengen würden! Kopiert dies also einfach und fügt es zu eurer H1-Headline hinzu.
h1 { color: #b9e6e3; background: #f1fffe; padding: 5px; text-align: center; border-bottom: 5px solid #d4f0ef; text-transform: uppercase; letter-spacing: 2.5pt; font-family: Trebuchet MS; text-shadow: 4px 3px 0px #d4f0ef; border-radius: 50px 50px 0px 0px; outline: 3px solid #fff; } Text 2.0!
Wir machen jetzt einen sogenannten "Break” <br>, um einen Zeilenumbruch zu erzeugen. Zwei Breaks erzeugen einen neuen Absatz, welchen man aber ganz easy mit <p> machen kann. Wir wollen nämlich mehr Texte!
Das ganze sieht dann so aus:
<div class="div3">
<h1>Titel</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
Jetzt haben wir den Text verdoppelt, aber jetzt schaut der Text über die Box hinaus, weshalb wir einmal eine neue Property in unserer div3-Klasse einbauen müssen.
wir machen also folgendes:- div3:
overflow: auto;
Das sorgt dafür, dass automatisch eine Scrollbar erzeugt wird, wenn unser Text über den Container hinweg zeigt.
Die .div3-Klasse sieht jetzt wie folgt aus, wenn ihr alles richtig gemacht habt!:
.div3 { grid-area: 2 / 1 / 4 / 3; background: #fde8ef; height: 500px; border: 5px solid white; outline: 1px solid #ccc; padding:15px; color: #008B8B; text-align: justify; font-family: Helvetica; overflow: auto; } Textboxen!
Jetzt machen wir Textboxen! ♥
Rechts diese blaue Box wirkt wie ein komischer Balken, der eigentlich auch nur nervt :)
Also fügen wir ein paar Textboxen hinzu.
Dafür erstellen wir eine neue Klasse im CSS-Bereichs unseres Codes:
.textbox { }
Jetzt legen wir fest, wie breit diese Box sein soll. Da wir diese in unseren div2-Container packen möchten, setzen wir die Breite auf 85%. Das sorgt dafür, dass die Box 85% der verfügbaren Breite nutzt. Da wir runde Kanten brauchen, um uns an das Design von div2 anzupassen, müssen wir ein Padding (Innerer Abstand) von 15px einkalkulieren. Als Höhe nehmen wir einfach mal 250px. Den border-radius aus der div2-Klasse habe ich kopiert und letztlich noch Blocksatz, Textfarbe und eine Scrollbar eingefügt, falls wir mehr Text schreiben würden.
.textbox { background: #b9e6e3; margin: 2px auto; width: 85%; height: 250px; padding: 15px; border-radius: 0px 50px 0px 0px; text-align: justify; color: #008B8B; overflow: auto; } Wie sie sehen, sehen sie nichts. Unsere Attribute stehen fest und wir können nun in den HTML-Teil unseres Codes übergehen. Wie beim Text auch schon müssen wir uns einmal den richtigen Div-Tag suchen.
Dieser sollte so aussehen:
<div class="div2"></div> Wie auch beim Text zuvor müssen wir jetzt hier etwas einfügen. Da wir aber eine neue Klasse erstellt haben und eine Box hinzufügen wollen, müssen wir einen neuen Div-Tag ergänzen.
Das sieht aus wie folgt:
<div class="div2">
<div class="textbox">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div> </div>
Jetzt fällt uns aber auf, dass wir eine zweite Textbox darunter haben möchten. Also kopieren wir einfach unseren div-Tag mit der Klasse Textbox und fügen ihn darunter nochmal ein.
Das sieht dann wie folgt aus:
<div class="div2"> <div class="textbox"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
<div class="textbox"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> </div>
Im Code sieht das dann aber auf einmal ganz furchtbar aus. Was also tun? Wir haben jetzt zwei Möglichkeiten. Entweder wir stylen den Container innerhalb des div-Tags, oder wir machen eine neue Klasse im CSS-Bereich auf. Da wir eigentlich die meisten Properties übernehmen wollen, machen wir das innerhalb des Divs.
Allgemein sieht das so aus:
<div class="deineKlasse" style="property:value; property:value;"></div> Was also wollen wir nicht aus der eigentlichen Textbox-Klasse übernehmen bzw. ändern? Uns stört der Abstand zwischen den Boxen, oder? Dann fügen wir also unseren äußeren Abstand - Margin - mit 15px unserer zweiten Textbox hinzu.
<div class="textbox" style="margin: 15px auto;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eoset accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet. </div>
Jetzt sehen wir allerdings noch, dass der border-radius jetzt nicht mehr gut aussieht.
Tatsächlich reicht es, wenn wir einen neuen Radius innerhalb unseres Divs definieren.
Diese Regel überschreibt die Voraussetzung der Klasse im CSS-Bereich.
Das sieht dann so aus:
<div class="textbox" style="margin: 10px auto; border-radius: 0px 0px 0px 50px;"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> Headline Nummer 2
Wir haben vorhin schon gelernt, was eine Headline ist und wie wir sie erstellen. Wir haben h1 (Die Wichtigste) schon erstellt und wollen für unsere kleinen Textboxen nun h2 erstellen.
h2 {
width:100%;
color: #fff;
text-transform: uppercase;
letter-spacing: 2.5pt;
font-family: Trebuchet MS;
font-size: 18px;
text-shadow: 2px 3px 0px #d4f0ef;
border-bottom: 5px solid #d4f0ef;
margin: 5px;
}
Das würde ich, aufgrund der Ordnung, auch direkt im CSS-Bereich unter unsere Headline 1 - h1, packen.
Dann müssen wir unsere Zweitüberschriften in unseren HTML-Teil bringen. Gleiches Spiel wie vorhin auch, nur dieses mal mit h2: <h2>Titel 2</h2>
Das sieht dann so aus:
<div class="div2">
<div class="textbox">
<h2>Titel 2</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="textbox" style="margin: 10px auto; border-radius: 0px 0px 0px 50px;">
<h2>Titel 2</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
Das Zwischenergebnis!
Hier sehen wir einmal wie weit wir bisher gekommen sind! Entweder du gestaltest das noch weiter, oder wartest auf das nächste Tutorial!
Titel 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Titel 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Titel
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.