Abstand nach oben?

So_Nicht · #1 (**permalink**) 14.11.2014, 05:05

Hallo,
kurze und einfache Frage. Wie mache ich den Abstand wie ich im Folgendem Bild zeige. HTML Code hänge ich ebenfalls hinzu.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>
#left {
	float: left;
	background: #3F0;
	top: 100px;
}
#right {
	float: right;
	background: #F39;
	top: 100px;
}
#left, #right {
	width: 200px;
	height: 200px;
}
#center {
	margin: 0 200px;
	background: #03C;
	height: 400px;
}
</style>
</head>
<div id="left">linker Bereich</div>
<div id="right">rechter Bereich</div>
<div id="center">die Mitte</div>

<body>
</body>
</html>

MrMurphy · #2 (**permalink**) 14.11.2014, 06:22

Hallo

Zitat:

Wie mache ich den Abstand wie ich im Folgendem Bild zeige.

1. Du verzichtest auf XHMTL. Das ist bereits offiziell seit 2006 gestorben und wird nicht mehr weiter entwickelt. Es ist auch nicht bekannt wie lange die Browser diese Altlast noch mit sich rumtragen.

2. Du benutzt HTML5 und CSS3.

3. Nicht zwingend, aber sinnvoll: Du verzichtest auf die Divitis.

4. Du verwendest das Flexbox-Modell

Das Ergebnis könnte dann zum Beispiel so aussehen:

HTML5: So Nicht - Layout

Die Größen und Abstände müssen natürlich noch deinen Vorstellungen angepasst werden, wenn zum Beispiel zwischen den Boxen kein Abstand sein soll.

Gruss

MrMurphy

So_Nicht · #3 (**permalink**) 14.11.2014, 08:30

So danke erstmal. Hab mir das jetzt mal angeschaut aber komme da wenn ich das in mein Script intregiere nicht wirklich weiter.
Ich hab es jetzt so hinbekommen, das die Linke Box und die Rechte Box auf jedenfall 100px weiter untensitzen. Nur das jetzt das Problem ist, das die Rechte Box nun anfängt nicht mehr zu floaten.
Wird nach meiner Stundenlangen Recherche wohl daran liegen, das die Mitte keine feste Breite hat. Aber selbst wenn sie eine hat, bleibt die Rechte Spalte immer noch unten, also floatet immer noch nicht. Muss ich da noch irgendwo ein Float Clear reinmachen oder irgendwie was von der breite abziehen, damit genug Platz für die rechte ist? Ich hab schon einiges zum Thema gefunden nur schlau werde ich nicht.

paracelsus · #4 (**permalink**) 15.11.2014, 12:40

Wenn Du das Beispiel irgendwo integrierst, dann nehme ich an, dass genau darin Dein Fehler liegt.
Das Beispiel von murphy funktioniert doch?
Du solltest also zeigen, was Du gemacht hast, sonst sind Fehler nicht nachvollziehbar.

Gruß

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIV wird immer mit einem Abstand nach oben angezeigt -soll aber links oben erscheinen	plegox	CSS	4	21.05.2011 12:17
Langsames Scrollen nach oben und unten möglich??	hubspe	Javascript & Ajax	16	18.11.2010 22:13
Text-Positionierung oben mit Null Pixeln nicht nicht möglich	ikezen	CSS	3	25.08.2007 17:00
Bild nach oben verschoben - oberer Teil fehlt aber	TBaDDadE	CSS	1	11.04.2005 10:53
div ausrichtung oben \| mitte \| unten	xtoph	CSS	2	21.01.2005 21:44