Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Div-Layer - kurze Frage...

Neo van Matix
in Webdesign

Empfohlene Antworten

Veröffentlicht

Hallo,

ich sitz seit heute Mittag um 14:00 an einem Problem, und weiß nun keinen Ausweg mehr... und ja, ich weiß, dass wir 23:15 haben *g*

Ich hab einen Layer auf einer Seite - 760 pixel Breit, zentriert - mein "Content"; also eine weiße Spalte auf grauem Hintergrund.

An diese Spalte möchte ich auf der linken Seite einen weiteren Layer (Sidebar) "andocken" - 10 px entfernt.

Mein Problem: Mit position:absolute (was wirklich genau das wäre, was ich suche) kann ich nicht arbeiten. Absolute orientiert sich an dem Elternelement, welches ebenfalls per absolute positioniert wurde. Ist keins vorhanden, orientiert sich's am Body-Element. Da ich nichts mit Absolute positioniert hab, müsste ich mich am Body-element orientieren - und das klappt nicht wirklich, da ich keine fixen Angaben bei unterschiedlichen Anzeige-Auflösungen machen möchte / kann.

Mit position:relative und Float lässt sich ebenso wenig arbeiten. Grund: Ich pack diese Sidebar in meine Spalte - postition:relative; float:left;. Soweit alles klar - die Sidebar wird IN der Spalte angezeigt und umflossen. Wenn ich Sie nun per left: xyz px; verschieb, wird die Sidebar zwar verschoben, dennoch wird der Ursprungsort weiterhin vom umliegenden Text umflossen - sodass die Bar zwar an dem richtigen Fleck ist, aber mein Layout (bzw. der text) total verzerrt.

Meine Frage: Wie positionier ich ein Element neben einem anderen, welches zentriert ist - so, dass es auch auf allen Auflösungen gleich aussieht ?

Wenn ich dich richtig verstanden habe (manchmal ist ein Screenshot oder ein Link extrem hilfreich), benötigst du ein Div mit der fixen Breite mittig ausgerichtet. Innerhalb dieses divs wirst du einerseits fix ein div für die linke Sidebar packen und 10px entfernt deinen nächsten div, der dann dort mittig ausgerichtet ist. Da das Umschlossene div eine fixe Breite besitzt, kannst du bei den beiden divs innerhalb mit fixen Werten hantieren.

Allerdings liegt die Berechnung der Angaben bei dir.

Habe ich dich richtig verstanden?

So in der Richtung?


<html>

<head>

	<title>Untitled</title>

<style>

	html, body{

		font-face: Arial;

		font-size: 12px;

	}

	#page{

		text-align: center;

		margin: auto;


	}

	#containerContent{

		width: 760px;

		position: relative;

		text-align: left;

		margin:auto;


	}

	#content{

		width: 100%;

		height: 400px;

		position: absolute;

		background-color: #cdcdcd;

	}

	#sidebar{

		height: 400px;

		position: absolute;

		width: 80px;

		left: -90px;

		background-color: #efefef;

	}

</style>

</head>


<body>

<div id="page">

	<div id="containerContent">

		<div id="content">hier der Content</div>

		<div id="sidebar">Hier die Sidebar</div>

	</div>

</div>



</body>

</html>

  • Autor
So in der Richtung?


<html>

<head>

	<title>Untitled</title>

<style>

	html, body{

		font-face: Arial;

		font-size: 12px;

	}

	#page{

		text-align: center;

		margin: auto;


	}

	#containerContent{

		width: 760px;

		position: relative;

		text-align: left;

		margin:auto;


	}

	#content{

		width: 100%;

		height: 400px;

		position: absolute;

		background-color: #cdcdcd;

	}

	#sidebar{

		height: 400px;

		position: absolute;

		width: 80px;

		left: -90px;

		background-color: #efefef;

	}

</style>

</head>


<body>

<div id="page">

	<div id="containerContent">

		<div id="content">hier der Content</div>

		<div id="sidebar">Hier die Sidebar</div>

	</div>

</div>



</body>

</html>

Ähm, ja aber... oO Ich werds heut Abend mal übernehmen. Kann doch nich so schwer sein...

Hi Neo,

du willst doch bestimmt das sich deine "sidebar" und dein "Content" in deinem "containerContent" zentrieren, oder?

Dann solltest du zuerst darauf achten, dass die Breite von "sidebar" und "Content" nicht größer ist als die Breite vom "containerContent".

Derzeit hat dein "containerContent" eine Breite von 760px und dein "Content" eine Breite von 100%, was wiederum 760px entspricht. Neben dem "Content" soll im "containerContent" ja auch noch die "sidebar" mit 80px platz finden.

Endweder du gibst deinem "Content" nur ca 90% oder 680px, wobei du von den Werten jeweis noch den Abstand zwischen den beiden Div's abziehen musst.

Lange rede kurzer Sinn.

Hier einfach mal der CSS-Code.

#containerContent{

width: 760px;

height: 400px;

position: relative;

text-align: left;

margin:auto;

}

#content{

width: 670px;

height: 400px;

position: absolute;

left: 90px;

background-color: #cdcdcd;

}

#sidebar{

height: 400px;

position: absolute;

width: 80px;

left: 0px;

background-color: #efefef;

}

Hoffe du kannst damit etwas anfangen.

Erstelle ein Konto oder melde dich an, um einen Kommentar zu schreiben.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.