User Tutorial zu CSS Styles & HTML im Forum
 

Kapitel 1 : Bilder

Forum Rahmen eines Bildes anpassen

Angenommen wir wollen mit CSS Code auf einer Seite die vorhandenen Bilder mit einem Rahmen versehen.
Bilder, mit Außnahme von Hintergrundbildern, werden mit dem HTML-Element "img" definiert.
Hier werden nun 3 Varianten vorgestellt, die Bilder unter Verwendung von CSS mit Rahmen versehen können.
Zur Anwendung kommen solche Dinge vielfach, zum Beispiel in unserem Ergebnis Dienst.
 
a) im Quelltext dem Element "img" noch ein Attribut style hinzufügen
b) im Header-Bereich die Style-Anweisungen für das Element "img" definieren
c) im Header-Bereich die Style-Anweisungen für das Element "img" definieren und zusätzlich die Stylesheeht-Klasse angeben,
um nur auf bestimmten Bildern die Style-Anweisungen anzuwenden

CSS Variante a)
Hier wird der Style direkt im HTML-Element "img" festgelegt, weshalb dieser Style dann auch NUR FÜR DAS ELEMENT gilt.
<img src="http://fussball.wettpoint.com/images/h2h/1002/6162-6165.png" style="border-width:3px; border-style:dotted"/>


CSS Variante b)
Hier wird der Style global festgelegt. Das "img" vor der geschweiften Klammer bedeutet, dass die eingeschlossenen Styles
auf alle Elemente des Typs "img" angewendet werden.
Also werden, nach unserem Beispiel, alle "img"-Elemente auf der kompletten Seite mit einem gepunkteten Rahmen versehen.
<style type="text/css">
img
{
	border-width	:	3px;
	border-style	:	dotted;
}
</style>


CSS Variante c)
Hier wird der Style ebenfalls global festgelegt.
Zudem wird hier mit dem Zeichen "." nach dem "img"-Element auf eine so genannte Stylesheet-Klasse referenziert.
In unserem Beispiel wird also die Stylesheet-Klasse "test" verwendet --> "img.test".
Aber was bringt uns das ?
Nun können wir bei den Bildern, 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 Bilder auf seiner Seite, versieht man jedes Bild, was den zuvor definierten Style anwenden soll
mit dem attribut "class" und als Wert setzt man den Namen der zu verwendenen Stylesheet-Klasse.
Solche Varianten lassen sich im Wettpoint onlinewetten Forum in Threads finden wie z.B. Bet365 Auszahlung sowie
in User Kategorien wie Wettanbieter Vergleich, Liveticker oder Tabellen zu Stats.
Das dazugehörige "img"-Element zu unserem Beispiel sieht dann so aus:
<img class="test" src="http://fussball.wettpoint.com/images/h2h/1107/810-817.png"/>
<style type="text/css">
img.test
{
	border-width	:	3px;
	border-style	:	dotted;
}
</style>

Alle Varianten bewirken das folgende Ergebnis bei einem Bild,
dazu mal ein Beispiel aus dem H2H Bereich unserer Fussball Statistiken,
diese H2H Bilder gibt es natürlich auch in anderen Wett Stats der Datenbank
bzw. Statistiken oder der Bonus Kat im Sport Wetten Forum von Wettpoint :
 
Fussball H2H
 
 
Zurürck zur CSS Tutorial Übersicht : CSS & HTML im Forum
 
 
Wettpoint Übersicht und Sportwetten Forum Index Wetten
Wetten Wett Forum & allgemeine Diskussion
Wetten Sportwetten Tipps
Wettforum und Wett-Tipps Wettforum und Wett-Tipps
Archiv Sportwetten Forum 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