/

zockerzixel · 14.05.2020

Hi!
Ich bin ein ziemlicher Anfänger auf dem Gebiet des entwickeln.

Jetzt Mein Problem:

Meine Sidebar verschiebt sich. Je nach dem wie ich Float und Flex in der style.css Datei einsetze.(siehe Bilder)

Also zur Frage, Wie kriege ich das hin, das sich meine Sidebar an die Seite positioniert. Ohne in die Section überzugehen oder unter der Section sich zu positionieren?

Mit freundlichen Grüßen zockerzixel

Mir ist bewusst das es eindeutig zu viel Code ist den ich hier reinkopiere. Aber ich mach das mal aus Sicherheit.
Die Codes Folgen:

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>

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;
	margin-right: 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;
	background-color: #F2F2F2;
	border: 1px solid #DEDCD9;
	border-radius: 5px;
	margin-buttom: 10px;
	margin-left: 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;
}
}