CSS Probleme mit Float

[JBO_Zocker]

Ein freundliches Hallo an die Community,

Ich bin gerade dabei das Layout für eine Seite zu schreiben. Das bedeutet ich habe Grafiken, die ich mithilfe von HTML und CSS anordnen soll. Einige dieser Grafiken sollen Mouseover enthalten. Die größer der Bilder ist also festgelegt. Ich habe mich also dafür entschieden keine Tabelle zur Formatierung zu benutzen sondern das ganze mithilfe von DIVs und FLOATs zu bewerkstelligen. Nun kommt es zur Situation, dass die anzuordnenden Bilder in folgender Zusammenstellung stehen sollen:


Jetzt sitz ich hier und habe versucht und versucht, aber das einzige, was ich hinbekomme ist folgendes:


Kann mir von euch vielleicht jemand helfen und mir sagen, mit welcher Methode ich das ganze richtig hin bekomme, bzw. ob das mit floats überhaupt möglich ist? In welcher Reihenfolge muss ich floaten?

 

[Bl00d3y3]

Hi
Sind die Grössen der Bilder denn fest?
Dann in einem Div als css
#bilder img{
position: absolute;
}

und im quellcode dann
<div id="bilder">
<img src="...." style="height: ...px; width: ...px; top: 0px; left: 0px;">
<img src="...." style="height: ...px; width: ...px; top: (höhe des ersten bildes)px; left: 0px;">
<img src="...." style="height: ...px; width: ...px; top: (höhe des ersten bildes)px; left: (breite des 2. Bildes)px;">
...
</div>

Natürlich noch die weiteren benötigten img tags hinzufügen


ungetestet
Gruss
Bl00d3y3

 

[Yuuri]

Positionier am besten absolut und nicht mit float bei solchen Layouts. Die Positionen sind doch sowieso fix oder ändert sich dort was?

 

[JBO_Zocker]

ändern tut sich da nix, außer die Mouseover, aber die haben auch die selbe größe und position. es könnte höchstens sein, dass die größe der Bilder und somit die Position relativ angegeben werden muss.

 

[Bl00d3y3]

Wieso wills du das relativ angeben, das macht bei Grafiken keinen Sinn, da sie sonst unschraf werden..

 

[JBO_Zocker]

Auch wieder war. Danke für eure Hilfe. Werde sehen, dass ich fixe Positionen verwende.

 

[Daaron]

Wenn deine Größen statisch sind, dann ist wie schon erwähnt position:absolute; dein Freund. Wenn alles eher dynamische Größen hat, dann kommst du um JS-Einsatz nicht drumrum. Da helfen nur Tools wie http://mootools.net/forge/p/moomasonry