Gunnar Bittersmann: Dieses mehrspaltige Layout HTML5-Konform ohne JS-Hilfe umsetzen

Beitrag lesen

@@subsurf:

nuqneH

<style type="text/css">
/* <![CDATA[ */
[…]
/* ]]> */

Was hat das in einem (nicht polyglotten) HTML5-Dokument zu suchen?

(Zu einem polyglotten HTML5-Dokument fehlt zumindest die Namensraumangabe im Wurzelelement. Außerdem bin ich mir nicht sicher, ob man dies bei XHTML5 überhaupt machen müsste. Selbst bei XHTML 1.x ist die Kennzeichnung von CSS-Code (im Gegensatz zu JavaScript-Code) als CDATA nur in ganz wenigen Ausnahmefällen notwendig.)

<div id="left">
<!-- Inhalt der vertikalen Navigation -->
</div>

<!-- rechte Spalte -->
<div id="right">
<!-- Kopfzeile der rechten Spalte -->
<div id="top">
<!-- Weitere Navigationselemente -->
</div>
<!-- Inhaltsbereich -->
<div id="main">
<!-- Diagramme und Co. -->
</div>
</div>

Das ist kein HTML5. Zumindest kein sinnvolles. Die Navigation gehört in ein nav-Element, die Kopfzeile vermutlich in ein header-Element.

Außerdem sollten IDs und Klassen NIEMALS nach der (gegenwärtig) gewünschten Darstellung benannt werden. Was, wenn bei einer Layoutänderung die Navigation rechts vom Seiteninhalt stehen soll?

wie könnte ich das anders lösen?

Wenn Anordnung und Breiten in Stein gemeißelt sein sollten (die Seite also nur auf einigen wenigen Anzeigegeräten vernünftig darstellbar sein soll): Navigation und Kopfzeile absolut postionieren, body entsprechend großes Padding oben und links geben.

Qapla'

--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)