kostenloser Webspace werbefrei: lima-city


Zwei divs nebeneinander, eines mit fixer Breite

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    simter

    simter hat kostenlosen Webspace.

    Hallo Zusammen

    Ich versuche zwei divs nebeneinander zu haben, eines davon hat eine fixe Breite, das andere sollte einfach den Rest ausfüllen.
    Dies habe ich auch folgendermassen hinbekommen:
    <div class="unten">unten</div>
    <div class="oben">oben</div>
    .unten{
    	float: left;
    	width: 400px;
    	margin-right: 15px;
      background-color: #ccc;
    }
    .oben{
      background-color: red;
    }

    Nun möchte ich aber, dass sobald das Fenster kleiner wird, dass diese zwei divs nun obereinander sind. Dazu folgendes CSS:

    @media only screen and (max-width: 450px){
      .unten{
        float: none;
        width: 100%;
        box-sizing: border-box;
      }
    }

    Live Example

    Dies funktioniert auch. Jetzt ist aber das Problem, dass das Div, dass ich eigentlich oben haben will unten ist. Das muss ich so anordnen um den nebeneinander Effekt zu erreichen. Aber wenn der Bildschirm kleiner wird, hätte ich gerne eine andere Reihenfolge. Ich sollte also folgendes HTML haben:
    <div class="oben">oben</div>
    <div class="unten">unten</div>
    Und trotzdem den Effekt erzielen, dass unten links fixed ist und oben rechts daneben mit der restlichen Breite.

    Weiss jemand, wie ich das erzielen kann? Oder zumindest, wie ich das obere div auch über dem unteren darstellen kann, ohne absolute Positionen anzugeben.

    Gruss

    Beitrag zuletzt geändert: 9.1.2017 16:54:40 von simter
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. t*******1

    Hallo Simter,

    in der Tat ein schwieriges Problem, was mit HTML und CSS ohne
    position: absolute;
    vermutlich wirklich garn nicht so leicht zu lösen ist, da in der Regel in HTML festgehaltene Inhalte auch in der geschriebenen Reihenfolge angezeigt werden sollen. Ich würde an deiner Stelle mit JavaScript an die Sache herangehen, indem du die beiden DIVs (oder deren Inhalt) tauschst. Dafür musst du im HTML Quellcode noch etwas ergänzen:
    <div class='unten' id='unten'>unten</div>
    <div class = 'oben' id = 'oben'>oben</div>

    Und so würde der JavaScript Code aussehen:
    window.onload = function () { //Funktion die beim Laden der Seite ausgeführt wird
        if (document.getElementsByTagName('html').clientWidth <= 450) { //Wenn die Bildschirmbreite kleiner-gleich 450px ist.
            var unten = document.getElementById('unten').innerHTML; //Inhalt der Box 'unten' in einer Variablen gespeichert
            document.getElementById('unten').innerHTML = document.getElementById('oben').innerHTML; //Inhalt der Box 'oben' wird in die Box 'unten' übertragen.
            document.getElementById('oben').innerHTML = unten; //Zuvor gespeicherter Inhalt von 'unten' wird auf die Box 'oben' übertragen.
            //Damit die Boxen auch die Stilvorgaben der jeweils anderen erhalten muss auch die klasse geändert werden
            document.getElementById('unten').setAttribute('class', 'oben');
            document.getElementById('oben').setAttribure('class', 'unten);
          }
        }

    Ich habe das Beispiel zwar niccht getestet aber ich glaube, das müsste funktionieren.

    Gruss tobb10001
  4. Autor dieses Themas

    simter

    simter hat kostenlosen Webspace.

    Hallo Tobb
    tobb10001 schrieb:
    Ich würde an deiner Stelle mit JavaScript an die Sache herangehen [...]
    Entschuldige, ich habe vergessen zu erwähnen, dass JavaScript auf keinen Fall in Frage kommt. Ich baue meine Webseiten immer so auf, dass sie auch ohne JS funktionieren. Wenn jetzt das ganze Design total in der Hose ist, nur weil der User JavaScript deaktiviert hat, ist das Schade.

    Ich habe mittlerweile herausgefunden, dass ich es mit Flexbox order lösen könnte. Ich habs aber noch nicht ganz hinbekommen und der Browsersupport ist halt auch nicht grad der beste.
  5. Wieso packst du die zwei div nicht in.zwei tables und.setzt diese nebeneinander? Bin jetzt nicht der über pro im php aber so klingt es für mich am einfachsten....
  6. Autor dieses Themas

    simter

    simter hat kostenlosen Webspace.

    Hallo adteam
    adteam schrieb:
    Wieso packst du die zwei div nicht in.zwei tables und.setzt diese nebeneinander?
    Weil Tabellen veraltet sind und nicht mehr benutzt werden sollten.

    Ich habe jetzt eine Lösung mit Flexbox gefunden. Dabei erziele ich den gleichen Effekt wie mit dem Script im ersten Post, die divs sind aber richtig angeordnet.
    Trotzdem danke für eure Bemühungen.

    Gruss
  7. Manchmal kann es helfen, wenn man die div Container tauscht und das Float dann auch umstellt.
    adteam schrieb:
    Wieso packst du die zwei div nicht in.zwei tables und.setzt diese nebeneinander? Bin jetzt nicht der über pro im php aber so klingt es für mich am einfachsten....


    Tabellen sollte man wirklich nur dann nutzen, wenn es Inhalte sind, die auch in eine Tabelle gehören.
  8. Autor dieses Themas

    simter

    simter hat kostenlosen Webspace.

    Hallo all-in1
    all-in1 schrieb:
    Manchmal kann es helfen, wenn man die div Container tauscht und das Float dann auch umstellt.
    Geht in diesem Fall eben leider nicht. Zumindest habe ich es nicht hin bekommen. Der Trick funktioniert nur mit
    float: right
    , deshalb kann ich das float nicht einfach tauschen. Aber die Flexbox Lösung konnte ich jetzt in der Webseite integrieren.

    Gruss
  9. zirkus-lamberti

    zirkus-lamberti hat kostenlosen Webspace.

    Hallihallo,
    für den nächsten, der vor diesem oder einem ähnlichen Problem steht:

    Lösung mit float: https://www.mediaevent.de/tutorial/css-positionieren-float.html
    Lösung mit Flexbox: http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts

    Grüße, Chris
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!