CSS Styles im Forum
Kapitel 2 : Bilder - CSS Styles und HTML im Forum
Kapitel 2 : CSS & HTML im Forum
|
CSS Styles im Forum
Kapitel 2 : Bilder - CSS Styles und HTML im Forum
|
|
|
| User Tutorial zu CSS Styles & HTML im Forum |
Kapitel 2 : Bilder mit CSS ausrichten Bilder mit Hilfe von CSS ausrichten
Nun wollen wir die Ausrichtung der Bilder auf einer Seite anpassen. Bilder können vertikal und horizontal ausgerichtet werden. Wir verwenden hier wieder die zuvor vorgesttellen Varianten: a) im Quelltext ein Attribut style hinzufügen b) im Header-Bereich die Style-Anweisungen definieren c) im Header-Bereich die Style-Anweisungen definieren und zusätzlich die Stylesheeht-Klasse angeben CSS Variante a) Hier wird der Style direkt im HTML-Element "div" festgelegt, weshalb dieser Style dann auch NUR FÜR DAS ELEMENT, WAS INNERHALB DES "div"-ELEMENTS LIEGT, gilt. <div style="height:200px; width:400px; border-style:solid; display:table-cell; vertical-align:bottom; text-align:center" /> <img src="http://basketball.wettpoint.com/images/charts/80427.png" /> </div> CSS Variante b) Hier wird der Style global festgelegt. Das "div" vor der geschweiften Klammer bedeutet, dass die eingeschlossenen Styles auf alle Elemente des Typs "div" angewendet werden.
<style type="text/css">
div
{
height : 200px;
width : 400px;
border-style : solid;
display: table-cell;
vertical-align: bottom;
text-align: center;
}
</style>
CSS Variante c) Hier wird der Style ebenfalls global festgelegt. Zudem wird hier mit dem Zeichen "." nach dem "div"-Element auf eine Stylesheet-Klasse referenziert. In unserem Beispiel wird also die Stylesheet-Klasse "test" verwendet --> "div.test". Nun können wir bei den "div"-Elementen, bei denen der Style angewendet werden soll, diese Stylesheet-Klasse auswählen, so dass auch nur diese Elemente entsprechend des Styles angepasst werden. Hat man also zwei oder mehrere den "div"-Elemente auf seiner Seite, versieht man jedes, was den zuvor definierten Style anwenden soll mit dem attribut "class" und als Wert setzt man den Namen der zu verwendenen Stylesheet-Klasse. Dies ist ansich eine gute Möglichkeit, die sich beispielsweise auch bei unserer Gutschein Liste bzw. Wett Bonus Kategorie oder im Bereich Fussball Ergebnisse oder im Wettforum / Sportwetten Forum selbst für Bilder neuer Einträge der Wettscheine der User oder auch sogar im Ergebnis Dienst (für die L-Bilder) eignen würden.
<style type="text/css">
div.test
{
height : 200px;
width : 400px;
border-style : solid;
display: table-cell;
vertical-align: bottom;
text-align: center;
}
</style>
Alle Varianten bewirken das folgende Ergebnis:Hier mal unseren Basketball Statistiken des Forums (H2H) entnommen. Hierbei gibt es aber ein Problem, was eventuell schon aufgefallen ist. Für die Nutzer des Internet Explorers von Microsoft wird diese Seite nicht korrekt dargestellt, da dieser Browser die vertikale Ausrichtung in einem Blockelement nicht beherrscht. :-( Vielleicht sollte man dann doch eher auf eine Tabelle ausweichen, da das Zellenelement "td" auch in den verschiedenen Browsern diese vertikale Ausrichtung umsetzen kann. Zurürck zur CSS Tutorial Übersicht : CSS & HTML im Forum |
| Wettpoint Übersicht und Sportwetten Forum Index | ||
|---|---|---|
 Forum & allgemeine Diskussion Sportwetten Tipps
Wettforum und Wett-Tipps
Archiv |
Sport allgemein Statistiken
Bonus Angebote & Vergleich |
 Fussball aktuell Tennis aktuell Eishockey aktuell
 Basketball aktuell |
 |
 © 2011 Sportwetten Forum & Tipps Wettpoint.com |