CSS DIV-Anordnung

  • CSS

Es gibt 4 Antworten in diesem Thema. Der letzte Beitrag () ist von SpaceyX.

    CSS DIV-Anordnung

    Hey Ihr,

    ich brauch mal einen Rat. Vorab mal der HTML, bzw. CSS-Quellcode.

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <link rel="stylesheet" href="./style.css">
    6. </head>
    8. <body>
    9. <div class="container">
    10. <div class="div1">
    11. <form>
    12. <input type="text" value="div1">
    13. </form>
    14. </div>
    15. <div class="div2">
    16. <form>
    17. <input type="text" value="div2">
    18. </form>
    19. </div>
    20. <div class="div3">
    21. <form>
    22. <input type="text" value="div3">
    23. </form>
    24. </div>
    25. </div>
    27. <footer>
    28. TestFooter
    29. </footer>
    30. </body>
    32. </html>


    CSS-Quellcode

    1. .container {
    2. display: flex;
    3. justify-content: center;
    4. }
    6. .div1 {
    7. border: 2px solid red;
    8. width: 200px;
    9. height: 500px;
    10. margin: 10px;
    11. }
    13. .div2 {
    14. border: 2px solid blue;
    15. width: 200px;
    16. height: 200px;
    17. margin: 10px;
    18. }
    20. .div3 {
    21. border: 3px solid green;
    22. width: 200px;
    23. height: 200px;
    24. margin: 10px;
    25. }


    Das Ganze sieht dann so aus.



    Was ich möchte ist folgendes. Das gründe DIV (div3) soll unter dem blauem (div2) platziert werden. Aussehen soll das dann so.



    Mit absoluter Positionierung würde das gehen, möchte ich aber nicht machen. Mit CSS hab ich wirklich viel Mühe. Wäre lieb von Euch, wenn Ihr mir helft.

    Danke :)
    Die Unendlichkeit ist weit. Vor allem gegen Ende. ?(
    Manche Menschen sind gar nicht dumm. Sie haben nur Pech beim Denken. 8o

    Ich danke Dir @ISliceUrPanties

    CSS-Quellcode

    1. .container {
    2. display: grid;
    3. /* grid-template-columns: auto auto auto; */
    4. /* grid-template-rows: auto auto auto auto auto; */
    5. justify-content: center;
    6. }
    8. .div1 {
    9. grid-column-start: 1;
    10. grid-column-end: 1;
    11. grid-row-start: 1;
    12. grid-row-end: 3;
    13. border: 2px solid red;
    14. width: 200px;
    15. height: 500px;
    16. margin: 10px;
    17. }
    19. .div2 {
    20. grid-column-start: 2;
    21. grid-column-end: 2;
    22. grid-row-start: 1;
    23. grid-row-end: 1;
    24. border: 2px solid blue;
    25. width: 200px;
    26. height: 200px;
    27. margin: 10px;
    28. }
    30. .div3 {
    31. grid-column-start: 2;
    32. grid-column-end: 2;
    33. grid-row-start: 2;
    34. grid-row-end: 2;
    35. border: 3px solid green;
    36. width: 200px;
    37. height: 200px;
    38. margin: 10px;
    39. }


    Werde mir den Artikel zur Brust nehmen. Super. Erledigt.
    Die Unendlichkeit ist weit. Vor allem gegen Ende. ?(
    Manche Menschen sind gar nicht dumm. Sie haben nur Pech beim Denken. 8o

    @SpaceyX Es gibt die Möglichkeit das Grid per UI online zu generieren (grid.layoutit.com). Ich mach eher wenig mit css etc. und das was ich dann lese, lerne bliebt nicht wirklich hängen, da es dann wieder zu lange ist bis ich es benutze.

    Ich hab letztens mal so was cssgridgarden.com/#de (Grid: github.com/james-priest/grid-critters-code) (Flexbox: mastery.games/flexboxzombies/ kostenlos) gemacht und denke das das eventuell die bessere Lösung für mich ist, um das gelernte auch zu behalten.
    codewars.com Rank: 4 kyu

    Mir geht es so ähnlich wie Dir. Aber leider führt oft kein Weg mehr an "Webprogrammierung" vorbei. Und dazu gehört nun mal auch CSS. Ich bin zu lange in meiner "Consolen-Welt" festgehangen und nun tu ich mich schwer. Ich mein, es ist schon eine Menge. Nicht nur CSS, sondern das Ganze DrumRum. Und für mich ist das alles nicht immer logisch aufgebaut, obwohl es das mit Sicherheit ist, nur ich kapiers halt nicht, weil mir viele Grundlagen einfach fehlen. Ich hatte ja keine Ahnung, was ein Eventloop ist und dass es als "Aufsatz" zu JavaScript auch noch TypeScript gibt und dann die ganzen Möglichkeiten zur Konfiguration, die verschiedenen Datenbank-Systeme mit Ihren eigenen Tücken. Zigtausend verschiedene npm-Pakete und und und und. Da kann es schon mal leicht passieren, dass man ein paar Properties aus CSS einfach vergisst. Nicht zu schweigen davon, dass ich nicht wusste, dass es display: Grid gibt.

    Ich danke Dir für Deine Links, die werden mir mit Sicherheit auch noch hilfreich sein.....
    Die Unendlichkeit ist weit. Vor allem gegen Ende. ?(
    Manche Menschen sind gar nicht dumm. Sie haben nur Pech beim Denken. 8o

Facebook
Telefonspende