Probleme mit der Darstellung von DIVs

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Probleme mit der Darstellung von DIVs

Beitrag von Mandy am 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:

Code:
<!DOCTYPE html>
<html>
 <head>
 <title>DIV-Test</title>
 <style>
 .links
 {
  background: #FFCCCC;
  width: 510px;
  height: 350px;
  float: left;
 }

 .rechtsAussen
 {
  background: #CCFFCC;
  width: 440px;
  height: 350px;
  display: inline-block;
 }
 .rechtsInnen
 {
  background: #CCCCFF;
  height: 90%;
  overflow: auto;
 }
 </style>
 </head>
 <body>
 <div class="links">Div links</div>
 <div class="rechtsAussen">Div rechtsAussen
 <div class="rechtsInnen">
 Rit in velis ese conulluptat lamconu lputpat iure modolore faccum in utet, quatue commy nisisi.
Rostio odip erosting ero ex et, consed exero dunt la feugue exeraesequam erat ex et in verostrud dolum dunt prate velenim in et accummo dolore delisit wissi eril utpat eugiam, conulpute commy nim inibh er si bla consequis nis aut alis dolobore con ulla conseniam at irit aci tem volortinit ing euis dit in hent autatum volore tat. Giam veniamc onumsan hendre mincin estrud dit adionsed dui tem aliquisim ver ipsum iusciduismod tion utpat. Et wis aci tio dolobor sustrud mod eros alisi.
To consed eum dolortin exerate er aut lorpercipsum zzriure dolore modip exerosto odiat numsandignim exer ip enit, sum iure estrud dolessi endreet lobortincin ex essequisim vel dolenit la faci bla cor alissi.
Et, consequam, core modoloreetum qui blam veros erat vel ex endiam et, velisim verostrud tat. Er si tat eugiamet, velit lortin henim nonsequat, commole ssequat, cor augue vullam, volore ecte min veliquisi bla faccum vulput prat praessi.
San henismodion utpat. Tat iurer ad ming exerill uptat, volorem illamco mmolore feugiatuer si bla conumsan volum dolore el estrud dolorperosto dolorerate tincill uptat. Dui euipis augiam dit, corem aut nis nim num qui te et alit, quam delesed del dolorerat, volestin eugiam quip ea commy nis adigna aut ulput eugiamet wiscip ea augiat. Xerit exerostrud tatem quissit nummod magna at. Idunt augait, conse faccum zzrilla adiam augiam ing er si er se dolorer iuscipit la con henim vulla faciliquam enim dolent inim delessi.
Lor auguer irit wis dolorem eugiam, quatummolum elisi esto commy nonsecte mod ming essi.
Ad del ex eum velesto diat. Rat. Gait nis euisit vel irit, cor si exeraesequis do conullaor acidunt wisl doloreet, commodignis adit veliquat, commy nibh eugue magna facilis ex ex eugiat in hendre dolor ing eugait iuscini amconsequam, sim illutat ilisi.
Tie do odolesequat, quis eugait nonsecte feum quis autet lor ilit iliquip elisl dolorero enisim ing eniat. Ut loborem nismodiat aliquis cipsuscinibh et, suscil dit alis nos duisl ulla feugait utat lore duismodo od ero con veleseq uiscil deliqui tate tatinci liquis nissequam veratetum vel iriuscipit, quamet lummy niat nit ad ex erostio eugiam venibh essent lortism odigna facip ea alit ute modigna feummy nummy nosting ea consequiscil iusto od dolore consenim quis alis auguera estrud min etum ipit, velestinim veros eugiamc onsenim vel ut utpat am nonsequisi tio commoluptat eumsand ionsed dolor alisi.
Ut incil dui tie diamcons adipit lum eugait utat. Alisl dions augiam, sim irillandion eu faccumsan velit ent prat pratio consequam nonse dolendiatum et deleniamet nullamcommy nit iliquat, commy nosto digna faci ecte tisisit num qui eugait acillam dolor sendre ectem augueros dio dolobore magnisisi tat alis non ullandreet vel eugait iril utat dolobor sum volor iurerci euipis nulput lum dolor at.
Rem zzrit ilis num ercidui scipit wis at nos nullum ver autet praestin eu feum ip et prat veriusto odolenim nisi.
Giamcommodit iriliscil digna conse vulla core feugiamet la feumsandre feui blam, velisl ea alit venibh eraestrud ecte cor augait pratue magnim dolorperat, conse molorpe rciliquatem quat, quiscin hendre faccumsan
 </div>
 </div>
 </body>
</html>

_________________
Zum sicheren Herunterfahren des Computers NICHT den großen Knopf drücken!

Mandy
Admin

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

http://technikzumanfassen.forumieren.com

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

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