Technik zum Anfassen
Würden Sie gerne auf diese Nachricht reagieren? Erstellen Sie einen Account in wenigen Klicks oder loggen Sie sich ein, um fortzufahren.

Probleme mit der Darstellung von DIVs

Nach unten

Probleme mit der Darstellung von DIVs Empty Probleme mit der Darstellung von DIVs

Beitrag von Mandy Do Feb 04, 2016 2:35 pm

Es ist nichts einfacher, als ein paar DIVs untereinander auf eine Webseite zu "klatschen" und ein paar Inhalte darin zu zeigen.
Komplizierter wird es, wenn die Dinger dann nebeneinander sein sollen. Plötzlich verschwinden sie, liegen auch ohne Z-Index übereinander und irgendwie funktioniert nichts mehr. Hier sind so ein paar Punkte, die mir so aufgefallen sind (und für die ich das Internet leergesaugt und trotzdem keine Lösung gefunden habe):

Die DIVs sollen nebeneinander sein, aber das zweite weigert sich trotz "float: left" neben dem anderen zu stehen. Damit Inhalte auch über das DIV hinaus sichtbar sein können, wurde "overflow" auf "auto" oder "scroll" gesetzt. Aus irgendeinem Grund ist "overflow" nicht so recht kompatibel.
Meine Lösung:
Ein weiteres DIV im störrischen DIV. Das äußere erhält "display: inline-block" und das innere erhält den gewünschten "overflow: scroll" oder "overflow: auto".
So schaut es bei mir aus:
Code:
.links
{
  background: #FF0000;
  width: 510px;
  height: 350px;
  float: left;
}

.rechtsAussen
{
  background: #00FF00;
  width: 440px;
  height: 350px;
  display: inline-block;
}
.rechtsInnen
{
  background: #0000FF;
  overflow: auto;
}


Das Problem jetzt: Die Höhe des inneren DIVs muss extra angegeben werden. Wenn - wie ursprünglich geplant - in dem äußerden DIV keine Inhalte sind, geschieht dies mit "height: 100%". Dann sind beide gleich groß.

Holt euch hier den Versuchsquellcode, mit dem ihr Lokal herumprobieren könnt:
Spoiler:

Mandy
Admin

Anzahl der Beiträge : 21
Anmeldedatum : 27.04.11
Ort : NRW

https://technikzumanfassen.forenverzeichnis.com

Nach oben Nach unten

Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten