{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

9 Kommentare

  1. Oh, liebste Mira, so ein Tutorial habe ich wirklich gerade gesucht!
    Schön, mal wieder von dir zu hören, ich hoffe natürlich auch ganz fest, dass es dir gut geht und du es 'heil' durch die Prüfungen schaffst!
    Bei uns in der Schweiz funktioniert alles ein bisschen anders, aber auch ich atte in letzter Zeit mit ein paar Prüfungen zu kämpfen, aber das Schlimmste ist vorbei! :)
    Aber du hast doch auch Gastblogger? Ich habe dir zum Beispiel ein Gastblog-Tutorial geschickt... :)
    Oh, ich wusste gar nicht, dass es ein CopyPasteLove-Chat gibt, da werde ich mal vorbeischauen!
    ich wünsche dir noch ein wunder, wunder, wunderschönes Wochenende und ganz viel Glück für die Prüfungen,
    mara <3

    AntwortenLöschen
  2. Liebe Mira,
    Danke für das schöne Tutorial! Ich benutz selbst gar nicht das Minima Template, aber trotzdem waren für mich ein paar neue Sachen dabei. Dass padding zB keine negativen Werte annehmen kann und dass die Prozentzahl die Relativität bestimmt. Bin grad am Überdenken, alle Breiten auf Prozent umzustellen - so passt das Design doch auf jedem Bilschirm :)

    AntwortenLöschen
  3. Heyho, du hast mir gerade sehr geholfen vielen Dank :D

    <3

    AntwortenLöschen
  4. Hey, ich habe gerade mal eine Frage, und zwar wie hast du es hinbekommen, dass die türkise Sprechblase hier über dem Kommentareingabefeld ist? Mein Quelltext sieht genauso aus, aber mein Text erscheint immer unter dem Feld :/ Hast du da noch irgendwas für verändert?

    Liebe Grüße ♥

    AntwortenLöschen
    Antworten
    1. Und was mir grad auch aufgefallen ist, irgendwie sind viele Elemente doppelt in der html-Vorlage.
      Ich habe als Vorlage eine von Blogger genommen und die dann umgebastelt, aber etliche Bereiche, wie z.b. der für die Kommentare, ist komplett doppelt im html enthalten. Hast du zufällig eine Ahnung warum das so ist? ^^

      Löschen
    2. Hallo Jana,
      Vielleicht hilft dir das hier?
      Grüsse
      Myri

      Löschen
    3. Aah ja das sieht gut aus, danke dir!
      Ich schau mir das mal an :)

      Löschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!