XHTML/CSS Template

[mschoening]

Hi,
ich habe mal ein Standard XHTML 1.0 Transitional Template (inkl. Stylesheet) geschrieben. Es sollte als Anfang für jede beliebige (X)HTML Seite dienen.

DOWNLOAD
Letzte Änderung: 22 August 2007​

Inspired by Manuela Hoffmann (Pixelgraphix) und "Professionelles Webdesign mit (X)HTML & CSS".

 

[pepi]

Kritikpunkte Markup:
Sollte heutzutage XHTML 1.1 sein.
Es fehlt die XML Präambel.
Die Navigation logisch in den Header zu verfrachten ist von der Struktur her nicht sinnvoll. (Die Navigation sollte gliederungstechnisch nach dem Content kommen, und vor dem Footer. Die optische Darstellung wird per CSS erledigt.)

Kritikpunkte CSS:
Es fehlt eine a und eine a:active Definition.
Klassennamen wie s und c sind nicht intuitiv und schon garnicht deskriptiv.
Die Klasse .s (small) ist semantisch bedeutungslos und entspricht daher nicht den Usability und Accessibility Empfehlungen. Eine Klasse sollte immer eine semantische Bedeutung optisch repräsentieren. "Small" hat inhaltlich keine Bedeutung.
In der font Definition von body fehlen jegliche Fallback Definitionen.

Positives:
Sowohl Markup als auch Stylesheet sind syntaktisch korrekt. Beides ist zumindest minimal kommentiert (wobei das noch verbesserungswürdig ist).

Off-Topic:
Ich persönlich würde das #img_signature {visibility:hidden}; in Deiner Signatur durch #img_signature {display:none;}; ersetzen. Bei gesetzter visibility wird immer noch der Platz für die Signaturgrafik beim Rendering reserviert. Der Strichpunkt gehört in die Klammer.
Gruß Pepi

 

[Peter Maurer]

Was Du mit der Umfrage eigentlich erreichen willst, hast Du leider nicht erwaehnt.

Abgesehen davon ist Dein Template dem klassischen XHTML-Denkfehler zum Opfer gefallen, den wir schon oefter diskutiert haben: Du lieferst Deinen Inhalt als "text/html" aus, also behandelt jeder Browser ihn als HTML.

Zitat aus dem oben verlinkten Artikel:

In particular, none of the following things will cause your document to be treated as XHTML:

Using an XHTML doctype declaration
Putting an XML declaration at the top
Using XHTML-specific syntax like self-closing tags
Validating it as XHTML

Und die selbstschliessenden <tags /> in Deinem HTML-Code werden nur deshalb nicht als Fehler gemeldet, weil gaengige Browser das "/"-Zeichen als unbekanntes Attribut ignorieren.

 

[mschoening]

XHTML/CSS Template v1.0

DEPRECATED. AKTUELLE VERSION IM ERSTEN BEITRAG.

DOWNLOAD​

** Der DOWNLOAD funktioniert zur Zeit nicht. Ich schicke euch das Template gerne per PN auf Anfrage **

Hi,
ich bedanke mich noch mal für die konstruktive Kritik. Als erstes möchte ich auf die Mengel von pepi zurückkommen!

KRITIKPUNKTE MARKUP:
-Ich habe jetzt 3 mögliche DOCTYPES zur Auswahl integriert (die zwei DOCTYPES die nicht verwendet werden werden gelöscht).
- Die XML Präambel habe ich in der ersten Zeile eingefügt (Frage: ist es so richtig?).
- Die Navigation habe ich nicht so wie vorgeschlagen unter dem Inhalt platziert. Dies halte ich für wenig sinnvoll! Bei Benutzern, die CSS ausgeschaltet haben ist die Navigation dann nicht auf den ersten Blick sichtbar! Die Navigation gehört auf jeden Fall in das "header"-Tag. Ob man für die Navigation ein eigenes DIV verwendet (auf gleicher Höhe wie "header" "content" und "footer") ist einem letzendlich selbst überlassen.

KRITIKPUNKTE CSS:
- Die fehlende a und a:active Definition habe ich eingefügt.
- Die Klassennamen wie s und c sind sehr persönlich gewählt und meiner Meinung nach Geschmackssache! Ich habe diese kurzen Selektoren nicht aus Willkür gewählt. Wenn man einem DIV eine "id" und eine "class" zuweist finde ich es von Vorteil wenn der "class"-Name möglichst kurz ist.
- Small hat keine inhaltliche Bedeutung. Korrekter wäre "Smaller", doch auch dies wage ich zu vernachlässigen.
- Was meinst du mit Fallback Definitionen in der font-Definition des "bodies"? Kannst du mir vielleicht ein Beispiel zeigen?

Da ich gerne einen übersichtlichen Quellcode habe, benutze ich nur so viel Kommentierung wie notwendig um die einzelnen Selektoren und Markups zu verstehen.

Off-Topic: Ich finde es auf jeden Fall sehr witzig das du daraufhinweist! *Pluspunkt*. Ich hatte vorher display:none gewählt, doch genau aus dem von dir genannten Grund habe ich mich für visibility:hidden entschieden. Ich hätte ja gerne eine Bildsignatur und möchte sie nicht unterdrücken sondern nur damit ausdrücken das keine sichtbar ist, der Platz aber frei ist und ich gerne eine hätte! Der Strichpunkt ausserhalb der Klammer war ein Tippfehler.

------

Abgesehen von den Änderungen die ich durch die Kritik von pepi vorgenommen habe, sind noch weitere Änderungen geschehen. So habe ich im Header-Bereich deutlich mehr Elemente eingefügt. Bei einem Element bin ich mir jedoch nicht ganz sicher was ich in wirklichkeit nehmen sollte:

DAS:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

oder DAS:

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

Worin genau besteht der Unterschied? Wenn ihr mir dazu ein Link oder eine kurze Erklärung schicken könntet wäre ich euch auch sehr dankbar. Auch interessiert es mich, wann man die verschiedenen DOCTYPES am besten anwendet (die ich im Template im Header-Bereich definiert habe).


Vielen Dank! und ich hoffe der ein oder andere kann mit dem Template etwas anfangen, obwohl ich persönlich sagen muss: jeder sollte sein eigenes Template anfertigen!

 

[stk]

Moin,

mir fiele noch ein einem ausgewählten Navigationslink eine extra Klasse zuzuweisen (statisch für's Template, Zuweisung muß dann später natürlich dynamisch erfolgen) mit der im Sinne der Usability die Optik eines gerade angezeigten Menüpunkts angepaßt werden kann.

Desweiteren ist es oft hilfreich (auch hier wieder das Thema spätere Dynamik) dem body eine dynamische ID mitzuliefern, da hierüber komplette Seitengestaltungen im CSS kaskadiert werden können. Also: auf »body#typ1« kann ich komplett andere Definitionen für die nachfolgenden Kindelemente aufbauen, wie auf »body#typ2«.

Gruß Stefan

 

[Peter Maurer]

DAS:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

oder DAS:

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

Steht alles in dem Artikel, den ich weiter vorne verlinkt habe. Man beachte besonders den Absatz, der mit "HTML is probably what you want" ueberschrieben ist.

 

[mschoening]

Steht alles in dem Artikel, den ich weiter vorne verlinkt habe. Man beachte besonders den Absatz, der mit "HTML is probably what you want" ueberschrieben ist.

Okay alles durchgelesen. Muss erstmal verarbeitet werden.

 

[mschoening]

UPDATE:

DOWNLOAD
Letzte Änderung: 22 August 2007​

 

[mschoening]

Kritikpunkte Markup:
Sollte heutzutage XHTML 1.1 sein.

Dazu habe ich Folgendes gefunden:
http://www.w3.org/MarkUp/2004/xhtml-faq.html#mime11

Deswegen habe ich das DOCTYPE jetzt wieder auf XHTML 1.0 Transitional verändert.