Tag zusammen!

Die nächste Version meiner Internetpräsenz soll in validem xhtml 1.0 strict herauskommen und für IE, Navigator UND Opera darstellbar sein. Und ich fange gerade an, mich damit herumzuspielen.

Beim Herumprobieren bin ich auf ein Darstellungsproblem gestoßen. Ich habe eine Seite mit 3 verschiedenfarbigen div-Bereichen untereinander. Alle 3 sind leer und werden auch wie erwartet sowohl im IE, als auch im Navigator und mit OPERA ohne Abstand zueinender angezeigt.

Guckst Du hier ==> Seite mit 3 leeren divs

Wenn ich jetzt in jeden div-Bereich etwas reingebe, in dem Fall einen Absatz mit einem Satz, werden die Bereiche nur noch im IE ohne Abstand zueinander angezeigt. Im Navigator und beim OPERA sind nun plötzlich ca. 10px große Abstände vertikal zwischen div 1/2 und div 2/3.

Guckst Du hier ==> Seite mit 3 divs und je einem Absatz drin

Seit 3 Stunden spiele ich mich jetzt herum. Habe margin, padding, display, etc. wirklich in allen Variationen ausprobiert. Aber ich schaffe es einfach nicht, in allen 3 Browsern das gleiche Ergebnis zi bekommen, nämlich keine Abstände zwischen den 3 div-Bereichen. Und somit ist jede Designverwirklichung im....

Kann mir bitte wer helfen und eine Lösung sagen? Weder bei GOOGLE noch bei selfhtml oder allen mir bekannten CSS-Seiten habe ich diesbezüglich was gefunden.

Rossi

hallo..

nur so als "zwischenfrage".. warum nicht gleich xhtml 1.1 -dort gibt es auch kein strict / trans. etc mehr..

das problem liegt im "p"-tag.. setze einfach
p {
margin: 0px;
}

und das die seite überall gleich aussieht, kannst du so oder so vergessen.. da z.b. der ie5.0 margin falsch interpretiert.. und auch "ansonsten" jeder so seine eigene "macke" hat..

viele grüße,
nisita

PS: schau mal auf http://www.stichpunkt.de/css/index.html (ist anscheinend aber gerade offline) -dort gibt es ein paar schicke "tricks und tips" zu css.. und vorallem jede menge links, wo sich leute mit css "problemen" auseinandergesetzt haben..

---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

Hi nisita!

Danke für die Antwort!

Ich will deshalb 1.0 und nicht 1.1, weil das auf den selfhtml Seiten so empfohlen wird für Otto Normalverbraucher.

Das problem ist jetzt zwar für Absätze gelöst, nicht aber für einen div im div.

Guckst Du hier ==> div im mittleren div

Und genau DAS ist eigentlich das, was ich bräuchte. Hast Du für DEN Fall vielleicht auch eine Lösung?

Rossi

hej.. naja.. weiß jetzt auch nicht soo den unterschied.. aber von 1.0 auf 1.1 kann man ja immer noch "umsteigen".. es gibt jedenfalls sehr wenig andere dinge..

div in div:

Du hast für keinen der drei DIV-Bereichen einen Außenabstand (margin) definiert - die Browser greifen also auf ihre Default-Werte zurück, die sich ja offensichtlich voneinander unterscheiden. Wenn du keinen Abstand haben willst, musst du das dem Browser mitteilen.

Ein leichter verständliches Beispiel: Zwischen zwei Absätzen befindet sich ein Abstand. Wirklich? Hast du ihn definiert? Nein! Es handelt sich nur um den Default-Margin-Wert der im Browser für dieses Element hinterlegt wurde. Willst du einen einheitlichen Abstand in allen Browsern solltest du ihn festlegen.

HTH

---
Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen

er hat doch einen marging wert definiert..
margin-top:10px;

---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

So ist es. Und außerdem : Wie ich ja schon geschrieben habe, ich habe wirklich ALLE Kombinationen durchprobiert. Margin, Padding, Positzion, ein leerer div, ein div mit Inhalt, etc ...

Tatsache ist :

3 leere divs untereinender kleben in allen 3 Browsern aneinender.

Sobald in einem div ein Inhalt ist, z.B. ein weiterer div, kann ich den formatieren wie ich will, OPERA und Navigator machen dann plötzlich diese beschissenen Abstände.

Tatsache ist ja, um auf die Ursprünglichen 2 Beispielseiten in meinem ersten Posting zurückzukommen, daß ein kleines div im mittleren der 3 großen divs, folgendermaßen positioniert werden kann:

absolut - dann bezieht es sich auf die gesamte html-Seite

oder ohne absolut, nur mit margin-top und margin-left - dann bezieht es sich auf sein Elternelement. In dem Fall der 2. große div.

Es besteht absolut kein Zusammenhang mit der Tatsache, warum dann plötzlich dieser Abstand entsteht.

Rossi

wie es noch funktioniert.. das chield-div bekommt margin-top:0px; aber das eltern-div padding-top:10px; -das funktioniert jedenfalls..

die abstände für das eltern-div obwohl sie für das chielddiv definiert waren kommen wohl daher, dass kein inhalt zwischen den 2 divs ist.. denn dann, wäre auch alles "richtig"..


nochmal zu den 2 beispielseiten..

doch.. absolute bezieht sich nicht auf die gesamte html seite.. sondern zu dem übergeordneten element.. link: http://jendryschik.de/wsdev/einfuehrung/css/positionierung.html


ich hoffe das hat ein wenig geholfen..

st

---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

nisita schrieb am 05.01.2004 23:14 doch.. absolute bezieht sich nicht auf die gesamte html seite.. sondern zu dem übergeordneten element.. link: http://jendryschik.de/wsdev/einfuehrung/css/positionierung.html

Leider falsch. Absolute bezieht sich lediglich auf das nächste positionierte Elternelement, oder wenn es kein entsprechendes Element gibt auf den Viewport. Fazit: Das übergeordnete Element muß ebenfalls absolut positioniert werden.

---
Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen

nisita schrieb am 05.01.2004 20:29 er hat doch einen marging wert definiert.. margin-top:10px;

Nur leider ist in den beiden Test-Dateien im ersten Beitrag kein margin-Wert im Quelltext zu finden?!?


---
Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen

Ursache des Problems gefunden - eine 100%ige Lösung dafür will mir aber nicht einfallen. Die DIV-Bereiche haben auch im Mozialla keinen Abstand - lediglich die Hintergrundfarbe deckt nicht den gesamten Bereich ab. Sobald man für die Boxen einen Rand definiert werden sie korrekt dargestellt. Äußerst seltsam. Außerdem füllt der Hintergrund den Bereich komplett aus, wenn du für die Boxen overflow: auto definierst. Noch seltsamer. Vielleicht kann mir jemand den Grund für dieses Verhalten erklären?

---
Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen

stimmt.. bei den ersten beiden dateien, war kein margin-wert.. es lag abern icht an dem default margin wert vom div, sonder vom

tag

aber mit absolute, ging es doch.. habe die definition nur nicht richtig "übenommen"
also, hab vorhin irgendwo auf der w3 seite gelesen, das manche browser einen border definiert haben wollen.. das wäre dann wohl auch die "richtige" lösung..
mit dem auto.. naja, der browser schat halt, wo "inhalt" ist, und sieht wohl keinen..

---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

Es klappt aber nur, wenn man eine Rahmendicke von mindestens 1 px angiebt. DANN gibt es keine Abstände.

Das nutzt mir leidfer nichts, für mein Vorhaben darf es keine Ränder geben. ( Unabhängif, welche Farbe sie haben oder ob sie unsichtbar sind oder nicht. ) Außer den 3 divs darf es nix geben, und DIE sollen untereinenderkleben, so woe im IE angezeigt.

Und das ist somit noch immer nicht geschafft. =(

AUSSERDEM : Wäre es nur der Rahmen, dann hätte es ja auch schon in Beispiel 1 nicht klappen dürfen. DORT ( also dort, wo die 3 divs keinen Inhalt haben ) zeigt er es aber auch in OPERA und Navigator ohne Abstand an!

HerrRossi schrieb am 06.01.2004 12:11 AUSSERDEM : Wäre es nur der Rahmen, dann hätte es ja auch schon in Beispiel 1 nicht klappen dürfen. DORT ( also dort, wo die 3 divs keinen Inhalt haben ) zeigt er es aber auch in OPERA und Navigator ohne Abstand an!

Absolut richtig. Leider ist CSS noch nicht so fehlerfrei in die Browser implentiert, dass man hier mit Logik auf die Fehlerursachen kommen könnte. Da hilft meist nur probieren. Hat denn overflow: auto (für die DIV-Bereiche) bei dir nicht den gewünschten Effekt?


---
Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen

damit ist das problem aus der welt.

um dann zwischen einzelnen absätzen einen sbatand zu bekommen, musst du dann halt noch entsprechende werte für padding-top und padding-bottom definieren.

---
wer hilft mir beim geschirr spülen?