Preloading ist eine beliebte Technik für wechselnde Hintergrundbilder. Doch braucht man dafür kein JavaScript oder gar PHP-Code. Mit CSS lassen sich Hintergrundbilder ganz einfach vorladen, wenn man folgenden CSS-Stil einheitlich einhält:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | a { background-image: url('hover_on.png'); } a:link, a:visited { background-image: url('hover_off.png'); } a:hover, a:focus { background-image: url('hover_on.png'); } |
Durch die Hintergrundbild-Definition im a-Tag wird das hover-Bild schon vorgeladen, was aber durch die Definition a:link für den Benutzer nicht sichtbar wird. So kann man gezielt, einfach und browser-kompatibel die wechselnden Bilder im Voraus laden.
Die ID für einen WordPress-Artikel oder eine WordPress-Seite kann man über das Template Tag the_ID(); herausbekommen. Leider ist dieses Template-Tag nur innerhalb des “Loop” verwendbar.
Um auch außerhalb vom Loop an die ID zu gelangen, muss in der functions.php (im Template-Ordner) folgender Code stehen:
<?php if ( function_exists('register_sidebar') ) register_sidebar(1); ?>
Danach kann man in jeder beliebigen Template-Datei die Nummer mit folgendem Befehl ausgeben:
<?php echo $post->ID ?>
Vielen Dank an Vladimir Simovic für seinen Beitrag: “WordPress: extra CSS-Regeln pro Seite oder Artikel“.
Auf der Suche nach einem neuen Hintergrundbild für mein HTC Hero bin ich heute auf G1Wallz.com gestoßen. Dort gibt es eine Unmenge an Wallpapers für Android Smartphones.
Die Hintergrundbilder haben eine Auflösung von 640 x 480 Pixel und sind damit für alle Android-Telefone mit mehreren Homescreens und einer Billdschirmauflösung Auflösung von 480 x 320 Pixel geeignet.
Darunter fallen zum Beispiel das HTC Dream (T-Mobile G1), HTC Magic und das HTC Hero (T-Mobile G2 Touch).
Bei der Darstellung von HTML-Elementen und CSS-Formatierung gibt es zwischen dem Internet Explorer 8 und dem Internet Explorer 7 gravierende Unterschiede. Besonders die verschiedene Interpretation von Abständen (padding, margin) bereiten Web-Entwicklern große Probleme.
Sehr oft musste man Conditional Comments benutzen, um die verschiedenen Anzeigen zu bewältigen. Doch damit ist jetzt Schluss! Microsoft hat im IE8 eine Funktion zur Abwärtskompatibilität eingebaut, so dass es möglich ist, das Anzeigeverhalten vom IE8 auf das Anzeigeverhalten vom IE7 einzustellen.
Dafür ist nur folgender Code nötig:
<html> <head> <!-- Mimic Internet Explorer 7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>Titel</title> </head> <body> <p>Diese Webseite sieht im IE8 so aus wie im IE7.</p> </body> </html>
Falls der Internet Explorer die Angabe margin: auto; zum Zentrieren von DIV-Containern nicht befolgt, dann hilft dieser Trick:
#container { position: relative; width: 600px; left: 50%; margin-left: -300px; }
Mit left: 50%; wird der Container um 50% des Anzeigebereichs nach rechts verschoben. Das ist etwas zu viel, deshalb muss man die halbe Breite bei margin-left angeben, um die Verschiebung auszugleichen und das DIV mittig zu positionieren.
Möchte man in einem vorgegebenen Link den Text unsichtbar machen und durch ein Hintergrundbild ersetzen, so ist das Erste was einem einfällt color: transparent; für die Linkfarbe. Leider ist diese Eigenschaft nicht spezifiziert in CSS 2.1.
Trotzdem möchte ich eine Möglichkeit zeigen, die nach CSS 2.1 gültig ist und im Internet Explorer 6-8 sowie im Mozilla Firefox funktioniert. …weiterlesen
0