Zwei divs nebeneinander, eines mit fixer Breite
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute code
all
boxen
code
container
effekt
erzielen
festgehaltene inhalte
funktionieren
helfen
herangehen
http
inhalt
positionieren
problem
sache
stelle
tabelle
trick
url
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo Simter,
in der Tat ein schwieriges Problem, was mit HTML und CSS ohne
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:position: absolute;
<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 -
Hallo Tobb
tobb10001 schrieb:
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 würde an deiner Stelle mit JavaScript an die Sache herangehen [...]
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. -
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....
-
Hallo adteam
adteam schrieb:
Weil Tabellen veraltet sind und nicht mehr benutzt werden sollten.
Wieso packst du die zwei div nicht in.zwei tables und.setzt diese nebeneinander?
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 -
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. -
Hallo all-in1
all-in1 schrieb:
Geht in diesem Fall eben leider nicht. Zumindest habe ich es nicht hin bekommen. Der Trick funktioniert nur mit
Manchmal kann es helfen, wenn man die div Container tauscht und das Float dann auch umstellt.
, deshalb kann ich das float nicht einfach tauschen. Aber die Flexbox Lösung konnte ich jetzt in der Webseite integrieren.float: right
Gruss -
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
