[HTML/CSS] 2-Column Layout

  • CSS

Es gibt 5 Antworten in diesem Thema. Der letzte Beitrag () ist von Link.

    [HTML/CSS] 2-Column Layout

    Guten Morgen!

    Ich probiere mich seit gestern an einem zwei-Spalten Layout, kriege jedoch die Sidebar nicht an der Höhe des Contents orientiert.
    Insgesamt habe ich das Gefühl, das der Code mega unsauber geschrieben ist. Ich würde mich freuen, wenn mir jemand Tipps zur Lösung des Problems geben könnte und eventuell Insgesamt Verbesserungsvorschläge für den Code nennt, damit ich mich da etwas verbessern kann und die Fehler aufgezeigt bekomme.

    Im Anhang befindet sich ein Bild, wie das ganze derzeit aussieht.

    HTML:
    Spoiler anzeigen

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <title>Startseite</title>
    7. <meta charset="UTF-8" />
    8. <meta name="description" content="" />
    9. <meta name="author" content="" />
    10. <meta name="keywords" content="" />
    12. <link href="styles/style.css" type="text/css" rel="stylesheet" />
    13. <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
    14. </head>
    16. <body>
    17. <div id="container">
    18. <div id="head">
    19. <img class="logo" src="images/logo.jpg" />
    20. <ul>
    21. <li><a href="#">Startseite</a></li>
    22. <li><a href="#">&Uuml;ber uns</a></li>
    23. <li><a href="#">Service</a></li>
    24. <li><a href="#">Kontakt</a></li>
    25. <li><a href="#">Impressum</a></li>
    26. </ul>
    27. </div>
    28. <div id="content">
    29. <h1>Herzlich Willkommen</h1>
    30. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    32. </div>
    33. <div id="sidebar">
    34. Test
    35. </div>
    36. <div id="footer_irl">
    37. Test
    38. </div>
    39. </div>
    40. </body>
    41. </html>


    CSS:
    Spoiler anzeigen

    HTML-Quellcode

    1. body
    2. {
    3. background-color: #C1C1C1;
    4. }
    6. #container {
    7. width: 1200px;
    8. margin: 0 auto;
    9. }
    11. #head {
    12. width: 1200px;
    13. height: 180px;
    14. background-color: white;
    15. padding-bottom: 10px;
    16. margin-bottom: 10px;
    17. }
    19. #head ul {
    20. height: 20px;
    21. float: right;
    22. padding-top: 140px;
    23. padding-right: 20px;
    24. list-style-type: none;
    25. }
    27. #head li {
    28. float: left;
    29. margin-left: 20px;
    30. font-family: Georgia, Times, serif;
    31. font-size: 1.5em;
    32. }
    34. #head a {
    35. text-decoration: none;
    36. color: #808080;
    37. }
    39. #head img.logo {
    40. float: left;
    41. padding-top: 15px;
    42. padding-left: 20px;
    43. }
    45. #content
    46. {
    47. float: left;
    48. width: 900px;
    49. background-color: white;
    50. height: 100%;
    51. padding-left: 10px;
    52. padding-right: 10px;
    53. }
    55. #content h1
    56. {
    57. font-family: Georgia, Times, serif;
    58. font-size: 1.5em;
    59. }
    61. #sidebar
    62. {
    63. height: 100%;
    64. margin-bottom: 20px;
    65. float: right;
    66. width: 265px;
    67. padding-left: 10px;
    68. padding-top: 10px;
    69. padding-right: 5px;
    70. padding-bottom: 10px;
    71. color: white;
    72. background-color: black;
    73. }
    75. #footer_irl
    76. {
    77. margin-top: 10px;
    78. float: left;
    79. width: 1180px;
    80. background-color: #747474;
    81. height: auto;
    82. padding-top: 10px;
    83. padding-bottom: 10px;
    84. padding-left: 10px;
    85. padding-right: 10px;
    86. }
    88. #footer_irl p
    89. {
    90. font-family: Georgia, Times, serif;
    91. font-size: 1em;
    92. text-align: center;
    93. }


    Ich freue mich auf eure Verbesserungsvorschläge!

    VG
    Bilder

    • Bild_IST.JPG

      86,59 kB, 1.261×447, 142 mal angesehen

    Hej @Neoner

    Benutze doch einfach display: table; und display: table-cell;:

    HTML-Quellcode

    HTML-Quellcode

    1. <div class="cbase">
    2. <div class="left">
    3. <!-- Content -->
    4. </div>
    5. <div class="right">
    6. <!-- Content -->
    7. </div>
    8. </div>


    CSS-Quellcode

    Quellcode

    1. div.cbase {
    2. display: table;
    3. }
    5. div.left {
    6. display: table-cell;
    7. width: 900px;
    8. }
    10. div.right {
    11. display: table-cell;
    12. width: 265px;
    13. }



    Grüße
    Väinämö

    Hallo @Vainamo V :)

    Vielen Dank für den Tipp!
    Leider bekomme ich das ganze nicht richtug umgesetzt, die DIV's sind jetzt zwar beide gleich lang, ich bekomme die jetzt aber nicht mehr formatiert.

    Ich habe die Floats entsprechend rausgenommen, da ich das gefühl hatte, dass das "display: table-cell" keine Wirkung hat.

    HTML-Quellcode

    1. #container {
    2. width: 1200px;
    3. margin: 0 auto;
    4. display: table;
    5. }
    7. #head {
    8. width: 1200px;
    9. height: 180px;
    10. background-color: white;
    11. padding-bottom: 10px;
    12. margin-bottom: 10px;
    13. }
    15. #content
    16. {
    17. display: table-cell;
    18. width: 900px;
    19. background-color: white;
    20. height: auto;
    21. }
    23. #sidebar
    24. {
    25. display: table-cell;
    26. width: 265px;
    27. background-color: black;
    28. }


    Am HTML-Code habe ich nichts verändert, ein Bild vom aktuellen Aussehen ist als Dateianhang angefügt.
    Hast du eine Idee wie ich die Formatierung ordentlich hinbekomme?

    Beste Grüße,
    Neoner
    Bilder

    • Bild_IST.JPG

      84,43 kB, 1.768×792, 148 mal angesehen

    Vielen Dank, ich dachte es reicht, wenn ich es in den DIV "Container" packe.

    Sobald ich die DIVs "Content" und "Sidebar" alleine in den Container cbase mit dem Inhalt "display: table" packe, funktioniert es einwandfrei!

    Vielen Herzlichen Dank! :)

    Bootstrap bringt dafür doch ein Grid-Layout. Einfach die 3 Links in den Head-Bereich deiner Seite packen und fertig. Anschließend noch hier nachgucken wie es zu verwenden ist. Dann hast du deinen Shit auch gleich responsive.

    Link :thumbup:
    Hello World

Facebook