{Minima Basics #1} Breite und Größe anpassen

Heute zeige ich euch den ersten Teil der Minima-Basic-Tutorials. In diesem Tutorial wird nichts Blogger-spezifisches gezeigt, sondern nur, wie man mit CSS die Breite der Layout-Container an seine eigenen Wünsche anpasst.

Ein ähnliches Tutorial existiert schon, behandelt aber weit aus mehr als nur die Breite von Minima. Wer mit der Simple-Version arbeitet, kann die ältere Version bei Gelegenheit ja mal ausprobieren - ich bin mir nämlich nicht mehr sicher, ob sie noch funktioniert.

1. Was will ich bearbeiten?

Im Prinzip ändern wir für dieses Tutorial nur width- (& height)-Eigenschaften. Um aber die richtigen zu erwischen, brauchen wir die Selektoren.

Die wichtigsten sind in diesem Bild zusammengefasst:

• #outer-wrapper für die gesamte Breite (Postbereich + Sidebar + kleine Abstände)
• #header-wrapper befindet sich im #outer-wrapper und steht für den Header. Soll der Header genauso breit sein wie der Outer-Wrapper, dann sollte man die Größe übernehmen.
• #main-wrapper: hier stehen alle Attribute und Werte für den Postbereich drin...
• #sidebar-wrapper: und hier sind die Werte für die Sidebar (hier macht es kein Unterschied, ob die Sidebar rechts oder links ist)
• #footer steht für den unteren Bereich des Blogs, dort befinden sich in der Regel ein Menü mit rechtlichen Unterpunkten (Impressum, Copyright etc.)

Mehr Selektoren findet ihr im CSS-Katalog.

2. Im HTML ändern

Öffnet Dashboard → Vorlage → HTML bearbeiten. Sucht im HTML nach dem gewünschten Selektor, zB. #sidebar-wrapper. Die Zeile würde dann etwa so aussehen:

#sidebar-wrapper {
  width: 220px;
  float: right;
  word-wrap: break-word;
  overflow: hidden;
}

Dort ändert ihr die Zeile width: 220px; Ändert dort die Zahl ab. Falls ihr nicht wisst, welche Werte ihr eingeben sollt: mit diesem Tool könnt ihr eine Demobox vergrößern oder verkleinern und die Pixel-Breite unten ablesen.

3. Relative Größen und weitere nützliche CSS-Tipps

Wollt ihr nun aber eine relative Breite, sodass sich euer Blog dem Bildschirm des Betrachters anpasst, könnt ihr auch überall %-Werte eingeben. Dabei gilt, dass sich #outer-wrapper der Browsergröße des Betrachters anpasst und die restlichen sich an #outer-wrapper angepasst. Beispiel: Wenn euer Blog auf einem 1000px breiten Sichtfenster geöffnet wird, dann passt sich #outer-wrapper mit einer width: 80%; daran an - das wäre dann 800px breit. Die restlichen Elemente (die oben aufgezählt sind) richten sich nach dem #outer-wrapper.

Dazu könnt ihr auch noch maximale Breite & Höhen einfügen, sodass die Größen zwar relativ sind, aber noch eine Ober- und Untergrenze haben. Die schreibt ihr so: max-width: 1200px; oder min-width: 800px; (Statt width funktioniert auch height für die Höhe).

Wer den Abstand von einem Container zum anderen ändern wollt, könnt ihr euch mit margin und padding bekannt machen. Padding beschreibt den Abstand zwischen Inhalt und Containerrand und Margin den Abstand zwischen Containerrand zum nächsten Container. Klingt etwas kompliziert, aber probiert es einfach aus. Mit -left, -right, -top und -bottom könnt ihr den Abstand einer bestimmten Seite des Containers bearbeiten. Dazu muss noch gesagt werden, dass Margin negative Werte annehmen kann, Padding jedoch nicht. Beispiel: margin-top: 15px; padding: 5%; = äußerer Abstand nach oben: 15px; innerer Abstand auf allen 4 Seiten (oben, rechts, unten, links): 5%;


Ich hoffe, ihr könnt etwas mit diesem Tutorial anfangen. Es tut mir furchtbar leid, dass ich im Januar kaum etwas gepostet habe und danke an alle aufmerksamen Lesern, die mich darauf hingewiesen haben bzw. nach meinem eigenen Wohlergehen gefragt haben! Ich werde die nächsten zwei Wochen wahrscheinlich auch nichts von mir hören lassen, da ich noch für ein paar Prüfungen pauken muss, also keine Sorge. Ich werde mich hoffentlich bald wieder melden!

Liebe liebe Grüße,
Mira