zockerzixel: Sidebar "fusioniert" mit der section

SELF-Forum

Sidebar "fusioniert" mit der section

zockerzixel
– Informationen zu den Bewertungsregeln

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

Startseite wenn ich flex durch float ersetze Der Fehler bei Kontakt Beispiel vom Wiki 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="#">&copy; 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="#">&copy; 2020 zockerzixel05 </a>
			</p>
		</footer>


	</div>


</body>





</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Sidebar "fusioniert" mit der section

    Rolf B
    – Informationen zu den Bewertungsregeln

    Hallo zockerzixel,

    willkommen im Forum. Ich hoffe, wir können Dir weiterhelfen. Könntest Du bitte die Wiki-Seite nennen, von der Du dein Layout entnommen hast? Es passt nämlich alles nicht so recht, was ich in deinem HTML sehe. Gibt es eine Online-Version deiner Seite?

    kopiere daher den ganzen CSS

    Da muss ich einhaken: Das sieht anders aus, so, als ob Du abgetippt hättest. Sonst würde da nicht widht: 258px; im aside stehen. Die Eigenschaft heißt width.

    Da steht auch flex:right - das gibt's nicht. Es gibt float:right, aber Flexbox steuert sich anders. Und Flexbox ist auch das Richtige für deinen Zweck, float ist heute nicht mehr das geeignete Werkzeug um Haupt-Inhalt und Sidebar nebeneinander zu bekommen.

    Wenn Du section und aside mit Flexbox nebeneinander haben willst, brauchen sie einen Container, in dem sie stehen. Dieser Container muss display:flex haben. Das ist in deinem HTML aber nicht der Fall.

    Dein "lineares" HTML eignet sich eher für eine Layout-Steuerung mit Grid, das ist aber nochmal eine Stufe weiter...

    Statt einfach Teile aus unserem Wiki abzuschreiben oder zu kopieren, solltest Du versuchen, die gezeigten Konzepte zu verstehen und für deinen Zweck einzusetzen.

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln