Eine von drei Boxen verschiebt sich - Warum?

[Michael]

Hi

Ich baue gerade eine Seite deren Hauptteil aus drei verschiedenen Textabsaetzen beseteht, die sich immer wieder wiederholen. (Die Formatierung, nicht der Inhalt)

Im Moment habe ich die drei Boxen als div definiert und dem ersten und dem letzten die gleiche Formatierung gegeben. Das mittlere ist genau entgegengesetzt definiert.

Wenn ich nun die Texte, die aus einer Datenbank kommen, vom Script darstellen lasse, sind die ersten drei Boxen korrekt ausgerichtet, bei den folgenden Wiederholungen jedoch ist jeweils die erste Box um ca 150px nach rechts verschoben. Die anderen Boxen sitzen wieder korrekt.

Ein Bild wies aussieht gibts auch:
http://212.185.195.29/Image2.jpg

Vielleicht kann mir jemand sagen woran es liegt, ich dachte erst es wäre diese Treppchengeschichte, aber das passiert ja nur mit dem IE. Hier ists genau umgekehrt... Der Code validiert sowohl im CSS Validator als auch im HTML Validator.

Getestet mit diesen Browsern:
Firefox (Fehler tritt auf)
Konqueror (Fehler tritt auf)
IE6 (Fehler tritt nicht auf)

Der dazugehörige CSS sieht so aus:

-----*snip*-----
div.contentfeld {
background-color:#FFFFFF;
color:#000000;
font-size:0.9em;

width:740px;
margin-left:300px;
margin-right:0px;
margin-top:10px;
margin-bottom:0px;
}

div.fliesstext1 {
background-color:#FF0000;
color:#000000;
width:740px;
height:77px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:30px;
}

div.fliesstext2 {
background-color:#00FFFF;
color:#000000;
width:740px;
height:77px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:30px;
}

div.fliesstext3 {
background-color:#FFFF00;
color:#000000;
width:740px;
height:77px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:30px;
}

p.abs1 {
text-align:left;
}

p.abs2 {
text-align:right;
}

p.abs3 {
text-align:left;
}

img.abs1 {
float:left;
margin-left:0px;
margin-right:15px;
margin-top:0px;
margin-bottom:50px;
}

img.abs2 {
float:right;
margin-left:15px;
margin-right:0px;
margin-top:0px;
margin-bottom:50px;
}

img.abs3 {
float:left;
margin-left:0px;
margin-right:15px;
margin-top:0px;
margin-bottom:50px;
}
----*snap*----

Der dazugehörige HTML sieht dann so aus:

----*snip*----
<!-- Contentfeld -->
<div class="contentfeld">

<div class="fliesstext1">
<img class="abs1" src="/media/test.jpg" alt="/media/test.jpg" width="150px" height="75px">
<p class="abs1">
<b class="abs1">head1</b><br>
This document validates as CSS!
To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:
</p>
</div>

<div class="fliesstext2">
<img class="abs2" src="/media/test.jpg" alt="/media/test.jpg" width="150px" height="75px">
<p class="abs2">

<b class="abs2">head2</b><br>
This document validates as CSS! To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:
</p>
</div>

<div class="fliesstext3">
<img class="abs3" src="/media/test.jpg" alt="/media/test.jpg" width="150px" height="75px">
<p class="abs3">
<b class="abs3">head3</b><br>
This document validates as CSS! To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:
</p>

</div>

<div class="fliesstext1">
<img class="abs1" src="/media/test.jpg" alt="/media/test.jpg" width="150px" height="75px">
<p class="abs1">
<b class="abs1">head4</b><br>
This document validates as CSS! To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:
</p>
</div>

...
...
...
...
...

<div class="fliesstext3">
<img class="abs3" src="/media/test.jpg" alt="/media/test.jpg" width="150px" height="75px">

<p class="abs3">
<b class="abs3">head9</b><br>
This document validates as CSS! To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:
</p>
</div>

</div>
----*snap*----

Die komplette Seite ist unter http://ib-munteanu.dynamik.sytes.net erreichbar.

Gruss, Echelon

[Michael]

Nachtrag:
Die Seite ist auf http://ib-munteanu.dynamik.sytes.net/ueber.php erreichbar.

Der andere Links ist die Startseite, dort muesste man noch auf "ueber uns" klicken.

Sorry fuer den Fehler.

Gruss, Michael

[Ingo Turski]

Hi,

Wenn ich nun die Texte, die aus einer Datenbank kommen, vom Script darstellen lasse, sind die ersten drei Boxen korrekt ausgerichtet, bei den folgenden Wiederholungen jedoch ist jeweils die erste Box um ca 150px nach rechts verschoben.

Sie wird horiontal neben dem darüberliegenden links floatenden Bild ausgerichtet.
Du floatest viel zu viel und nimmst alle Elemente aus dem Fluss. Entweder Du floatest nur die Bilder oder Du stellst den Elementenfluss über div{clear:both;} wieder her.

freundliche Grüße
Ingo

[Michael]

Sie wird horiontal neben dem darüberliegenden links floatenden Bild ausgerichtet.
Du floatest viel zu viel und nimmst alle Elemente aus dem Fluss. Entweder Du floatest nur die Bilder oder Du stellst den Elementenfluss über div{clear:both;} wieder her.

Hi

Danke erstmal fuer die Antwort :)
Eigentlich sind es doch nur die Bilder die floaten. Oder uebersehe ich da was? Ich hab in einem umgebenden div (div.contentfeld) untereinander fuer jeden Absatz ein Container-div (div.fliesstext1-3)in dem sich das floatende Bild (img.abs1-3) und ein (nicht floatender Absatz (p.abs1-3) befinden. Fuer mich sieht das erstmal so aus als würde nur das Bild floaten.

Ich hab noch was festgestellt:
Wenn ich die Reihenfolge der Wiederholung sö aender das nur der erste und der dritte Absatz sich wiederholen verschiebt sich der jeweils erste Absatz zunehmend um jeweils 100-150px. Also tatsächlich so eine Art Treppeneffekt.

Wegen deinem Vorschlag mit dem div{clear:both;}
Muesste ich da ein zusaetzliches div unter jedem Absatz einbinden oder soll das jeweils in die Eigenschaften des Containerdivs? Hab ich leider nicht ganz verstanden. :-/

Gruesse, Michael

[Ingo Turski]

Hi,

Eigentlich sind es doch nur die Bilder die floaten. Oder uebersehe ich da was?

Stimmt; ich kam wegen der gleichen Klassen durcheinander.

Wegen deinem Vorschlag mit dem div{clear:both;}
Muesste ich da ein zusaetzliches div unter jedem Absatz einbinden oder soll das jeweils in die Eigenschaften des Containerdivs? Hab ich leider nicht ganz verstanden. :-/

trage diese Regel einfach so in Dein CSS ein und staune. ;-)
Du verwendest viel zu viele Klassen.

freundliche Grüße
Ingo