BBCode - Bilder

Veröffentlicht von Petra Dippold am Samstag, 12. Juni 2010

Ein Bild aus dem DropDown-Menü auswählen [zuvor muss das/die Bild/er natürlich über den Uploader im Admin Bereich hochgeladen werden] ist nicht schwer.

Beispiel 1: ein grosses Bild
gute_werbung_4.jpg

Beispiel 2: mehrere kleine Bilder nebeneinander
euro5.jpgeuro10.jpgeuro20.jpgeuro50.jpgeuro200.jpgeuro500.jpg

Da diese Website eine komplette Breite von 770px hat, die Navigation eine Breite von 195px in Anspruch nimmt haben leider nicht mehr als 2 dieser kleinen Bilder [Bildbreite jeweils 185px] Platz nebeneinander - kleinere Bilder/grössere Breite der Website = mehrere Bilder nebeneinander.

Grundsätzlich werden die Bilder an den linken Rand platziert - so jetzt möchte man aber ein kleines Bild auf der Linken Seite einfügen, und dazu auf der rechten freien Seite einen Text platzieren - jetzt ist man mit BBCode-”Latein” am Ende.

Zum Glück gibt es das “Tag” [html] [/html].

Innerhalb dieses “Tags” kann man individuellen xHTML-Code einfügen und dadurch all jene Formatierungen vornehmen, die man mit BBCodes nicht zustande bringt. Wenn Sie keinen korrekten xHTML-Code schreiben können, bitte die Finger von dieser Möglichkeit lassen!

Beispiel 3: Bild mit nebenstehenden Text

© Europäisches Währungsinstitut, 1997 - Stand: Juli 1997

100 Euro Banknote aus Österreich
Alle Rechte vorbehalten. Die Anfertigung von Photokopien für Ausbildungszwecke und nicht-kommerzielle Zwecke ist gestattet, vorausgesetzt, die Quelle wird angegeben. Aus Sicherheitsgründen sind in den abgebildeten Entwürfen nicht sämtliche Einzelheiten und Sicherheitsmerkmale wiedergegeben, die die endgültigen Euro-Banknoten aufweisen werden.

Anleitung zu Beispiel 2:
Zuerst wurde in der CSS-Datei common.css 3 neue “Klassen” angelegt.

Die erste für die Ausrichtung des Bildes auf der linken Seite mit der Bestimmung, dass der Text nicht wie standardmässig unter dem Bild sondern neben dem Bild erscheint sowie den Hintergrund des Bildes [hier Gelb] sowie den Abstand zum Rahmen und die Rahmenfarbe und -stärke.

img.leftborder2 {
clear: both;
float: left;
margin: 0em 0.7em 0 0;
background: #ffff00;
padding: 1em;
border: 1px solid #ff00ff;
}

Die zweite neue “Klasse” definiert den Abstand zum darauf folgenden Text und die Farbe des Hintergrundes [Hintergrund von Bild und nebenstehenden Text].

.borderdistance {
background-color: #efefef;
margin: 0;
padding: 0em 0em 4em;
}

Und die dritte neue “Klasse” gibt dem Text sein neues Aussehen - okay, Schönheitspreis werde ich für diese Gestaltung nicht erhalten :-) doch es soll die Möglichkeiten einer individuellen Formatierung wiedergeben.

p.borderdistance {
font: italic 0.75em verdana, sans-serif;
color: #ff00ff;
text-align: justify;
}

Und abschliessend der Vollständigkeit halber auch noch der HTML Code der eingefügt wurde.

[html]
<p class="borderdistance">
<img class="leftborder2" src="http://www.vienna-webdesign.at/blog/fp-content/images/euro100.jpg" alt="100 Euro Banknote aus Österreich" width="185" height="103" />
Alle Rechte vorbehalten. Die Anfertigung von Photokopien für Ausbildungszwecke und nicht-kommerzielle Zwecke ist gestattet, vorausgesetzt, die Quelle wird angegeben. Aus Sicherheitsgründen sind in den abgebildeten Entwürfen nicht sämtliche Einzelheiten und Sicherheitsmerkmale wiedergegeben, die die endgültigen Euro-Banknoten aufweisen werden.</p>
[/html]