Antworten auf deine Fragen:
Neues Thema erstellen

Relativen Container umfließen

Jormungand

VonAllemEtwas

Hallo zusammen,
mit dem folgenden Szenario komme ich nicht weiter und hoffe, jemand von euch kann helfen.
Ich habe ein paar Container in dieser Konstellation:
HTML:
<div id="container">
<div id="main">...</div>
<aside id="left">...</div>
<aside id="right">...</div>
</div>
Der aside id="right" Container soll halb in den main-Container hineinragen und die Schrift in main soll den right-Container umfließen. Siehe http://picload.org/thumbnail/lagordw/container.jpg

Ich habe es versucht, indem ich den main-Container auf 100% Breite gebracht habe und dem right-Container einen negativen margin-right gegeben habe aber jetzt schiebt der sich über die Schrift, anstatt sie zu verdrängen, obwohl er relativ ist.
Die Struktur der Seite kann ich leider nicht ändern, weil sie von Contao erzeugt wird.

Kann jemand helfen?

Schöne Grüße
Jormungand
 

spacefront

Aktives Mitglied

Hallo ich denke das wird schwirig, das wäre eher was für Float.
Du kannst aber die Seite schon ändern. Du must unter Tampltes das fe_page.html5 suchen. Dann kannst Du es anpassen. Wenn Du es nur auf einer Seite ändern willst musst Du halt mehrere Layouts anlegen.
 

Jormungand

VonAllemEtwas

Du meinst, ich müsste das Grundlayout ändern, dass z.B. der right-Container innerhalb des main-Container liegt und ihn dann float:right rechts anordnen und mit margin-left aus dem anderen Container raus verschieben?
Das probier ich heute mal aus und sag bescheid, wenn es klappt.
Danke erstmal für den Tipp!
 

afr0kalypse

Allwissendes Karmameerschweinchen!

Du hast aside Tags aber schließene /div Tags. Ist das so in deinem Source Code oder nur nen Fehler im Forum? ;)
Kannst du mir bitte noch dein CSS zeigen, mit dem du es aktuell versuchst?
 

Jormungand

VonAllemEtwas

Den Quelltext habe ich schnell aus Firebug rauskopiert und das schließende Tag nachträglich (versehentlich falsch) eingefügt. Natürlich muss es </aside> heißen.
 

Jormungand

VonAllemEtwas

Danke afr0kalypse, aber so sieht es im Moment schon aus.
Was ich versuche hinzubekommen ist das umfließen des rechten Containers, d.h. wenn im Hauptcontainer der Text länger wird, fließt er, nach dem aside Container bis zum Rand.
Ich habs versucht, im Bild oben darzustellen.
________________________________
@spacefront: Über Templates > Neues Template habe ich das fe_page.html5 dupliziert, umbenannt und meine Änderungen gemacht. Wie binde ich das jetzt ein?
Unter Themes > Seitenlayout findet sich zwar in den Experteneinstellungen der Punkt Seitenlayout. Aber das neue Template wird nicht angezeigt.
 
Zuletzt bearbeitet:

afr0kalypse

Allwissendes Karmameerschweinchen!

Achso. Dann musst du aber den aside Tag im text haben.
HTML:
<div id="#main">text text <aside>ein anderer text</aside>noch mehr text</div>
Ansonsten wirst du den Text nicht floaten können.

EDIT:
was auch geht ist das hier: http://jsfiddle.net/vxDe7/2/
dann musst du aber erst dein aside Tag definieren und dann den text.
 
Zuletzt bearbeitet:

Jormungand

VonAllemEtwas

Damit scheint es html/css-technisch zu gehen.
Code:
#container {
                width:100%;   
            }
            #main {
                position:relative; /*nur um die position der beiden boxen besser zu zeigen*/
            }
            #main {
                background:#ccc;
                width:500px; 
                border:1px solid red;
                z-index:2; /*nur um die position der beiden boxen besser zu zeigen*/
                padding: 20px;
            }
            #right {  
                background:#666;
                width:200px;
                padding-left:-15%;
                margin: 20px -50px 20px 20px;
                z-index:1; /*nur um die position der beiden boxen besser zu zeigen*/
                float:right;
            }
            #right .inner {
                margin:20px;
            }
Code:
<div id="container">
            <div id="main"><aside id="right"><div class="inner">Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</div> </aside>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.sdfsdfsdfsdf<br />
                lksjdflkjslgkjslkdjfg<br />
                sldkfjlksdjflkjdslfkjlskdjfkljsd<br />
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

        </div>

Um die Verschiebung hinzukriegen habe ich noch das Padding-left missbrauchen müssen und einen inneren Container für den Abstand zum Rand verwenden müssen.
Jetzt muss ich nur noch in Contao die Container umstellen können, dann komm ich klar.

Danke für die Hilfe!
 

Aelfry

Web Developer

Code:
#container {
                width:100%;  
            }
            #main {
                position:relative; /*nur um die position der beiden boxen besser zu zeigen*/
            }
            #main {
                background:#ccc;
                width:500px;
                border:1px solid red;
                z-index:2; /*nur um die position der beiden boxen besser zu zeigen*/
                padding: 20px;
            }
            #right { 
                background:#666;
                width:200px;
                padding-left:-15%;
                margin: 20px -50px 20px 20px;
                z-index:1; /*nur um die position der beiden boxen besser zu zeigen*/
                float:right;
            }
            #right .inner {
                margin:20px;
            }
Du ersetzt du schönen Prozent Werte durch fixe Angaben? o_O
Schau dir doch mal die zweite Lösung von afr0kalypse an: weniger Code und vor allem sauberer gelöst.
 

emet

Noch nicht viel geschrieben

Bei padding links und rechts muss man je nach Verschachtelung auf die Addierung insbesondere vom IE achten.

Also ähnlich wie oben beschrieben.

Nur besser von der rechten Seite mit -margin arbeiten. Das ist immer sicherer.

Div(ausen) formatieren
Div(innen) formatieren mit Größe, Hintergrund etc - natürlich float-right und von rechts mit -margin aus dem äußeren Container rauslaufen lassen.
 
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.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben