Layer bzw. divs und padding...

[Thomas Luethi]

Hallo Alex,

O.K., jetzt muss ich mich wohl doch auch mal mit Layern beschäftigen...

"Layers" ist ein "boeser" Begriff.
Er erinnert an das <LAYER>-Element, das Netscape erfunden hat, das aber in keinem W3C-Standard vorkommt.
Was Du meinst, wuerde ich eher "DIV-Layout" nennen.

Gefällt mir auch ganz gut soweit. Ein Problem habe ich aber nun: wenn ich für ein <div> z.B. padding: 20px angebe, dann scheinen einige Browser das an die width/height-Angabe der divs dazu zu zählen, andere nicht. So entstehen dann teilweise Lücken zwischen den divs.

Naja, der MS IE <6.0 hatte ein kaputtes "Box Model". Auch der MS IE 6.0 wendet dieses an, wenn man gewisse DOCTYPE-Angaben macht, oder wenn die Datei mit der Prolog <xml ...> beginnt.
Siehe:
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=false

Kennt jemand dieses Problem? Gibt's da eine Lösung?

Das wichtigste: Vergiss die Idee, dass Deine Seite mit allen Browsern _gleich_ aussehen soll.

Achte vielmehr darauf, dass die Seite mit allen Browsern _benutzbar_ ist, d.h. dass Du mit CSS die Seite nicht zerstoerst fuer kaputte Browser.

Vielleicht helfen auch noch ein paar margin:0 im CSS.

-->http://web129.can03.de/layertest/

Diese Seite ist _ohne_ CSS eine riesige Katastrophe.

N.B.: CSS funktioniert grundsaetzlich fuer alle Elemente, nicht nur fuer <DIV> und <SPAN>.
Es ist sinnlos, alles nur noch in <DIV>-Elemente einzupacken, bloss weil kaputte Browser CSS nur in Verbindung mit <DIV> koennen.

Auch wenn Du mit CSS gewisse Vorschlaege fuer's Layout machst, musst Du trotzdem immer noch darauf achten, dass die Seite auch in Browsern ohne CSS-Unterstuetzung (inklusive Netscape 4.x bei ausgeschaltetem JavaScript!) benutzbar ist.

Das .:Layertest:. ist die Hauptueberschrift; sie gehoert in ein H1-Element an den Anfang des Dokuments, und nicht bloss in ein "nichtssagendes" DIV am Schluss.
Das "o Home" ist wahrscheinlich eine Ueberschrift zweiten Grades, also ein H2-Element.
Eine sinnvolle Reihenfolge waere also z.B.:

<h1>.:Layertest:.</h1>
<h2>o Home</h2>

<div id="main">
<p>Hier steht irgendein Text, damit die Seite gefüllt ist.</p>
<p>Das Land erstreckt sich in Nord-Süd-Ausrichtung rund 3700 km.</p>
</div>

Die Navigationsleiste koenntest Du auch viel einfacher machen.
Statt wie bisher

<div id="nav"><a href="..."><img src="dreieck.gif" alt="" width="9" height="9" />Home</a><br />
<a href="#"><img src="dreieck.gif" alt="" width="9" height="9" />Info</a><br />
<!-- u.s.w. -->
</div>

koenntest Du z.B. schreiben:

<ul id="nav">
<li><a href="...">Home</a></li>
<li><a href="...">Info</a></li>
<!-- u.s.w. -->
</ul>

Sowas waere auch fuer alte/einfache Browser eine sehr gut benutzbare Linkliste.

Um die roten Dreiecke vor jedem Listenpunkt zu haben, nimmst Du lieber CSS, als jedesmal ein <IMG>-Tag vor den Text zu stellen, siehe
http://selfhtml.teamone.de/css/eigenschaften/listen.htm

Um die verschiedenen Abstaende in Listen richtig hinzukriegen, empfehle ich Dir, die folgende Seite zu lesen:
http://www.subotnik.net/style/list-box-test.html

HTH, mfg
Thomas