Felix Riesterer: Probleme mit semantischem Markup

Beitrag lesen

Liebe Franziska,

ey there,

whassup?

ich bastle gerade einen neuen Banner für meine Website.

ey, boah ey!

Der Quelltext sieht folgendermassen aus:

Nö, sieht er nicht. Laut http://flyingmaniac.compi-01.de/neu.html hat der Quelltext nämlich einiges mehr zu bieten. Ich zeige hier einmal die Highlights:

<html>  
<head>  
[...]  
</head>  
<body>  
<body>[Is das nich cool? Doppelt genäht hält viiiel besser...]  
<div align="center">  
<div style="background-color:#FFFFFF; [...] padding-bottom:15px;">  
[Warum CSS? es geht doch auch inline oder mit altmodischen Attributen...]  
<img src="../Pictures/bannernew.jpg" alt="kellybishop.de.vu">  
[In welchem Kontext steht dieses Bild? Das sollte als CSS-Hintergrundbild eingebunden werden!]  
<div style="position:relative; top:-22px; left:270px; width:537px;">  
<img src="../Pictures/navigation.gif" alt="Navigation" usemap="#Navigation" style="border:none;">  
[Dieses Bild braucht einen echten Kontext! Nicht nur so ein div...]  
</div>  
[Jetzt kommt eine erste Überschrift in diesem Dokument:]  
<h2><a href="/index.html">Home</a></h2>  
[Huch! Wenn das eine _Unter_überschrift ist, wo ist dann die _Haupt_überschrift dazu? Unlogische Dokumentstruktur!]  
<h2>Credits</h2>  
[Oha! Gleich die nächste Unterüberschrift auf gleichem Level. Wo war denn der Inhalt zur vorigen Unterüberschrift?]  
<p>[...]</p>  
<h2>Disclaimer</h2>  
<p>[...]</p>  
<h2>Contact Kelly</h2>  
<p>[...]</p>  
<h2><a href="../guestbook.html">Guestbook</a></h2>[Das gehört doch eigentlich in eine Navigation, oder?]  
<h2><a href="mailto:emilynismus@gmx.net?subject=Kelly Bishop.de.vu">Contact Webmaster</h2>[Das hier ebenfalls!]  
</div>  
</div>  
</body>  
</html>

Hat eventuell jemand eine Ahnung woran das liegen könnte?

Ich hab mich jetzt ausführlich über Schwächen Deines HTML-Quelltextes ausgelassen. Das war nicht, um Dir zu zeigen, wie gut (oder weniger gut) Deine HTML-Künste sind, sondern um Dir zu zeigen, was Du verbessern solltest, _bevor_ Du daran gehst, die Darstellungsunterschiede im IE zu kurieren.

Warum? Deshalb: Wenn Du alles Darstellungstechnische in eine externe CSS-Datei auslagerst, dann kannst Du für den IE (bzw. explizit für seine verschiedenen Versionen) gesonderte CSS-Dateien einbinden, die eben diese Darstellungsfehler kurieren. Ich mache das auch so. Zusätzlich musst Du nicht in jeder Seite identischen CSS-Code wiederholen, sondern kannst das <style>-Element dann für seiten-spezifische Extras benutzen, die auf jeder Seite eben anders sind.

Also: Nimm Deine <div>s und verleihe ihnen IDs und schmeiß den ganzen inline-Styles-Kram wieder raus. Nutze die IDs in Deinem CSS-Code, um die divs zu gestalten. Verwende Dein neues Banner als Hintergrundbild (sollte im IE dann sofort besser werden) und überlege Dir nocheinmal sehr genau, wie Du <h1>, <h2> und dergleichen einsetzt. Deine Navigation solltest Du generell technisch nocheinmal überarbeiten.

Ansonsten gefällt mir die Optik Deiner Seite sehr!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)