ie css problem mit absoluter positionierung

obi · 10.05.2007, 15:49

Hallo,
ich will ein 3 spalten layout mit css realisieren, dazu hab ich in einem container (900px breit) 3 weitere container.
die beiden spalten links und rechts sind jeweils gefloated und 215px breit, der mittlere Teil wird über position:absolute; und margin-left:215px; positioniert.
Im FF ist das Ergebnis gut, IE jedoch verdoppelt den Abstand, lasse ich die margin angabe weg, stimmts zwar im IE aber im FF nicht mehr.

Ich hab bei google schon mehrere Seiten gefunden, die ein ähnliches Problem behandeln , der Lösungsansatz display: inline jedoch bringt mich nicht weiter, das das Element selbst ja über position absolut positioniert wird.

Zergling-new · 10.05.2007, 15:58

Code & Online-Beispiel bitte

obi · 10.05.2007, 16:04

http://www.daily-picks.de/V20/

css:

Code:

/*-------------Container ---------------*/

#container {
	position:relative;
	padding:0;
	margin:40px auto;
	text-align:left;
	width:900px;
	}

/*-------- der Container besteht aus subcontainern */

#header {
	padding:0;
	margin:0;
	width:900px;
	overflow:hidden;
	position:relative;
	background-color:#00CCFF;
	}

#left_container {
	float:left;
	width:215px;
	background-color:#00FF66;
	}

#right_container {
	float:right;
	width:215px;
	background-color:#FF6600;
	}

#main_container {
	position:absolute;
	margin-left:215px;
	width:470px;
	background-color:#CC6666;
	}
	
.clearfix:after {
	content: ".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}

html:

Code:

<div id="container" class="clearfix"> 
	
        
	<div id="header">
	Das ist der header
        
	</div>

	
	<div id="main_container">
        INHALT
	
	</div>
	
	
	<div id="left_container">
	

Navigation Links</p>
	
        </div>

	
	<div id="right_container">
	 

Spalte rechts</p>
	
        </div>


</div>

Patrick · 10.05.2007, 16:14

Das kannst Du per "negativ-margin" lösen.
Hier ein Beispiel: http://blog.html.it/layoutgala/LayoutGala14.html
(CSS findest Du im Quelltext).

obi · 10.05.2007, 16:36

danke, aber ich fürchte ich versteh das nicht ganz - wo soll ich diesen neg. margin denn einbauen, finde das jetzt irgendwie unlogisch, verzeiht dann nicht wieder alles im FF?

Patrick · 10.05.2007, 16:54

in dem Beispiel das ich oben verlinkt habe wird ein DIV mehr verwendet als in Deinem (div#wrapper). Dieser wird dazu benutzt, den Inhalt (div#content) zu positionieren.

Am beste Du nimmst einfach mal die Codes aus dem Beispiel. Dann gibts Du einfach jedem DIV nacheinander einen farbigen Rahmen und spielst ein bisschen mit den Abständen. So siehst Du am einfachsten, wie sich die CSS auf die DIVs auswirken.

CSS

Code:

<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:left;width:100%}
div#content{margin: 0 200px}
div#navigation{float:left;width:200px;margin-left:-200px}
div#extra{float:left;width:200px;margin-left:-100%}
div#footer{clear:left;width:100%}
</style>

HTML

Code:

<div id="container">
  <div id="header">Header</div>
  <div id="wrapper">
    <div id="content">Content</div>
  </div>
  <div id="navigation">Navigation</div>
  <div id="extra">Extra stuff</div>
  <div id="footer">Footer</div>
</div>

Eine "Schritt für Schritt" Anleitung findest Du auch bei A LIST apart

nikosch · 10.05.2007, 17:30

Auch wenn hier schon einiges gesagt wurde ein kurzer Hinweis. Du solltest Dich auf ein Prinzip beschränken:
1. die divs per position anzuordnen oder
2. die divs per float zu positionieren

Hier findest Du für beide Prinzipien eine gute Anleitung:
http://www.thestyleworks.de/tut-art/layout_div.shtml
http://www.thestyleworks.de/tut-art/layout_div_2.shtml

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
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Sessions Problem	StephenKing	PHP Tipps 2008	3	16.10.2007 08: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
Array Problem [Ansatz ?]		PHP Tipps 2005	0	27.01.2005 18:24
[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
[Erledigt] PHP Upload (Master Value/Local Value Problem)		PHP-Fortgeschrittene	5	23.11.2004 07:21
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34
[Erledigt] Problem mit Timestamp!		PHP Tipps 2004	24	08.06.2004 19:51
Login Problem		PHP Tipps 2004	4	04.06.2004 18:46
foreach problem	mAy^daY	PHP Tipps 2004	3	02.06.2004 20:29

10.05.2007, 15:49
obi Erfahrener Benutzer Registriert seit: 26.06.2004 Beiträge: 270	ie css problem mit absoluter positionierung Hallo, ich will ein 3 spalten layout mit css realisieren, dazu hab ich in einem container (900px breit) 3 weitere container. die beiden spalten links und rechts sind jeweils gefloated und 215px breit, der mittlere Teil wird über position:absolute; und margin-left:215px; positioniert. Im FF ist das Ergebnis gut, IE jedoch verdoppelt den Abstand, lasse ich die margin angabe weg, stimmts zwar im IE aber im FF nicht mehr. Ich hab bei google schon mehrere Seiten gefunden, die ein ähnliches Problem behandeln , der Lösungsansatz display: inline jedoch bringt mich nicht weiter, das das Element selbst ja über position absolut positioniert wird.


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

10.05.2007, 15:58
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Code & Online-Beispiel bitte

10.05.2007, 16:14
Patrick Neuer Benutzer Registriert seit: 15.08.2005 Beiträge: 20	Das kannst Du per "negativ-margin" lösen. Hier ein Beispiel: http://blog.html.it/layoutgala/LayoutGala14.html (CSS findest Du im Quelltext).

10.05.2007, 16:36
obi Erfahrener Benutzer Registriert seit: 26.06.2004 Beiträge: 270	danke, aber ich fürchte ich versteh das nicht ganz - wo soll ich diesen neg. margin denn einbauen, finde das jetzt irgendwie unlogisch, verzeiht dann nicht wieder alles im FF?

10.05.2007, 17:30
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Auch wenn hier schon einiges gesagt wurde ein kurzer Hinweis. Du solltest Dich auf ein Prinzip beschränken: 1. die divs per position anzuordnen oder 2. die divs per float zu positionieren Hier findest Du für beide Prinzipien eine gute Anleitung: http://www.thestyleworks.de/tut-art/layout_div.shtml http://www.thestyleworks.de/tut-art/layout_div_2.shtml