Beiträge von sejuma

http://www.ohne-css.gehts-gar.net/0055.php

Ich vermute, deiner Seite fehlt ein standardkonformer Doctype.
Den braucht der Internetexplorer zur korrekten Darstellung des CSS-Boxmodells.

Link wäre jedoch hilfreich.

http://www.ohne-css.gehts-gar.net/0016.php

Wenn du den width-Wert weglässt, passt sich die Breite automatisch nach dem Inhalt an.
Aber das wolltest du doch ursprünglich verhindern?

Lässt sich durch die roten Ergänzungen lösen (width-Wert ggf. anpassen):

Zitat

ul.navmain a{
color: #fff;
text-decoration: none;
display: block;
width: 120px;
}

Weshalb verwendest du Tabellen?
Weshalb packst du Tabellen nochmal in einen unnötigen Div?
Wozu verwendest du absolute Positionierungen?
Hast du darauf geachtet, dass nach dem Boxmodell die Gesamtbreite 100% nicht überschritten wird?
Auf welche Basis beziehen sich deine Prozentangaben?
Hast du nach dem Floaten gecleart?

Wenn du diese Fragen klärst, sollten sich die meisten Probleme lösen.

Wozu verwendest du

position: absolute

?
Wenn du darauf eine Antwort findest, dann verwende es weiterhin.
Falls nicht, dann positioniere besser und ausschließlich mit float und/oder margin.

Merke:
"Position abslolute" heißt so, weil es meist absolut überflüssig ist und man es nur dann verwenden sollte, wenn man sich absolut sicher ist, was es bedeutet.
http://www.ohne-css.gehts-gar.net/0045.php

Der erstgenannte Doctype ist auch nicht standardkonform, da die DTD-URL fehlt.
Der letztgenannte macht noch beim IE 6 Probleme.
Solltest du ggf. testen und notfalls die erste Zeile löschen.
http://www.carsten-protsch.de/zwischennetz/d…tung.html#modus

Gib der Seite einen standardkonformen Doctype, dannn ist auch der IE zufrieden.

Du willst einerseits ein flexibles Layout, andererseits hat die Navi eine fixe Breite. Damit kommt es bei bestimmten Konstellationen zu Überlappungen.

Deshalb letzter Versuch, aber mit diesen Nachteilen behaftet:

Navi vertikal zentrieren:

#container {
	position: relative;
height: 600px;
	width: 320px;
min-width: 30%;
	clear: left;
	background-color: #ADFF2F;
	overflow:auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 0px;
	float: left;
}

#box und #distance2 löschen.

#container2 {
position: absolute;
 left: 30%;
overflow: auto;
 height: 100%;
max-width: 68%;
	margin-top: auto;	padding: 25px;
	text-shadow:0px -1px 3px black;
	 /* Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */
}

Eine vetikale Znetrierung ist nur im Zusammenhang mit einer bestimmten Höhe möglich.

Es wäre vieles leichter, wenn du auf die vertikale Zentrierung der Navi verzichtest.
Dann könntest du ein zweispaltiges Layout nehmen.

Das Überlappungsproblem ergibt sich immer dann, wenn 320px Navibreite größer als 30% Bildschirmbreite sind.
Aus diesen Gründen halte ich fixe Layouts für besser, da stets kalkulierbar.

Und genau da liegt m.E. auch dein Denkfehler.
Überleg mal was du willst:

Du willst - wenn ich das recht verstanden habe - eine Seite, die horizontal und vertikal zentriert sein soll und eine fixe Höhe und Breite hat:
Dann brauchst du lediglich einen #container als äußere Hülle, der mir #distance und wie unter #18 beschrieben zentriert wird.
Das funktioniert.
In diesen #container packe die gefloatete Navi und den gesamten Inhalt. Dazu brauchst du keinerlei weitere Zentrierung und keinerlei absolute Positionierung. Da reicht margin vollkommen aus.
Das entspricht meinem Vorschlag #13 wobei in den div #inhalt dann noch der konkrete Inhalt rein kommt.
Den Wolkenhintergrund kannst du dann body zuweisen und bei #wrapper und #inhalt lässt du eben den background weg.

Dann versuch's mal bei der anderen Version damit:

#container {
	position: relative;
	clear: left;
	background-color: #ADFF2F;
	overflow:auto;
  width: 1100px;
height: 600px;
  margin: 0 auto;
}

Dann noch etwas Feintuning.

Gib bei der Version http://test.thepetsitters.net/neu/03referenzenWrap.html
dem #wrapper noch ein

margin: 0 auto;

und ersetze die width: 100% mit

width: 1000px;

Verzichte auf die absolute Positionierung und verwende dafür float und/oder margin.

Varab:
Du verwendest bestimmte div ID's mehrfach, was unzulässig ist. Verwende in diesen Fällen Klassen:
http://validator.w3.org/check?verbose=…erenzenNEU.html

Der Überlappungseffekt rührt daher, wenn die Seite höher ist als das Bildschirmfenster.

Das Layout kannst du viel einfacher aufbauen:

Verwende einen allumfassenden, horizontal zentrierten Div, z.B.

#wrapper {
width: 1100px;
margin: 40px auto;
}

Im folgenden verzichte auf sämtliche absoluten Positionierungen.
In den #wrapper kommt die Navi mit float: left; und gegebenenfalls einem margin-top-Wert.

Daneben kommt dein bisheriger #container2, nur mit margin positioniert.
Sieh dir hierzu einfach mal diese Beispiele an:
http://www.ohne-css.gehts-gar.net/0077.php

Stelle die Seite am besten mal online und poste einen Link, damit man alles im Zusammenhang sieht.
Falls noch nicht vorhanden, besorge dir ggf. Free-Webspace.

Dann hat dein zweites Problem mit Zentrierung wohl nichts mehr zu tun.
Du musst zunächst eine äußere Hülle, z.B. den #container zentrieren wie beschrieben.
In den #container kannst du dann weitere divs mit float und margin platzieren und anordnen.

Verzichte auf die absoluten Positionierungen und zentriere so:
Horizontale Zentrierung
Vertikale Zentrierung nach Ziff. 2

Du verwendest sehr viele überflüssige absolute Positionierungen. Entferne diese generell und positioniere nur mit float und margin, den #footer und seinen Bezug ausgenommen.