nicht angemeldet
Moin!
Ich erstelle momentan meine erste Webseite und bin daher ziemlich unerfahren.
Mein Problem ist folgendes, Die Sidebar fusioniert mit der section. Auf der Startseite sieht das noch relativ okay aus, aber sobald man in den Kontakt Bereich kommt, geht der Text direkt unter der Section weiter. Wenn ich flex durch float ersetze, schiebt sich die Sidebar unter die Section. Das ganze ist auf dem Bildern deutlich zu sehen.
Ich möchte aber, das die Section wie auf dem Bild ist, Was ich aus euren Wiki heruntergeladen habe, sodass links die Section und rechts die Sidebar schön getrennt ist. Wie kann ich das beheben?
Ich bin ein Anfänger und kopiere daher den ganzen CSS und den ganzen HTML Code. So kann ich nichts weglassen was wichtig sein könnte. Ich entschuldige mich schonmal für die Masse die folgt.
Mit freundlichen Grüßen zockerzixel
Codes:
CSS:
#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;
}
}
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 von Kontakt:
<!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 id="kontakt">
<h1>Kontakt</h1>
<a>Namen:</a>
<p>Mensch 1 Mensch 2 Mensch 3</p>
<a>Email</a>
<p>Haben wir nicht.</p>
<a>Twitter</a>
<p>Auch nicht</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>
Rolf B