• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit divs und css im IE

Status
Für weitere Antworten geschlossen.
A

Alti

Guest
Ich verscuhe grade eine Homepage zu machen-> 3 spaltig.
ich las von dieser Möglichkeit:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
#top  {width: 100%; background-color: #99FF00;}
#left  {width: 20%; background-color: #0000FF; float: left;}
#center  {width: 51%; float: left; margin-left: 4.5%; background-color: #FF0000;}
#right  {width: 20%; float: left; margin-left: 4.5%; background-color: #FFFF66;}
</style>
</head>
<body>
<div id="top">banner</div>
<div id="left">navi links</div><div id="center">inhalt</div><div id="right">navi rechts</div>
</body>
</html>

Ich möchte alle angaben in prozent haben, so das jeder browser die homepage sehen kann.
Nun testete ich die Homepage mit FF, es funktionierte, dann mit IE, IE lääst aus irgendeinem grund die 3.spalte in der zeile nicht zu.
Kennt jemand ne Lösung (außer Tabellen)?

MFG Alti
 
du hast widht: 100% für den Top ok, aber
du hast 20+20+51%=!100%

du musst ein gesamtmass von 100% erhalten
 
upps alti, sry übersehen,

aber der IE kann auch die 3spaltigen CSS-Blöcke noch nicht und das kann der Firefox aber daran kann und darf es nicht liegen...
kannst du bitte einen Link posten?
 
floate mal #right nach rechts und lass #center ohne floating
 
Bringt nichts, jetzt wird auch umgebrochen, nur das die navi rechts dann halt rechts in der zeile untendrunter steht
 
Hi Alti

du musst die Bereiche im Quelltext anders anordnen. Und zwar erst Left, dann Right und zum Schluss die Mitte. Außerdem bei der Rechten Div ein "float:right;" nehmen und bei der Mitte garkein float.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>TEST</title> 
<style type="text/css"> 
#top  {width: 100%; background-color: #99FF00;} 
#left  {width: 20%; background-color: #0000FF; float: left;} 
#right  {width: 20%; float: right; margin-left: 4.5%; background-color: #FFFF66;} 
#center  {width: 51%; margin-left: 4.5%; background-color: #FF0000;} 
</style> 
</head> 
<body> 
<div id="top">banner</div> 
<div id="left">navi links</div><div id="center">inhalt</div><div id="right">navi rechts</div> 
</body> 
</html>
Ansonten mal einen Blick auf CSS4You werfen. ;)
LINK: http://www.css4you.de/wslayout1/ex0010.html

Gruß
Hobbyuser
 
So funktioniert es immer noch nicht, gleiches Problem...
FF versteht es, IE natürlich nicht.
Solang keiner ne Lösung dafür findet, benutz ich meinen ersten geposteten quelltext, un überprüf aber per <!--[if IE]> ob die eprson ie benutzt, wenn ja hol ich en anderes css temp
 
Oh Alti

Sorry, mir ist ein Fehler unterlaufen. :oops:

Natürlich müssen die Divs im Quelltext auch eine andere Reihenfolge haben und zwar so:
Code: 
<div id="left">navi links</div><div id="right">navi rechts</div><div id="center">inhalt</div>

Probiere das mal aus, so sollte es funktionieren. ;)
 
das bringt mich zu einem ergebnis, das alle 3 in einer zeile sind, die prozentangaben jetzt aber nicht stimmen.
unter FF klebt das mittlere Div am linken und das rechte is ganz abseits, bei ie
das gleiche nur das das mittlere einen sehr kleinen abstand(<4.5%) zu der linken navi hat.
 
der abstand war der berühmte float-abstand Fehler des Internet Explorer. [ 3px glaube ich]

die floats scheinen jetzt aber zu stimmen, hast es selbst gelöst ?

edit: nein du hast die neue lösung noch nicht hochgeladen - warum nicht ?
 
ich habe auf meiner festplatte getestet... mit dem neuen lösungsansatz gibt es aber noch ein fehler, ich lad ma hoch
so, hochgeladen:
alti.cwsurf.de/new
immer noch nicht das gewünschte ergebnis
 
Code: 
#left  {width: 20%; background-color: #0000FF; float: left;}
#right  {width: 20%; background-color: #FFFF66; float: right;}
#center  {width: 51%; margin-left: 24.5%;margin-right: 4,5%; background-color: #FF0000;}

so gehts bei mir ; )
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben