1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

XHTML/CSS Template

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von mschoening, 16.07.07.

?

HTML vs. XHTML

  1. HTML

    4 Stimme(n)
    23,5%
  2. XHTML

    13 Stimme(n)
    76,5%
  1. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    #1 mschoening, 16.07.07
    Zuletzt bearbeitet: 22.08.07
    ImperatoR und Nathea gefällt das.
  2. pepi

    pepi Cellini

    Dabei seit:
    03.09.05
    Beiträge:
    8.741
    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
     
    mschoening gefällt das.
  3. Peter Maurer

    Peter Maurer Carmeliter-Renette

    Dabei seit:
    16.03.04
    Beiträge:
    3.274
    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:

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

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    XHTML/CSS Template v1.0

    DEPRECATED. AKTUELLE VERSION IM ERSTEN BEITRAG.


    ** 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:
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    oder DAS:
    Code:
    <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!
     
    #4 mschoening, 17.07.07
    Zuletzt bearbeitet: 22.08.07
  5. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    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
     
  6. Peter Maurer

    Peter Maurer Carmeliter-Renette

    Dabei seit:
    16.03.04
    Beiträge:
    3.274
    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. :)
     
  7. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Okay alles durchgelesen. Muss erstmal verarbeitet werden.
     
  8. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    UPDATE:

    DOWNLOAD
    Letzte Änderung: 22 August 2007
     
    #8 mschoening, 19.08.07
    Zuletzt bearbeitet: 22.08.07
  9. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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.
     

Diese Seite empfehlen