Aktuelle Tipps
Mit der Pseudoklasse „nth-child“ können wir die Spalten und/oder Zeilen unterschiedlich farbig hinterlegen.
Gerade Spalten mit „even“
Ungerade Spalten mit „odd“
Beispiel-Tabelle:
| 1.Zeile, Eintrag1 - | Eintrag2 - | Eintrag3 |
| 2.Zeile, Eintrag1 - | Eintrag2 - | Eintrag3 |
| 3.Zeile, Eintrag1 - | Eintrag2 - | Eintrag3 |
| 4.Zeile Eintrag1 - | Eintrag2 - | Eintrag3 |
Der CSS-Code dazutr:nth-child(even) {background-color: #66CCFF;}
tr:nth-child(odd) {background-color: #FFFF33;}
Mit folgendem Code kann eine bestimmte Zeile eingefärbt/hervorgehoben werden
tr:nth-child(3) {
background-color: #999900;
}
Mit folgendem Code wird jede zweite Zeile
mit der gewählten Farbe hinterlegt
tr:nth-child(2n) {
background-color:#33F;}
Und mit diesem wird jede zweite Zeile
ab der sechsten Zeile mit der gewählten Farbe hinterlegt
tr:nth-child(2n+6) {
color:#000;
background-color:#CCCC33;
}
Natürlich lassen sich auch andere Elemente,
so zbsp. eine Liste aus untereinander stehenden
<p> Elementen mit folgendem Code wechselweise mit farbig
unterschiedlichem Hintergrund erstellen
p:nth-of-type(even) {
background-color: #ffff99;
}
Tipps und Tricks
Auf diesen Seiten werden Tipps und Tricks für Webseiten gezeigt und die Möglichkeiten von HTML5 in Kombination mit CSS3 erklärt.
Hallo Webbär, Fragen bitte in Zukunft per E-mail stellen.
Hier nun meine Lösung: Text zum Artikel/Objekt hinter dem Bild bei Mouseover zeigen
Jochen R. fragt: Wie kann ich eine Schrift mit etwas Abstand zum Untergrund darstellen.
Meine Antwort: Probiere mal text-shadow aus und zwar so: text-shadow: 4px 4px 4px #000;
Diesen Text in eine Klasse(class-name zBsp. "schatten") im CSS-Teil schreiben und dann diese Klasse mit class="schatten" im Schriftelement(p, h1-h6 usw.) einbinden.
Schau Dir im CSS3-Teil dieser Homepage einmal "einfliegen die zweite" an.
Thomas fragt: Wie stelle ich es an, das meine Seite offline genutzt werden kann?
Meine Antwort: Du musst ein cache.manifest anlegen, dieses manifest in deiner Startdatei aufrufen und das manifest plus Startdatei danach auf Deinen Server überspielen,
bitte genau in den Ordner in dem Deine Startdatei (index.html-index.php oder default.html-default.php) liegt.
Das geht am leichtesten mit manifestR
Rufe diese Webseite auf und ziehe den Link in Step 1: drag manifestR
oder gleich diesen von mir aus dem Seitenquelltext von http://westciv.com/tools/manifestR/ kopierten
und hier eingefügten Link manifestR
in die Lesezeichenleiste Deines Browser.
Rufe dann Deine Webseite auf und klicke wenn diese geladen ist, in Deiner
Lesezeichenleiste auf manifestR, dort wird dann der Inhalt Deiner cache.manifest-Datei
(Beispiel der cache.manifest-Datei dieser Seite
)
angezeigt. Diesen kopierts Du mit STRG+C und fügst ihn dann in eine per Datei-Neu erstellte Seite Deines Texteditors.
Danach gehst Du auf Datei speichern unter und gibst in das nun geöffnete Fenster cache.manifest ein! Diese verlinkst Du in Deiner Startdatei direkt unter <!doctype html>
per <html manifest="http://www.deine_webseite.de/cache.manifest">.
Deine geänderte Startdatei+cache.manifest musst Du wieder auf Deinen Server kopieren und schon ist Deine Webseite offline voll verfügbar!