Mit der Programmiersprache CSS lässt sich einiges anstellen. Wir zeigen euch hier auf GIGA, wie ihr ausgewählte Elemente nebeneinander positionieren könnt.
Das Kürzel CSS steht für Cascading Style Sheets und ist neben HTML und JavaScript eine der elementaren Programmiersprachen des Internets. Bereits 1994 entstand die Softwarebasis der textbasierten Programmiersprache. Mit ihr lassen sich eure elektronischen Texte individuell optisch gestalten, so zum Beispiel das Layout, Farben oder Typografie. HTML dient dabei als Grundgerüst für den Textinhalt.
Nicht nur mit CSS lassen sich die verrücktesten Projekte umsetzen. Diese Nutzer haben die Möglichkeiten von Excel ausgeschöpft:
CSS div: Das steckt dahinter
CSS wird im HTML Dokument in dem -Tag angesprochen und wird als „< style >“ eingeleitet und muss entsprechend dieser Skriptsprache auch wieder mit einem Tag beendet werden. Mit type="text/css" im Einleitungs-Tag erkennt der Browser, dass ihr CSS ansprecht und führt dieses schließlich aus.
Mithilfe von div-Tags < div > könnt ihr einzelne Bereiche definieren und so Text, Grafiken oder Blöcke zusammenfassen. Hierdurch gestaltet ihr euren Code übersichtlicher. Div kommt aus dem englischen „division“ und bedeutet Bereich oder Abteilung.
CSS div nebeneinander einstellen
Im folgenden Beispiel nutzen wir Boxen, um euch zu zeigen,
wie ihr eure div-Container nebeneinander gliedern könnt:
- Wir haben drei div-Bereiche erstellt und als Box uns anzeigen lassen. Den Code haben wir in den HTML Body geschrieben.
- Im nächsten Schritt verändern wir die Eigenschaften dieser Boxen. Diese sprechen wir über .box an und nutzen hier das „float“-Attribut und stellen es auf „left“, damit die Boxen nebeneinander angeordnet werden. Diesen Codeteil haben wir in den Head-Teil geschrieben unter den CSS-Aufrufbefehl.
< div class="box"> Bsp1< /div >
< div class="box"> Bsp2< /div >
< div class="box"> Bsp3< /div >
.box { float: left; width: 32%; margin-right: 2%; padding:
20px; background: #eee; box-sizing: border-box; }
.box:last-child { margin-right: 0; }
Neben HTML und CSS ist JavaScript eine beliebte Programmiersprache. Wie ihr sie aktiviert, zeigen wir euch hier:
CSS div: Alternative über Flex-Darstellung
Eine weitere Möglichkeit, euren div-Block nebeneinander zu ordnen, ist mit der Flex-Methode.
- Hierbei ordnet ihr eurem div-Container im Body-Teil eine ID zu und gebt diesem das CSS-Attribut display.
- Diesem sprecht ihr mit der Eigenschaft flex an und euer div-Bereich erscheint wie bei float, nebeneinander. In diesem Fall steht noch display:- webkit-flex dabei, damit bei Google Chrome die Darstellung ebenfalls funktioniert.
< div
id="Beispiel-1" >
< nav>Nebeneinander< /nav >
< section>Ist< /section>
< aside>Toll< /aside >
#Beispiel-1 { display:
-webkit-flex;display: flex }
Schaut euch diese Umfrage an, denn diese wurde ebenfalls mit nebeneinander positionierten divs programmiert:
