Self-made clothes | DIY

Pages

16.03.16

CSS Tutorial - Bilder (nebeneinander) anordnen

Hier kommt es - mein allererstes Tutorial...whoop whoop! Und nein, es geht nicht ums Nähen, sondern um CSS. Bitte was? CSS steht für Cascading Style Sheets. Jeder Blogger wird damit sicherlich schon einmal mehr oder minder freiwillig in Berührung gekommen sein, als es um die Gestaltung des eigenen Blogs ging. Ich habe mir überlegt eine Reihe auf meinem Blog zu starten, in der ich euch Codes zu den häufigsten Problemen an die Hand gebe.
Wie ich auf die Idee kam, fragt ihr euch? Als gelernte Wirtschaftsinformatikerin habe ich seit jeher Freude am Coden und so die Möglichkeit euch an meinem (hoffentlich nützlichen) Wissen teilhaben zu lassen :)

Heute soll es als allererstes um die korrekte Darstellung von Bildern gehen. Ein häufiges Problem ist hierbei, dass ein hochauflösendes Bild aufgrund seiner Pixelmaße seinen zugehörigen Bereich überragt.
Das sieht natürlich unschön aus und können wir mit dem folgenden Code ganz einfach unterbinden. Geht dazu in den Blogger-Vorlagendesigner und öffnet unter dem Punkt "Erweitert" die Option CSS-Codes hinzufügen. Dort könnt ihr nun den Code ganz einfach reinkopieren. Die automatische Höhenanpassung im Code verhindert übrigens, dass euer Bild möglicherweise verzerrt dargestellt wird.
img {
     max-width: 100%;
     height: auto;
}
Im nächsten Schritt wollen wir einzelne Bilder mit unterschiedlichen Auflösungen (Pixelbreiten) bündig untereinander darstellen. So muss man beim Bearbeiten von Bildern nicht zwingend darauf achten, dass alle Bilder dieselben Maße haben.
Dazu schreiben wir uns eine DIV-Klasse namens "bilder" (Die Bezeichnung ist an der Stelle frei wählbar, sollte aber möglichst intuitiv sein.)  und definieren den Darstellungsstil des Bildelements.
.bilder img {
     width: 100%;
     height: auto;
}
In einer weiteren DIV-Klasse "eins" werden die Darstellungsoptionen genauer spezifiziert. Im Beispielcode ist das Bildelement demnach zentriert und füllt seinen Bereich voll aus abzüglich eines Innenabstandes (padding) von 1% des zugehörigen Blockelements. Um auf händisch eingefügte Zeilenumbrüche vor und nach einem Bild zu verzichten, ergänzen wir den Code um einen Außenabstand von 20 Pixeln (margin). Fügt nun beide Codes als benutzerspezifische CSS im Blogger-Vorlagendesigner hinzu (geht alternativ natürlich auch über den HTML-Vorlageneditor).
.eins {
     float: center;
     width: 100%;
     padding: 1%;
     margin-bottom: 20px;
     margin-top: 20px;
}
Nun könnt ihr in euren Post ein Bild einbinden. Fügt es als Originalgröße hinzu. Entfernt dann entweder den von Blogger automatisch erzeugten Link vollständig oder lediglich die Stilvorgaben style="margin-left: 1em; margin-right: 1em;". Wechselt für letzteres in den HTML-Editor. Dort ändern wir nun auch die DIV-Klasse um. Standardmäßig steht dort...
<div class="separator" style="clear: both; ....">
Wir schreiben den Code wie folgt um...
<div class="bilder eins">
Das Ganze sollte im Editor also so aussehen...
Als nächsten wollen wir nun mehrere Bilder nebeneinander gleichmäßig anordnen. Genauer gesagt geht es darum, zwei Bilder oder drei Bilder nebeneinander darstellen zu können. Dafür schreiben wir uns wieder zwei DIV-Klassen "zwei" und "drei" analog zur Klasse "eins". Da die Bilder hierbei nebeneinander angeordnet werden sollen, ist die Ausrichtung nicht mehr zentriert, sondern ausgehend vom linken Seitenrand. Die Bildbreite wird für zwei Bilder auf 50% bzw. auf 33.3% für drei Bilder gesetzt. Für ein einheitliches Gesamtbild verwenden wir dieselben Werte für die Innen-u. Außenabstände. Ganz wichtig noch: der Code ist für Bilder mit unterschiedlichen Auflösungen aber identischen Seitenverhältnissen gedacht (an der Variante mit unterschiedlichen Seitenverhältnissen arbeite ich noch...).
.zwei {
     float: left;
     width: 50%;
     padding: 1%;
     margin-bottom: 20px;
     margin-top: 20px;
}
.drei {
     float: left;
     width: 33.3%;
     padding: 1%;
     margin-bottom: 20px;
     margin-top: 20px;
}
Im HTML-Editor müsst ihr dann beim Schreiben eures Posts die jeweilige DIV-Klasse um jedes der zwei bzw. drei Bilder setzen!
Tadaaaaa!!!
Solltet ihr nicht zum gewünschten Ergebnis gelangen, checkt bitte als allererstes, ob ihr die Codes fehlerfrei übernommen habt :P Besteht euer Problem auch nach sorgfältiger Codeprüfung weiterhin, dann sucht im HTML-Code eures Designs nach folgendem und entfernt die Zeilen gegebenfalls.
........ img {
     width: inherit;
     height: inherit;
     .....
}
Hinweis: Ich empfehle euch für sämtliche Design- und Codeexperimente einen separaten (privaten) Blog anzulegen, sowie regelmäßige Backups zu erstellen. Nichts ist ärgerlicher, als sich das komplette Blogdesign zu zerschießen. Überprüft außerdem die Darstellung eures Blogs in anderen Browsern und auf anderen (mobilen) Geräten. Da gibt es oftmals böse Überraschungen.

Ich hoffe, dass dieses erste CSS Tutorial leicht verständlich und hilfreich für euch war. Bei weiteren Fragen oder Feedback hinterlasst einen Kommentar oder schickt mir eine Mail an mindeern-blog@web.de. Lasst es mich außerdem wissen, wenn ihr noch andere Fragestellungen im Zusammenhang mit CSS & HTML habt.

Viel Spaß beim Coden!
Eure Ivonne



Disclaimer: Ich übernehme keine Haftung für die Vollständigkeit und die Richtigkeit der hier angegebenen Codes. 
Credits: Ich danke Lichtkonfetti für die tollen kostenlosen GIMP Brushes.

Kommentare:

  1. Hui... Danke für dein Tutorial! Ich steige ja tatsächlich bei den ganzen Sachen nicht so durch! Zum Glück hab ich meinen Mann! ;-) Aber vielleicht krieg ich in Zukunft mal selber die Kurve! Bin gespannt welche Tutorials noch folgen! LG Julia

    AntwortenLöschen
  2. Bitte mehr davon, ich lese eifrig mit! Dein Blog ist sehr sehr ansprechend gestaltet. Das würde ich auch gern so hin bekommen! Klasse! LG Doreen

    AntwortenLöschen