[gelöst] kompliziertes css layout mit float

[parastatic]

hallo zusammen,

das ist das angestrebte layout:



lupenfunktion:



hab versucht code zu posten, aber alle wichtigen informationen werden im code vom forum gelöscht, sodass nur div's ohne id und style attribute im beitrag erscheinen.


grundproblem: bild-div ist breiter als marginalie-div, text-div soll allerdings an marginalie-div direkt angrenzen, um den platz besser auszunutzen.

der text im text-div soll zum bild-div floaten (der text soll um das bild rumlaufen), das bild-div kann allerdings nicht unterelement vom text-div sein, da es horizontal gesehen, im marginalie-div anfangen soll.

hinzu kommt das der bild-div eine lupenfunktion haben soll, sprich bei click auf vergrößern soll die bild-div-breite die breite vom umgebenden container sein/werden, und die höhe vom bild-div variabel zum vergrößerten bild.
der text soll dann dementsprechend darunter neben der marginalien-spalte positioniert werden.

ich hoffe irgendjemand steigt hinter meine formulierungen

ich wäre schon über einen ansatz sehr dankbar, der alle probleme berücksichtigt.

schon mal vielen dank

[Laus]

Hallo

Zum einstellen von Code muss der Haken bei HTML in diesem Beitrag deaktivieren gesetzt sein, dann wird der Code richtig dargestellt.
Ansonsten würde ich dem Bild ein negatives margin geben und der Text rechts floaten lassen.

Gruß Xaver

[parastatic]

danke für den tip:
hab ihn gleich mal in die arbeit umgesetzt:

Code: Alles auswählen

<div style="width:130px; background:white; padding:10px; margin:0 auto 0 auto; float:left;">
MARGINALIE DIV
</div>

<div style="background:#eeeeee; padding:10px; margin-left:150px;">
<div style="width:280px; height:264px; background:yellow; padding:10px; margin-left: -150px; float:left;">
BILD DIV
</div>
TEXT DIV
</div>



dann überdeckt das bild-div das marginalie-div ...
(die höhe von bild-div soll variabel bleiben, sonst könnt ich ja n margin-top oder sowas sezten)
krieg ich das noch irgendwie besser hin?

[Marry]

Vielleicht hilft "position:relative" bei MARGINALIE?

[parastatic]

ja das stimmt, hab das gestern auch mit position:relative; realisiert.
und einem javascript für die lupen-funktion.
hier meine lösung:

Code: Alles auswählen

#marginalie {
width:220px;
padding:10px;
position:relative;
top: 257px;
margin:0 0 0 20px;
float:left;
}

* html #marginalie {
width:240px;
margin:0 10px 0 10px;
}

#artikel_text_container {
padding:10px;
padding-top:15px;
margin-left:260px;
margin-right: 10px;
}

#artikel_bild {
position:relative;
top:0;
left:0;
width:260px;
height:222px;
background:#eeeeee;
padding:10px;
margin:0;
margin-left: -250px;
margin-right: 10px;
margin-bottom: 5px;
float:left;
}

* html #artikel_bild {
width:280px;
height:242px;
padding-bottom:0;
}

#artikel_img {
padding:0;
margin:0;
border:0;
}

<div id="marginalie">
MARGINALIE-INHALT
</div>

<div id="artikel_text_container">
TEXT-INHALT
<div id="artikel_bild">
<a href="javascript: void change_size_artikel_topimg();" alt="" style="outline:none;"><img src="artikelbild.jpg" alt="" id="artikel_img" /></a>
</div>
TEXT-INHALT
</div>

da das hier kein javascript forum is, lass ich das script mal weg ...
trotzdem danke, an die freundlichen helfer