Alex: 3-spaltiges Layout -> 1-spaltiges Layout

Beitrag lesen

SELF-Forum

3-spaltiges Layout -> 1-spaltiges Layout

Alex
– Informationen zu den Bewertungsregeln

Hallo,

ich versuche mich gerade an einem 3-spaltigem responsive Layout mit einem Breakpoint bei 800px. Alles <800px soll einspaltig dargestellt werden.

Hier mal eine kleine Skizze:
Layoutskizze

Bis mir die Idee mit den Boxen 4 und 5 gekommen ist, konnte ich das alles ganz gut umsetzen; da einfach nur die Boxen 1 und 3 links/rechts zu floaten waren. Box5 konnte ich auch noch umsetzen, indem ich den Inhalt ebenfalls die Eigenschaft float: left verpasst habe. Für Box3 fehlt nun eine Eigenschaft float both bzw. wohl eher eine Idee, wie ich die Box4 in der Großansicht (>800px) links von dem Inhalt (Box3) bekomme und in der Kleinansicht (<800px) darunter (siehe Skizze).

Mein HTML:

<!DOCTYPE html>  
<html>  
<head>  
	<title>Test (Breakpoint bei 800px)</title>  
	<meta charset="utf-8" />  
</head>  
<body>  
<div id="header">Header</div>  
	<div id="box1">Box1 links oben</div>  
	<div id="box2">Box2 rechts oben</div>  
	<div id="box3"><h1>Box3 mitte</h1>  
	<p>Blindtexte nennt man Texte, die bei der Produktion von Publikationen oder Webseiten als Platzhalter für spätere Inhalte stehen, wenn der eigentliche Text noch nicht vorhanden ist. Sie werden auch als Dummy-, Füll- oder Platzhaltertexte bezeichnet. Mitunter sollen Komponisten von Liedern Blindtexte beim Komponieren von Melodien benutzen und diese vor dem Dichten des Liedtextes singen. Bereits seit dem 16. Jahrhundert dürften Blindtexte bei Setzern üblich gewesen sein.</p>  
	</div>	  
	<div id="box4">Box4 links unten</div>	  
	<div id="box5">Box 5 rechts unten</div>  
<div id="footer">Footer</div>  
</body>  
</html>

Mein CSS:

* { margin: 0; padding: 0; text-align: center; }  
#header, #footer { background-color: black; color: white;}  
#footer { clear: both; }  
#box1 { background-color: blue; width: 30%; float: left; }  
#box2 { background-color: green; width: 30%; float: right; }  
#box3 { background-color: yellow; width: 40%; float: left; }  
#box4 { background-color: pink; width: 30%; float: left; }  
#box5 { background-color: silver; width: 30%; float: left; }  
  
@media screen and (max-width: 800px) {  
#box1, #box2, #box3, #box4, #box5 { width: 100%;}		  
}

Ich bin für alle Anregungen, Tipps, Ideen wie das skizzierte Beispiel umzusetzen sehr dankbar; gerne lade ich das vollständige Beispiel hoch, wenn dies hilfreich ist.

Gruß
Alex

Beitrag melden
–
Informationen zu den Bewertungsregeln