Div Boxen überlappen

Takula · 31. Januar 2015

Hallo,

Ich wollte eine Neue Webseite erstellen doch dort bit ich auf ein Problem gestoßen: ich möchte die Webseite wie unten auf dem Bild dargestellt erstellen. Die Boxen in dunkel Lila und Lila hab ich hinbekommen. Nun soll aber die Hauptbox mit dem Inhalt ein stück oben und unten auf der Lilanen Box liegen. Außerdem soll sich die weiße Box also Hauptbox mit dem Inhalt verlängern in der höhe. Soll aber so bleiben nur das dann das weiße stück langer wird.

wäre für Hilfe dankbar,

wolf · 31. Januar 2015

Es ist etwas schwieriger das umzusetzten.. prinzipiell der weißen Box ein negative margin geben aber dann unterlappt das Unten...
Hier ist eine Möglichkeit: http://codepen.io/wolf-w/pen/LEzPNO

Nitamud · 31. Januar 2015

Habs jetzt auch noch zusammenbekommen:

HTML

<header class="bg"></header>
	<div id="wrapper" class="overlapp">

		<section>
			<h1>Überschrift</h1>

			<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. 
			At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
			sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed 
			diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
			eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

			<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. 
			At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
			sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed .
			</p>


		</section>
	</div>

	<footer class="bg"></footer>

Alles anzeigen

CSS

* {margin: 0; padding: 0;}

	.bg {
		background-color: #AD33AD; 
		height: 150px;


	}

	header {
		border-top: 10px solid #962479;

	}

	footer {
		border-bottom: 10px solid #962479;
	}

	section {
		background-color: white;
		margin-left: 10%; 
		margin-right: 10%;
		padding: 10%;



		-webkit-flex: 1; 	
		-ms-flex: 1;
		flex: 1;
	}

	.obottom {

		margin-bottom: -100px;


	}

	.otop {


		margin-top: -100px;

	}

	#wrapper {

		display: -webkit-flex;
		display: -ms-flex;
		display: flex;





		background-color: #B666A1; 
		width: 100%; 

	}

Alles anzeigen

Hat ganz schön gedauert, war nicht ganz so einfach sowas hinzubekommen. Geklappt hats dann erst mit negativen Margins in Kombination mit Flexbox, aber jetzt ist es wenigstens auch noch voll responsive

Div Boxen überlappen

Jetzt mitmachen!

Teilen