User Tutorial zu CSS Styles & HTML im Forum
 

Kapitel 2 : Bilder mit CSS ausrichten

Forum 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.
 

Basketball


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
Wetten Forum & allgemeine Diskussion
Wetten Sportwetten Tipps
Wettforum und Wett-Tipps Wettforum und Wett-Tipps
Archiv Archiv
Wetten Sport allgemein
Wetten Statistiken
Wetten Bonus Angebote & Vergleich
Fussball Fussball aktuell
Tennis Tennis aktuell
Eishockey Eishockey aktuell
Basketball Basketball aktuell
CSS Forum   Valid HTML 4.01 Transitional   CSS ist valide!
Sportwetten Forum © 2011 Sportwetten Forum & Tipps Wettpoint.com