Box Modell, CSS Darstellungs Problem.

10.06.2009, 19:53

Moin,

ich erstelle gerade mal wieder ein Layout und habe ein kleinen Problem. Und zwar sieht das Produkt so aus:

http://img193.imageshack.us/img193/4879/testqrh.jpg

Hierzu der passende Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de" dir="ltr">
<head>
<style media="screen" type="text/css">
*{margin:0px;padding:0px}
html{background:#333 url(hg.gif) repeat-y center top}
body{font-size:1em;font-family:verdana,helvetica,sans-serif;color:#303030;height:100%;}

#header {
	width:925px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid red;
	height:120px;
}

#logo {
	padding:15px;
}

#main {
	width:925px;
	margin-left:auto;
	margin-right:auto;
}

#left{
	width:22%;
	float:left;
	border:1px solid red;
	height:100%;
}

#content {
	width:50%;
	margin-left:auto;
	margin-right:auto;
	border:1px solid red;
	height:100%;
}

#right {
	width:22%;
	float:right;
	border:1px solid red;
	height:100%;
}
</style>

</head>
<body>
<div id="header">
	<div id="logo">
		<img src="logo.png" alt="logo" />
	</div>
</div><br />
<div id="main">
	<div id="left">&nbsp;<br /><br /><br /><br /><br /><br /></div>
	<div id="content">&nbsp;<br /><br /><br /><br /><br /></div>
	<div id="right">&nbsp;<br /><br /><br /><br /><br /><br /></div>
</div>
</body>
</html>

Wie schaffe ich es jetzt, das die Rote Box auf der gleichen höhe wie die anderen Boxen ist?
Ich habe schon mti float und so versucht, bekomme es nicht hin..

Danke für eure Hilfe

McSodbrenner · 10.06.2009, 20:34

Im HTML muss die Reihenfolge sein:
-div left
-div right
-div content

CSS von left und right sind ok.
content müsste eigentlich
margin: 0 22%;
haben.

10.06.2009, 20:49

Danke.
Jetzt klappt alles.
Warum muss bei HTML diese Reihenfolge?

McSodbrenner · 10.06.2009, 21:00

Tja, so richtig genau kann ich dir das auch nicht sagen, aber vielleicht hilft dir das weiter:
Float: Die Theorie

nikosch · 10.06.2009, 21:14

Zitat:

Im HTML muss die Reihenfolge sein:
-div left
-div right
-div content

Glaub ich nicht. Du musst dem Content bloss auch ein Floating geben.

10.06.2009, 21:29

Zitat:

Zitat von nikosch

Glaub ich nicht. Du musst dem Content bloss auch ein Floating geben.

Habe es so gemacht:

Zitat:

Zitat von McSodbrenner

Im HTML muss die Reihenfolge sein:
-div left
-div right
-div content

CSS von left und right sind ok.
content müsste eigentlich
margin: 0 22%;
haben.

Und es klappt.
Wenn es mit float geht würde ich gerne wissen wie.
Danke

nikosch · 10.06.2009, 21:42

Code:

#content {
	width:50%;
	margin-left:auto;
	margin-right:auto;
	border:1px solid red;
	height:100%;
        float:left;
}

sollte gehen.

11.06.2009, 05:41

Ja geht auch.
Jedoch ist es an die linke Box rangeklatscht.
Was mit den einstellungen von McSodbrenner nicht der Fall ist.

McSodbrenner · 11.06.2009, 09:24

Wenn du den content nicht floatest, brauchst du auch keine Breite für die Mitte mitzugeben. Dann wird der Mittelbereich sauber ausgefüllt. Die Abstände zu den Boxen kannst du dann schön mit padding realisieren.

nikosch · 11.06.2009, 13:00

Das rangeklatschte ist eigentlich der Normalfall und bietet Dir die Möglichkeit, alles Rahmen genau einzustellen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Box Modell Problem zwischen Internet Explorer 6 und FireFox	DonTermi	HTML, Usability und Barrierefreiheit	5	07.12.2006 16:30
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
[Erledigt] Problem bei Massenmails versenden mit der Funktion mail		PHP-Fortgeschrittene	3	19.01.2005 13:36
[Erledigt] Problem mit Übergabe einer Klasse in PHP4		PHP-Fortgeschrittene	10	08.01.2005 21:00
Problem mit Weiterleitung		PHP Tipps 2004-2	16	22.12.2004 17:49
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

10.06.2009, 20:34
McSodbrenner Erfahrener Benutzer Registriert seit: 28.11.2008 Beiträge: 160 PHP-Kenntnisse: Fortgeschritten	Im HTML muss die Reihenfolge sein: -div left -div right -div content CSS von left und right sind ok. content müsste eigentlich margin: 0 22%; haben. __________________ http://mcsodbrenner.blogspot.com/ Serpent PHP Template Engine: http://code.google.com/p/serpent-php-template-engine/

10.06.2009, 20:49
Kein Genie Gast Beiträge: n/a	Danke. Jetzt klappt alles. Warum muss bei HTML diese Reihenfolge?

10.06.2009, 21:00
McSodbrenner Erfahrener Benutzer Registriert seit: 28.11.2008 Beiträge: 160 PHP-Kenntnisse: Fortgeschritten	Tja, so richtig genau kann ich dir das auch nicht sagen, aber vielleicht hilft dir das weiter: Float: Die Theorie __________________ http://mcsodbrenner.blogspot.com/ Serpent PHP Template Engine: http://code.google.com/p/serpent-php-template-engine/

10.06.2009, 21:42
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Code: #content { width:50%; margin-left:auto; margin-right:auto; border:1px solid red; height:100%; float:left; } sollte gehen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

11.06.2009, 05:41
Kein Genie Gast Beiträge: n/a	Ja geht auch. Jedoch ist es an die linke Box rangeklatscht. Was mit den einstellungen von McSodbrenner nicht der Fall ist.

11.06.2009, 09:24
McSodbrenner Erfahrener Benutzer Registriert seit: 28.11.2008 Beiträge: 160 PHP-Kenntnisse: Fortgeschritten	Wenn du den content nicht floatest, brauchst du auch keine Breite für die Mitte mitzugeben. Dann wird der Mittelbereich sauber ausgefüllt. Die Abstände zu den Boxen kannst du dann schön mit padding realisieren. __________________ http://mcsodbrenner.blogspot.com/ Serpent PHP Template Engine: http://code.google.com/p/serpent-php-template-engine/

11.06.2009, 13:00
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Das rangeklatschte ist eigentlich der Normalfall und bietet Dir die Möglichkeit, alles Rahmen genau einzustellen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --