JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="zockerzixel, post: 8357, member: 1823"] Moin! Ich sitze momentan an meiner ersten Webseite - bin daher noch ein ziemlicher Anfänger. Nun mein Problem: [url]https://www.dropbox.com/h?preview=Bildschirmfoto+2020-05-11+um+19.36.17.png[/url] [url]https://www.dropbox.com/h?preview=Bildschirmfoto+2020-05-14+um+16.39.01.png[/url] (Bilder sind nochmal als Datei angehängt) Egal wie ich es probiere - entweder geht die Sidebar in die Section oder sie setzt sich unter die Section. Wie kann ich das beheben? Also die Sidebar soll neben der Section sein, dennoch "getrennt". Also das es nicht ineinander hinein geht. Mit freundlichen Grüßen zockerzixel:) Die Codes (HTML und CSS). Ich weiß das es etwas viel zu viel geworden ist. Da ich aber noch Anfänger bin, kopiere ich lieber zu viel als zu wenig.: [HTML]<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>HTML | Home</title> <meta charset="utf-8"> </head> <body> <div id="wrapper"> <header><img alt="Logo" src="pictures/logo.png"> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Überuns.html">Über uns</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> </nav> <section> <div class="article"> <img alt="Vorschau" src="pictures/vorschau.png"> <a href="#">Das ist der Titel von diesem Beitrag</a> <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.</p> </div> <div class="article"> <img alt="Vorschau" src="pictures/vorschau.png"> <a href="#">Das ist der Titel von diesem Beitrag</a> <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.</p> </div> <div class="article"> <img alt="Vorschau" src="pictures/vorschau.png"> <a href="#">Das ist der Titel von diesem Beitrag</a> <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.</p> </div> </section> <aside> <div class="sidebar"> <a href="#"> Das ist die Sidebar </a> <br /> <img alt="Sidebar" src="pictures/sidebar.png"> <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class="sidebar"> <a href="#"> Das ist die Sidebar </a> <br /> <img alt="Sidebar" src="pictures/sidebar.png"> <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </aside> <footer> <ul> <li><a href="index.html">Home</a></li> <li><a href="Überuns.html">Über uns</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> <p> <a href="#">© 2020 zockerzixel05 </a> </p> </footer> </div> </body> </html>[/HTML] [CODE]#wrapper { width: 960px; margin-right: auto; margin-left: auto; font-size: 16px; font-family: arial, sans-serif; } body { background-color: #EDEDE8; text-align: center; } header* { padding-top: 10px; padding-bottom: 10px; height: 50px; position: absolute; text-align: center; } nav { text-align: center; } nav ul { list-style-type: none; } nav li { display: inline; margin-right: 40px; } a { color: #777; text-decoration: none; } section { width: 603px; float: left; padding: 15px; margin-top: 15px; margin-right: 15px; background-color: #F2F2F2; border: 1px solid #DEDCD9; border-radius: 5px; margin-bottom: 10px; } .article { height: 120px; margin-top: 15px; margin-bottom: 50px; } .article img { float: left; padding: 5px; margin-right: 10px; border: 1px solid #DEDCD9; } .article a { font-size: 18px; } aside { widht: 258px; flex: right; padding: 25px; margin-top: 15px; margin-left: 15px; background-color: #F2F2F2; border: 1px solid #DEDCD9; border-radius: 5px; margin-buttom: 10px; } .sidebar img { padding: 5px; margin-top: 15px; border: 1px solid #DEDCD9; } .sidebar a { font-size: 18px; padding: 5px; } .sidebar p { padding: 5px; } footer { background-color: #F2F2F2; border: 1px solid #DEDCD9; border-radius: 5px; clear: both; } footer ul { float: left; list-style: none; padding: 0px; margin: 20px; } footer li { margin-right: 15px; display: inline; } footer p { text-align: right; margin-right: 20px; color: #777; } #über { margin: 15px; } #über h1 { color: #777; padding-bottom: 10px; } #kontakt { margin: 15px; } #kontakt h1 { color: #777; padding-bottom: 10px; } }[/CODE] [/QUOTE]

Authentifizierung