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
CSS:
Spoiler anzeigen
Ich freue mich auf eure Verbesserungsvorschläge!
VG
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:
HTML-Quellcode
- <!DOCTYPE html>
- <html>
- <head>
- <title>Startseite</title>
- <meta charset="UTF-8" />
- <meta name="description" content="" />
- <meta name="author" content="" />
- <meta name="keywords" content="" />
- <link href="styles/style.css" type="text/css" rel="stylesheet" />
- <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
- </head>
- <body>
- <div id="container">
- <div id="head">
- <img class="logo" src="images/logo.jpg" />
- <ul>
- <li><a href="#">Startseite</a></li>
- <li><a href="#">Über uns</a></li>
- <li><a href="#">Service</a></li>
- <li><a href="#">Kontakt</a></li>
- <li><a href="#">Impressum</a></li>
- </ul>
- </div>
- <div id="content">
- <h1>Herzlich Willkommen</h1>
- <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>
- </div>
- <div id="sidebar">
- Test
- </div>
- <div id="footer_irl">
- Test
- </div>
- </div>
- </body>
- </html>
CSS:
HTML-Quellcode
- body
- {
- background-color: #C1C1C1;
- }
- #container {
- width: 1200px;
- margin: 0 auto;
- }
- #head {
- width: 1200px;
- height: 180px;
- background-color: white;
- padding-bottom: 10px;
- margin-bottom: 10px;
- }
- #head ul {
- height: 20px;
- float: right;
- padding-top: 140px;
- padding-right: 20px;
- list-style-type: none;
- }
- #head li {
- float: left;
- margin-left: 20px;
- font-family: Georgia, Times, serif;
- font-size: 1.5em;
- }
- #head a {
- text-decoration: none;
- color: #808080;
- }
- #head img.logo {
- float: left;
- padding-top: 15px;
- padding-left: 20px;
- }
- #content
- {
- float: left;
- width: 900px;
- background-color: white;
- height: 100%;
- padding-left: 10px;
- padding-right: 10px;
- }
- #content h1
- {
- font-family: Georgia, Times, serif;
- font-size: 1.5em;
- }
- #sidebar
- {
- height: 100%;
- margin-bottom: 20px;
- float: right;
- width: 265px;
- padding-left: 10px;
- padding-top: 10px;
- padding-right: 5px;
- padding-bottom: 10px;
- color: white;
- background-color: black;
- }
- #footer_irl
- {
- margin-top: 10px;
- float: left;
- width: 1180px;
- background-color: #747474;
- height: auto;
- padding-top: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
- padding-right: 10px;
- }
- #footer_irl p
- {
- font-family: Georgia, Times, serif;
- font-size: 1em;
- text-align: center;
- }
Ich freue mich auf eure Verbesserungsvorschläge!
VG