nicht angemeldet
Moin!
Ich habe nun schon häufig Webpräsenzen erstellt, die auf die alte Tabellenoptik verzichten. Ich stelle aber immer wieder fest, dass sich mit CSS momentan noch nicht alles erreichen lässt.
Das stimmt, mehrspaltiger Fließtext z.B., wie in Zeitungen gerne benutzt, wird wohl erst mit CSS 3 eingeführt. Auch muss man momentan leider noch einige Kompatibilitätshacks für einen gewissen Browser einsetzen, der darüber hinaus CSS nur auszugsweise umsetzt, weil man nicht einen Großteil seiner Besucher vergraulen möchte.
Dies betrifft vor allem die Trennung von Inhalt und Struktur einer Webpräsenz, die ja mit CSS erreichbar sein soll.
Du meinst also, dass man trotz rein semantisch ausgezeichneten HTMLs, welches mit CSS formatiert wird, nicht alles so darstellen kann, wie man es möchte und mit HTML „formatieren“ könnte? Das erscheint mir ein wenig fragwürdig.
Auch in Selfhtml werden Lösungen angeboten, bei denen div-Bereiche zu Abtrennung inhaltlicher Bereiche genutzt werden.
Hättest du ein Beispiel parat?
Durch links- und rechtsbündiges Formatieren mit CSS wird sodann die Position der Bereiche im Browser bestimmt. So weit so gut. Voraussetzung für diese Anordnung ist jedoch, dass die div-Bereiche tatsächlich in der korrekten Reihenfolge im Quelltext stehen, nur dann lassen sie sich linksbündig anordnen.
Das ist nicht korrekt. Nehmen wir folgende zwei HTML+CSS-Dokumente, die im Browser (annähernd) gleich aussehen (Achtung: Es kann sein, dass der MSIE hierbei über den Boxmodel-Bug stolpert, dann müssen die Breiten verkleinert werden):
Zuerst die Navigation, dann der Inhalt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Nav-Test</title>
<link rel="stylesheet" href="all.css" type="text/css" charset="UTF-8">
<style type="text/css">
<!--
[code lang=css]#nav {
border: 1px solid black;
width: 25%;
float: left;
}
#content {
margin-left: 30%;
width: 70%;
border: 1px solid black;
}
-->
</style>
</head>
<body>
<h1>Nav-Test</h1>
<ol id="nav">
<li><b>Projekt A</b>
<ol>
<li>Aktuelles</li>
<li>Informationen</li>
</ol></li>
<li><b>Projekt B</b>
<ol>
<li>Aktuelles</li>
<li>Informationen</li>
</ol></li>
<li><b>Projekt C</b>
<ol>
<li>Aktuelles</li>
<li>Informationen</li>
</ol></li>
</ol>
<div id="content">
<h2>Herzlich Willkommen</h2>
<p>Viel, viel langer Text, bis ganz nach unten [bitte dementsprechend füllen]</p>
</div>
<p id="footer">Letzte Änderung: heute von Robert</p>
</body></html>[/code]
Und nun genau anders herum, d.h. erst der Inhalt, dann die Navigation:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Nav-Test</title>
<link rel="stylesheet" href="all.css" type="text/css" charset="UTF-8">
<style type="text/css">
<!--
[code lang=css]#content {
left: 30%;
width: 70%;
border: 1px solid black;
float: right;
}
#nav {
border: 1px solid black;
width: 25%;
top: 0%;
}
-->
</style>
</head>
<body>
<h1>Nav-Test</h1>
<div id="content">
<h2>Herzlich Willkommen</h2>
<p>Viel, viel langer Text, bis ganz nach unten [bitte dementsprechend füllen]</p>
</div>
<ol id="nav">
<li><b>Projekt A</b>
<ol>
<li>Aktuelles</li>
<li>Informationen</li>
</ol></li>
<li><b>Projekt B</b>
<ol>
<li>Aktuelles</li>
<li>Informationen</li>
</ol></li>
<li><b>Projekt C</b>
<ol>
<li>Aktuelles</li>
<li>Informationen</li>
</ol></li>
</ol>
<p id="footer">Letzte Änderung: heute von Robert</p>
</body></html>[/code]
Die von beiden Dateien referenzierte all.css ist simpel aufgebaut:
#footer {
clear: both;
}
Lange Rede kurzer Sinn: Obwohl die Anordnung der wichtigen Elemente beider Dokumente recht unterschiedlich ist, produzieren beiden die gleiche Darstellung in einem Webbrowser: Ganz oben die Hauptüberschrift, darunter links die Navigation und daneben der Hauptinhalt, ganz zum Schluss der Footer.
Was eigentlich das Ziel sein muss: div-Bereiche müssten sich anhand ihrer Identifikation (id) anordnen lassen, z. B. "5px unterhalb von id menuebereich". Erst dann macht man den Inhalt völlig unabhängig von der Struktur des HTML-Textes.
Sagen dir die z.B. CSS-Eigenschaften [ref:self811;css/eigenschaften/positionierung.htm#position@title=position]: relative sowie [ref:self811;css/eigenschaften/randabstand.htm@title=margin-top]: 5px etwas?
Gleichwohl muss man allerdings sagen, dass CSS-Authoring heutzutage immer noch nicht so bequem möglich ist, da es (keine mir bekannten) Programme gibt, die eine direkte entsprechende Rückkopplung zwischen CSS-Code und Darstellung gibt. Mit dem DOM-Inspektors des Firefox lässt sich allerdings lokal schon viel erreichen, die Darstellungsoption »Computed Style« ist beispielsweise sehr nützlich.
Aber vielleicht hast du auch Beispiele, die deine Meinung unterstützen und als Gegenbeispiele zu meiner Aussage dienen können.
Viele Grüße,
Robert
Struppi