Mittlerer Bereich soll sich verändern können

  • Hallo.


    ich habe etwas gebastelt was leider nicht richtig funtzt .


    Ich habe links ein iframe mit einer festen breite und rechts ein iframe auch mit einer festen breite.
    der platz dazwischen soll sich anpassen bei fenster größen änderung.


    Kann mir jemand helfen?


    Hier mal der link zur site djchaos79.bplaced.net/test2

  • Oh Gottttttt. keine Iframes bitte x.x


    So ein Ansatz...

  • Es gibt in der Tat diverse Ansätze hierfür.
    Ob nun durch die sehr neuen Methoden calc() oder dem flexbox Modell ist dir überlassen.
    Ich rate dir allerdings deinem Wissensstand entsprechend dich mit den alten Varianten vertraut zu machen und die Grundlagen zu festigen.


    Eine Variante lässt sich mit einem "HTML-Trick" realisieren.
    Durch die logisch "falsche" Anordnung in der HTML-Struktur ...

    HTML
    <div class="aside-content floatR">rechts</div>
    <div class="aside-content floatL">links</div>
    <div class="main-content">mitte</div>


    ... werden die Elemente durch CSS so gegenseitig verdrängt, dass das Ergebnis die gewünschte Lösung liefert:

    CSS
    .main-content { overflow: hidden; }
    .aside-content { width: 200px; }
    
    
    
    
    .floatL { float: left; }
    .floatR { float: right; }


    Vorteilhaft wäre noch, wenn du einen alles umschließenden Container (div) einrichtest, dessen Mindestbreite (min-width) bei bestimmter Skalierung des Browserfensters automatisch eine Scrollleiste erzeugen lässt. Das sichert dich gegen das "Zerschießen" der Inhalte ab.

  • (Lass Floats weg - sind Responsive nicht so toll...)
    Flexbox ist ne gute Sache, floats mag ich nicht so..
    Die mit dem auseinanderfloaten lösung ist ja schon iwi so'n unsauberer Trick oder? ^^

    Einmal editiert, zuletzt von wolf () aus folgendem Grund: VERBESSERUNG von Aussagen ;)

  • 1.
    Die tweilweise auftretende "RWD"-Geilheit ist schrecklich und lange nicht in jeder Fragestellung angebracht.
    Hier geht es lediglich um ein "liquid"-Layout und das ist ein himmelweiter Unterschied.


    2.
    Neue Technologie schön und gut, den Führerschein mit einem Porsche zu machen fördert die Lernphase nicht wirklich.
    Sprich, wenn einer mit Framesets ankommt nutzt es nichts, ihm CSS3 working-draft Eigenschaften und Fachbegriffe für Fortgeschrittene an den Kopf zu werfen :'D


    3.
    display: inline-block bietet nur den Vorteil, dass die Kontrolle über die vertikale Ausrichtung gewährleistet ist.
    Negative Aspekte, wie dem fehlenden Support in IE6+7 sowie dem "whitespace"-Problem in der HTML-Struktur, müssen einem da bewusst sein.


    float bietet mit einfachen "clearfix"-Klassen eine solide Lösung.
    Wer sich nicht mit dem "whitespace"-Problem auseinandersetzen möchte und ein wenig zusätzliches Markup verkraften kann hat mit wenig CSS leichtes Spiel.

  • Joa.. wie ihr Recht habt :D
    Flexbox ist auch ne tolle lösung :)


    Zu Floats - Haben mir schon des öfteren Problemschen gemacht, Wenn Der Screen sich blöd verändert - das größte ist die Sache das Floats nicht enden wollen.. (Außer man gibt ihnen Kommando) ;)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!