Peruns Weblog - Webwork und Internet

Jens Meiert geht in seinem Bericht Image-Replacement-Techniken auf die Vor- bzw. Nachteile versch. Techniken ein, mit denen man die Text-Überschriften durch Grafiken ersetzen kann.

Die neue Version des (X)HTML-Kompendiums ist verfügbar.

Neu in der Version 8.1 ist unter anderem das neue Unterkapitel über CSS-basierte Layouts, ein neues Hauptkapitel Kapitel über Webserver/CGI. Die Symbolauszeichnungen, welcher Browser welche Features unterstützt und zu welchem Standard diese gehören oder nicht gehören, wurden aktualisiert.

Wer es mag, kann sich das Paket auch hier aus dem Downloadbereich herunterladen.

Via: SelfHTML Newsticker

Auf A List Apart wird im neuesten Artikel beschrieben, wie man zwei Listen nebeneinander postionieren kann und wie man dabei die gängigen Browser bedient.

In den Kommentaren zu dem Artikel gibt es einige Verbesserungsvorschläge und alternative Lösungen.

Geordnete und ungeordnete Listen sind mittlerweile sehr beliebt geworden um eine Navigation zu realisieren. Dies ist (meistens) semantisch richtig und mittels CSS bieten sich vielfältige Getsaltungsmöglichkeiten. Siehe dazu: Navigationsmenüs mit Listen.

Um dem Besucher die Orientierung innerhalb der Website zu erleichtern bietet es sich an, die aktuelle Position innerhalb des Navigationsmenüs hervorzuheben. (weiterlesen…)

Durch den Einsatz von CSS ist es möglich horizontale und vertikale Navigationsmenüs über die Listenelemente zu erstellen. Aber warum sollte man dies machen? Dafür gibt es 2 Gründe. Zum einem ist die Navigation einer Website nichts anderes als eine Auflistung von Verweisen bzw. Links, obwohl sich speziell im Fall der horizontalen Menüs manche Geister streiten. Somit setzt man (X)HTML semantisch richtig ein. Außerdem bieten Listenelemente vielfältigere Formatierungsmöglicheiten.

(weiterlesen…)

Schon seit HTML 2.0 sind die logischen Verweise (relational links) verfügbar. Geckos (Mozilla, Firefox [Erweiterung], Netscape 7.x & Co.) und Opera integrieren diese Verweise direkt in der Kopfleiste und geben dem Webmaster und User die Möglichkeit einer alternativen Navigation und/oder bringen Unterseiten in ein logisches Verhältnis zueinander.

Leider scheitert es wiedermal am Internet Explorer, er zeigt sie nicht an. Auch in der 6er Version nicht. Aber wir dürfen nicht zu streng sein, denn HTML 2.0 gibt es erst seit 1995.

Je nachdem, sind einige logische Verweise schon bekannt, die zwei bekanntesten sind:

• <link rel="stylesheet" href="dateiname.css" type="text/css" />
• <link rel="shortcut icon" href="dateiname.ico" />

Mit dem ersten logischen Verweis bindet man eine externe CSS-Datei ein und mit dem zweiten wird ein Favicon eingebunden. Jedoch interessieren uns diese beiden Verweise in diesem Bericht nicht. Denn diese beiden Verweise haben eine sehr breite Unterstützung (CSS-Einbindung unterstützt ziemlich jeder CSS-fähige Browser) und der Favicon wird von moderneren Browsern unterstützt (in unterschiedlichem Umfang). Zudem dienen sie nicht dem Zweck einer "alternativen" Navigation.

Daher werden wir uns den anderen logischen Verweisen zuwenden. Der logische Verweis beginnt mit der HTML-Markierung <link>. Der Typ der logischen Beziehung wird durch rel="…" (oder rev="…") vorgegeben. Daraufhin folgt die Angabe der Quelle (href="verweis") und des Titels (title="titel"). Hier einige Beispiele, die in den Kopfbereich (Head) eingebunden werden können:

• <link rel="start" href="index.html" title="Titel der Website" />
• <link rel="contents" href="inhalt.html" title="Inhaltsverzeichnis oder Sitemap">
• <link rel="help" href="faq.html" title="FAQ - Fragen und Antworten" />
• <link rel="search" href="suche.html" />
• <link rel="copyright" href="impressum.html" />
• <link rel="author" href="mailto:bla@blubb.net" title="Mail" />
• <link rel="bookmark" href="http://www.perun.net" title="Perun.net" />

Möglich sind auch eigene Kreationen, diese werden leider nur von Mozilla unterstützt. Opera 7.x tut es leider (AFAIK) nicht. Nehmen wir mal an, man möchte auf den Downloadbereich der Seite verweisen:

• <link rel="downloads" href="downloads.html" title="Downloadbereich" />

Die Möglichkeiten, die sich anbieten sind vielfältig: man kann eine alternative Inhalte und CSS-Dateien anbieten, Unterseiten in Kapitel zusammenfassen, alternative Navigation anbieten, Wordpress bietet so auch ein alternatives Archiv an etc.

Daher habe ich auch drei Links zu weiteren Berichten eingefügt:

• SelfHTML
• Stichpunkt.de
• DrWeb

Übrigens in Mozilla kann man die Anzeige der logischen Verweise unter "Ansicht" –> "Anzeigen/Verstecken" –> "Site-Naviagtionsleiste" an- und ausschalten.

Ich habe gestern und vorgestern an einem neuen Template gebastelt und habe es jetzt soweit fertig. Dabei habe ich die meiste Zeit an einem horizontalem Listen-Menü verloren.

Es handelte sich eigentlich um ein einfaches Konstrukt, die Links sollten horizontal angeordnet werden und als Hover-Effekt sollte unter jedem Link ein 3 Pixel breiter Rahmen erscheinen, zusätzlich sollte das Menü neben dem Logo erscheinen.

Wie gehabt, Mozilla machte keine Probleme. Allerdings zeigt Internet Explorer 6 nur 1 von den 3 Pixeln des Rahmens. OK, ein bißgen an Padding gebastelt, dann ging es hier auch. IE 5.5 gab sich soweit zufrieden. Opera 7.5x auch.

ABER, IE 5.0 nicht. Um die Listenelemente horizontal anzuordnen musste man ihnen die Eigenschaft display: inline; vergeben. In diesem Falle ignoriert IE 5.0 jegliche Padding- und Marginangaben innerhalb der Listen. Der Hovereffekt wurde natürlich auch nicht angezeigt. Daher musste ich entweder den Listenelementen oder den Links display: block; und float: left; vergeben. IE 5.0 schluckte dies und zeigte alles brav an. Allerdings bockte Opera jetzt, die Liste erschien vertikal angeordnet.

Wat nun? Einen Hack wollte ich nicht einsetzen. Die einzige Möglichkeit war die ganze Liste innerhalb eines Div-Blocks zu verpacken und dem Div musste man eine Breite vergeben. Das war wiederum nicht gut, weil die Liste je nach Anzahl der Elemente, logischerweise, in ihrer Breite variiert. Daher habe ich auf die verzichtet.

Lange rede kurzer Sinn. Horizontale Listenmenüs sind zwar was feines und man kan sehr schöne Menüs damit realisieren. Aber wenn es darum geht sie innerhalb bestimmter Elemente zu positionieren oder z. B. neben dem Logo zu platzieren, dann bockt der eine oder andere Browser.

Hacks, um z. B. Netscape 4.x und/oder IE 5.x (Mac) auszusperren, sind OK. Da diese Browser nicht mehr weiterentwickelt werden und es sich im Falle von NN 4.x (import-Weiche) um imho keinen richtigen Hack handelt sondern um die Unfähigkeit des Browser die import-Angabe zu interpretieren.

Aber all die anderen Hacks können ins Auge gehen, je nach dem wie der Browser weiter entwickelt wird, könnte es sein das die dann genau diesen Hack dann doch interpretieren können.