Antworten auf deine Fragen:
Neues Thema erstellen

[CSS] text um überlappendes div

afr0kalypse

Allwissendes Karmameerschweinchen!

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

Noch nicht viel geschrieben

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

Allwissendes Karmameerschweinchen!

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...
 
Zuletzt bearbeitet:
D

dirtdiver2010

Guest

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

Noch nicht viel geschrieben

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

Allwissendes Karmameerschweinchen!

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...
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.636
Beiträge
1.538.484
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben