Blog network 9rules has a new design. Very colorful and nice. Best feature is the network snapshot which shows random or recent posts or you favorite blogs from the 9rules network. Go, have a look.
Archive for the ‘XHTML’ Category
new design for 9rules
Saturday, November 5th, 2005Präsentation von douglas bowman im netz
Friday, July 29th, 2005Der Webmaster von stopdesign.com zeigt uns seine Folien zum Thema Tabellen rauswerfen
Valide Formulare per Knopfdruck
Monday, July 18th, 2005Mit dem FormBuilder baut man sich recht schnell ein Formular zusammen und vergisst mit Sicherheit nicht, den Inhalt zu validieren, die entsprechenden Felder als notwendig zu markieren oder eine Feldbeschreibung hinzuzufügen.
Das Ganze wird dann noch durch eine Vorschau vervollständigt.
(more…)
Webseiten Tipps bei BloggingPro
Tuesday, July 12th, 2005Gleich 2 Beiträge zum Thema Website Tipps hat Jacob (neuer Besitzer von Bloggingpro.com) veröffentlicht. Im Grunde natürlich nichts neues, aber schön auf den Punkt gebracht und mit netten Beispielen versehen.
Die Tipps reichen von dem richtigen DomainNamen, bis hin zum richtigen Verlinken.
So kommen wir evtl. auch mal höher in den Suchmaschinen.
Jacob sollte es eigentlich wissen, schließlich hat er mehrere bekannte Seiten wie cssvault.com oder auch blogcatalog.com.
windows desktop mit XHTML und CSS
Tuesday, July 12th, 2005Ein Windowsdesktop als Webseite. Designed natürlich mit XHTML und CSS! Und das nicht nur im aktuellen XP Stil, nein auch Classic oder Longhorn sind dabei: Multiple-Themed Windows XP CSS Desktop v1.0
yDSF Drop Shadow
Thursday, July 7th, 2005Mal wieder eine Anleitung, um schöne Schatten zu erzeugen. Das Ganze nur mit CSS und leider etwas unnützen Markup. Aber nett anzusehen.
schöne Bilder Gallerie mit CSS
Monday, July 4th, 2005Mal eine schöne Variante, um viele Bilder auf einer Seite darzustellen. Natürlich pure CSS!
CSS sliding photo-galleries
Mouseover DOM Inspector Favelet
Saturday, July 2nd, 2005Ein Bookmarklet oder Favelet, welches bei der Analyse einer Webseite hilft. Es zeigt alle Informationen eines Elements an, wenn man mit der Maus darüber fährt. MouseOver DOM Inspector Favelet
standard konforme links in ein neues fenster (wordpress plugin)
Saturday, July 2nd, 2005Ich weiss, dass es auch mit wordpress nur schwer gelingt, validen XHTML Code rauszuschmeissen, aber man sollte sich doch bemühen, so nah daran zu sein, wie nur irgend möglich. Das Tutorial geht davon aus, das externe Links mit rel="external" gekennzeichnet sind. Um dies zu erreichen, kann man das natürlich in seinem Post selbst erledigen, oder aber man nimmt sich das bereits vorhandene Plugin Identify External Links.
Dort gibt es eine Funktion, die man leicht für diese Zwecke editieren kann:
function parse_external_links($matches){
if ( wp_get_domain_name_from_uri($matches[3]) != wp_get_domain_name_from_uri($_SERVER["HTTP_HOST"]) ){
return '‘ . $matches[5] . ‘‘;
} else {
return ‘‘ . $matches[5] . ‘‘;
}
}
?>
man tausche einfach das class="extlink" mit rel="external" und schon sind die Links richtig markiert.
Nun gilt es noch das Javascript richtig einzubinden und mit dem Onload Event zu verbinden. Das Einbinden nimmt man entweder per Hand im header seines Themes vor, oder benutzt eine kleine WordPress Action:
function insert_externallinks_script(){
echo '';
}
add_action('wp_head','insert_externallinks_script');
?>
Natürlich muss die Datei externallinks.js dann im Stammverzeichnis des Webservers liegen. Jetzt muss in dieser Datei unter Umständen der Onload Event verbessert werden. Je nachdem, ob schon weitere Javascripts eingebunden wurden, überschreibt man sonst so den OnloadHandler.
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
externalLinks();
liveSearchInit();
}
} else {
window.onload = function() {
oldonload();
liveSearchInit();
externalLinks();
}
}
Es wird erst ausgelesen, ob schon eine Funktion mit dem OnloadHandler verknüpft wurde. Wenn nein, wird die neue Funktion damit verbunden, sonst wird eine neue Funktion erstellt, welche die alte aufruft und anschliessend die externalLinks(). Der Autor des livesearch-plugins wollte z.B. dass die livesearchInit per onload geladen wird:
Da dies aber jede vorher konfigurierte OnLoad Funktion überschreiben würde, habe ich sie kurzerhand hierhin verlagert. Und was soll ich sagen, externe Links öffnen sich in einem neuen Fenster und die LiveSuche funktioniert auch noch.
Mit Hilfe von CSS (Ja, auch CSS unterstützt Attribute Selektoren) kann man die externen Links dann auch noch gesondert stylen.
Bildunterschriften semantisch korrekt?
Thursday, June 30th, 2005Wichtig ist, dass das Ganze semantisch korrekt bleibt und mit möglichst wenig zusätzlichen Tags auskommt. Hier nun der Ansatz von Ulrike Häßler:
Wir benutzen eine Definitions-Liste, die ja bekanntlich dazu dient, einen Begriff mit entsprechenden Definitionen oder Erklärungen in Verbindung zu bringen. Wenn man nun das Bild als Begriff sieht, kann man eine Definitionsliste benutzen, um die Definition als Bildunterschrift zu setzen. Mit ein Wenig Style sieht das Ganze auch aus wie gewollt und floated sogar…
(Beispiel von der Entdeckerin!)

- Bildlegende
Passendes CSS:
dl.meImgLeft { float: left; margin-right: 1em; }
dl.meImgLeft dt { margin-bottom: 0; }
dl.meImgLeft dd { margin: 0; } // verhindert das Einrücken und den Abstand nach oben
So und der gewagte DOM Hacker könnte das Ganze dann noch automagisch regeln, indem er den TitleTag ausliest und dann das entsprechende XHTML um das Bild herum erstellt. Aber diese Arbeit soll denen überlassen sein, die es können.