1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

[ERLEDIGT] Kompletter DIV-Container

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von fabian97, 10 Dezember 2016.

  1. fabian97

    fabian97 Neues Mitglied

    Registriert seit:
    29 November 2016
    Beiträge:
    6
    Punkte für Erfolge:
    1
    Hallo,

    Zur Veranschauung habe ich meine bisherigen Ergebnisse mal hochgeladen: http://acvm.bplaced.net/frage.php

    HTML:
    1. <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    2. <title>YourTime-FM</title>
    3. body
    4. {
    5. background:#eee;
    6. font-family: 'Poppins', Arial;
    7. }
    8. #body
    9. {
    10.  z-index:1;
    11.  position:absolute;
    12.  top:90px;
    13.  left:5%;
    14.  right:5%;
    15.  background:#FFF;
    16.  color:#000;
    17.  min-height:100px;
    18.  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    19. }
    20. #links
    21. {
    22.  z-index:4;
    23.  position:absolute;
    24.  left:0%;
    25.  right:25%;
    26.  padding:5px;
    27.  color:#000;
    28. }
    29. #rechts
    30. {
    31.  z-index:4;
    32.  position:absolute;
    33.  left:80%;
    34.  right:0%;
    35.  padding:5px;
    36.  color:#000;
    37. }
    38. #title1
    39. {
    40. font-size:18px;
    41. font-weight:bold;
    42. }
    43. #desc1
    44. {
    45. font-size:14px;
    46. border-bottom:1px solid #000;
    47. }
    48. </head>
    49.  
    50. <div id="body">
    51.  
    52. <div id="links">
    53. <div id="title1">Titel 1</div>
    54. <div id="desc1">Beschreibung 1</div>
    55.  
    56. </div>
    57. <div id="rechts">
    58. <div id="title1">Titel 1</div>
    59. <div id="desc1">Beschreibung 1</div>
    60. <div id="title1">Titel 1</div>
    61. <div id="desc1">Beschreibung 1</div>
    62. <div id="title1">Titel 1</div>
    63. <div id="desc1">Beschreibung 1</div>
    64. </div>
    65. </div>
    66. </body>
    67. </html>
    Ich möchte gerne meinen Content in einem großen Container anzeigen lassen, der in zwei Spalten aufgeteilt ist. Allerdings erkennt der große Container (in diesem Fall div id="body") nicht automatisch, wie hoch der Inhalt ist.

    Nun meine Frage: Was mache ich falsch? :(

    Danke für eure Hilfe :)

    Beste Grüße,
    Fabian
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.396
    Punkte für Erfolge:
    63
    Hallo

    Du verwendest position: absolute ohne dich mit den HTML-/CSS-Grundlagen vertraut gemacht zu haben.

    Mit position: absolute werden die damit belegten Container aus dem Dokumentenfluß genommen. Damit können die Container nicht mehr gegenseitig aufeinander reagieren. Eine Folge ist dass umgebende Container nicht wissen wie groß die inneren Container sind.

    position-Angaben werden nur noch für wenige Layoutwünsche benötigt.

    Ähnliches gilt für Float.

    Zum Grundlayout solltest du aktuell Flexbox (display: flex) verwenden.

    Gruss

    MrMurphy
     
  3. fabian97

    fabian97 Neues Mitglied

    Registriert seit:
    29 November 2016
    Beiträge:
    6
    Punkte für Erfolge:
    1
    Danke, das ist es :)

    Schönen Abend noch :)