[CSS] text um überlappendes div

afr0kalypse · 22.11.2011

Hi.
Ich habe 2 Div Container die sich überlappen. Einen davon (das Polaroid) habe ich per css3 rotation gedreht und per z-index über dem anderen div (die weiße Content Fläche) überlappen lassen.

siehe:

Nun möchte ich, dass der Text mit ca 10px Abstand um diese überlappende Stelle herum läuft... nur stehe ich gerade komplett auf dem Schlauch...

Über Tipps wäre ich sehr dankbar

Gilligan2k10 · 22.11.2011

AW: [CSS] text um überlappendes div

Dazu wäre deine aktuelle CSS konfiguration ganz hilfreich, aber ich denke das es sowas wie du da möchtest nicht so einfach gibt weil das eine Div das andere nicht kennt und somit auch keinen Bezug dazu nehmen kann. Sollte ich mich irren, hab das nicht getestet kann man mit

float:left;
margin: 0px 10px 0px 0px;

Etwas um ein anderes Div fließen lassen, jedoch weiß ich nicht ob die Drehung deines 1. Div dabei berücksichtigt wird. Einfach mal ausprobieren.

afr0kalypse · 22.11.2011

AW: [CSS] text um überlappendes div

Hi und danke für die schnelle Antwort.
Bei mir schauts momentan so aus:

Code:

#logo {            
    height:352px;
    width:354px;
    margin-top:100px;
    margin-left:100px;
    background:url(../img/polaroid.png) 0 0 no-repeat;
    z-index:2; /* ueberlagern */    
    float:left;
}
#test {    
    width:400px;
    height:600px;
    margin-left:340px;
    background:white;
    border:1px solid black;
}
#logoimage {
    position:absolute;
    top:115px;
    left:100px;    
}
.rotation {
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
}

HTML:

<body>
    <div id="logo" class="rotation"></div>        
    <div id="test">
        <h3 class="ct3">Ein Titel</h3>
        <p>sehr langer zu floatender text
        </p>
    </div>
    <div id="logoimage" class="rotation"><img src="img/bg.png" /></div> 
</body>

leider tut sich nichts beim floaten, auch wenn die divs sich kennen. es wird nur so gefloatet als wenn keine rotation genutzt würde...

dirtdiver2010 · 22.11.2011

AW: [CSS] text um überlappendes div

Willst du wechselnden Content haben?
Ansonsten kannst du unter Umständen mit mehreren <p>-Tags arbeiten und diesen eine class zuordnen. Ist zwar keine schöne Lösung, ist aber momentan das einzigste was mir einfallen würde.
Bei wechselndem Content würde ich mir überlegen ab du das nicht komplett neben dem Polaroit vorbeiführst. Schaut zwar dann nicht so schick aus, aber du sparst dir denke ich einen Haufen Ärger.

Gilligan2k10 · 22.11.2011

AW: [CSS] text um überlappendes div

Ja durch die absolute Position gibt es keinen Bezug zwischen den Beiden Divs. Daher gibt es so auch nach meinem Wissen keine Möglichkeit es so umfliessen zu lassen.

afr0kalypse · 22.11.2011

AW: [CSS] text um überlappendes div

@dirtdiver: ich habe wechselnden content, da hilft mir die lösung mit den p classes nicht

aktuell habe ich schon den content etwas weiter weg vom polaroid aber es gefällt mir nicht

@gilligan: leider funzt das auch nicht bei relativen positionen. css3 rotation wird beim float nicht berücksichtigt...

cebito · 15.12.2011

AW: [CSS] text um überlappendes div

Das kommt dann auch mal für CSS3... http://matthiasschuetz.com/w3c-entwurf-fuer-css3-exclusions-veroeffentlicht