Container, CSS3

Container-Layout

Das Box-Modell

Die Größe eines Elementes wird mit CSS durch height und width, margin und padding sowie border bestimmt.


float / clear

Wie sich Boxen anordnen bestimmt u.a. float bzw. clear.

Hier wurde der Grafik (img) die Anweisung float: left; gegeben. Das darauffolgende Element (Dieser Absatz p) nimmt den restlichen Platz in der Breite ein, falls es daneben passt, andernfalls rutscht es in die nächste „Zeile“.

Dieses Verhalten des nachfolgenden Elements kann durch die Anweisung clear: both an nachfolgende Elemente unterbunden werden – wie in diesem Absatz geschehen. Er macht sich unter den anderen Boxen „breit“ und passt sich nicht in der Breite an, um neben das img-Element zu passen.


Container-Layout

In den vergangenen beiden Sitzungen haben Sie das Tabellen-Layout kennengelernt.
Heute finden aufgrund neuer Möglichkeiten Tabellen-Layouts kaum noch Anwendung.

Beispiel

<!DOCTYPE html>
<html>
<!-- Metainformationen zu dieser Seite -->
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="author" content="Reiner Wahnsinn">
<title>HTML5-Template</title>
<link type="text/css" href="dummy.css" rel="stylesheet">
</head>
<!-- Inhalt der Seite -->
<body>
<!-- Header -->
<header id="oben">
<h1>Brandberg</h1>
</header>
<!-- Menü -->
<nav id="menu">
<ul class="level1">
<li class="menu-title">Menü</li>
<li><a href="#" title="Home">Home</a></li>
<li><a  class="active" href="#"title="Collection">Collection</a></li>
<li>
<ul class="level2">
<li><a href="#" title="Brandberg">Brandberg</a></li>
<li class="active">Karte</li>
</ul>
</li>
<li><a href="#" title="Impressum">Impressum</a></li>
</ul>
</nav>
<!-- Textueller Inhalt -->
<main>
<article class="content">
<section>
<header>
<h2>Überschrift</h2>
</header>
<p>
Minions ipsum adipisicing ut velit labore aute consectetur officia incididunt jiji. Underweaaar poulet tikka masala veniam veniam. Gelatooo cillum jeje tatata bala tu et aaaaaah consequat consectetur ex. Veniam quis cillum ullamco baboiii pepete. Irure consectetur daa poopayee tatata bala tu veniam butt. Consectetur daa labore dolor velit. Incididunt ut para tú gelatooo jeje.
</p>
<footer>
&copy; 2013 <a href="www.minionsipsum.com">www.minionsipsum.com</a>
</footer>
</section>
</article>
</main>
<!-- footer -->
<footer id="unten">
<ul>
<li><a href="#" title="Sitemap">Sitemap</a></li>
<li><a href="#" title="Impressum">Impressum</a></li>
</ul>
</footer>
</body>
</html>

Don’t panic!

Was auf den ersten Blick komplett anders aussieht als ein Tabelle-Layout, ist diesem aber sehr ähnlich. Denken Sie in „Boxen“… Statt in Tabellenkästchen gepackt, finden Sie die Inhalte nun in semantisch korrekt ausgezeichneten Elementen (Containern). Mehr zum Thema „strukturierende Elemente in HTML5“ finden Sie hier.


Container-Layouts und CSS

Durch ein Tabellenlayout konnte der Browser direkt eine einigermaßen übersichtliche Seite „rendern“, die ihre Elemente zumindest ungefähr an der Position hatte, an der man sie haben wollte.

Mittels CSS lassen sich die „Boxen“ nun aber weitestgehend beliebig positionieren. Und das ist der große Vorteil der Trennung von Inhalt und Layout. Inhalte lassen sich nun beliebig aufbereiten (Vgl.: CSS-Zengarden).

Beispiel

body {
margin: 0;
padding: 0;
background-color: black;
}

#wrapper{
width: 850px;
margin: 0 auto;
padding: 0;
}

header#oben {
margin: 20px 0 0 20px;
padding: 10px;
border: 5px solid #ccc;
background-color: #e55;
height: 100px;
width: 800px;
}

nav#menu {
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background-color: #55F;
width: 200px;
float: left;
}

section.content {
margin: 20px 0 20px 0;
padding: 10px;
border: 5px solid #ccc;
background-color: #5F5;
width: 550px;
float: left;
}

footer#unten {
margin: 20px 20px 0 20px;
padding: 10px;
border: 5px solid #ccc;
background-color: #ee5;
height: 100px;
width: 800px;
clear: both;
}

Das Ergebnis sehen Sie hier.

Eine Darstellung wo welche CSS-Eigenschaften wirken finden Sie hier.

Und mit noch etwas mehr CSS kann das Ganze dann so aussehen.


TIPP

Öffnen Sie den Inspektor Ihres Browsers und schauen Sie, welche CSS-Eigenschaften welchen HTML5-Elementen zugeordnet wurden. Versuchen Sie, was passiert, wenn Sie diese Eigenschaften verändern.

Zum Seitenanfang


CSS 3

Keine Besonderheit von CSS 3 sondern für alle Varianten von CSS gilt die Kaskadenregel.


Auswahl neuer Möglichkeiten mit CSS 3:

border-radius
Rundet die Ecken von HTML-Boxen ab
px, em, Prozent
button { border-radius: 15px }
box-shadow
Schatten (Drop-Shadow) hinter HTML-Boxen
horizontaler Versatz
Vertikaler Versatz
Verlaufs-Radius
Schattenfarbe
.box { box-shadow: 10px 10px 15px silver }
box-sizing border-box
hyphens
Automatische Silbentrennung
auto
hyphenate-limit-chars
hyphenate-limit-lines
filter
Filter für Bilder
blur, grayscale, drop-shadow, brightness, contrast, hue-rotate, invert, saturate, opacity
@font-face
Ladbare Schriften
font-family, src
border-image
Rahmen aus Pixelbildern
border-image-source, border-image-slice, border-image-width, border-image-repeat
background-image
Mehrere Hintergrundbilder
background-size, background-clip, background-origin
skaliert Hintergrundbilder
length, %, auto, contain, cover
@keyframes
Animationen auf Basis von transform
animation-name,animation-duration, animation-iteration-count, animation-delay,animation-play-state, animation-fill-mode, animation-direction, animation-timing-function
opacity
Transparenz von Elementen
0-1
outline-offset
Abstand des äußeren Rahmens
px, em, %
resize
Element kann vom Benutzer verkleinert oder vergrößert werden
both
text-columns
Spaltensatz
text-overflow
Kürzen von Texten, die die Grenzen ihrer umfassenden Box überschreiten
ellipsis
text-shadow
Schatten hinter Text (Drop-Shadow)
horizontaler Versatz, vertikaler Versatz, Verlaufs-Radius des Schattens, Schattenfarbe
transform
Bewegen, verkleinern, vergrößern, rotieren und verzerren
translate
translateX
translateY
scale
scaleX
scaleY
rotate
skewX
transform-origin
transition
ändert den Wert einer CSS-Eigenschaft über die Zeit
transition-property
transition
transition-duration
transition-delay
transition-timing-function

siehe: http://www.mediaevent.de/css/tabelle-css3-eigenschaften.html

Zum Seitenanfang