Zur Navigation

<div> Probleme mit Positionierung

1 xtoph (Gast)

Hi,

Also ihr seit jetzt hier meine 3. Anlaufstelle *hoff*

Ich möchte ein Layout machen, wo ich oben einen Banner habe, unten einen Footer und in der Mitte den Content.

Der Banner soll immer ganz oben, der Footer immer ganz unten kleben, egal bei welcher Auflösung. Der Content passt sich dann automatisch an. Im <body> ist ein Hintergrundbild, was so aussieht, als wenn es die ganze Seite langgeht.

Im Mozilla und Opera siehts richtig aus, hab da keine Problem. Aber im IE zerhauts alles, und ich weiss nicht warum.

Hier mal der Link: http://zeus.fh-brandenburg.de/~franzc/neu2/

und hier das CSS-File
http://zeus.fh-brandenburg.de/~franzc/neu2/css/style.css

und der code:
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!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>
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div style="text-align:center">

<div style="margin:auto; text-align:left">
banner
</div>

<div style="margin:auto; width:810px;">
content
</div>

<div style="margin:auto;  width:810px;" >
  <div style="position:absolute; bottom:0px; width:810px; padding:0;">
footer
  </div>
</div>

</div>
</body>
</html>

Wäre echt super, wenn jemand einen Tip hätte :)

gruss
xtoph

26.01.2005 15:54

2 Jörg Kruse

Hallo xtoph,

ich denke, der IE hat hier Problerme mit der absoluten Positionierung des untergeordneten <div>s ohne Angabe von left

ich würde es für den Footer folgendermaßen probieren:

<div style="position:absolute; bottom:0px; left:0px; width:100%; text-align:center" >
  <div style="width:810px; padding:0; margin:auto">
footer
 </div>
</div>

D.h. das äußere <div> wird absolut positioniert, inklusive Angabe für left:0px, dafür width auf 100% ausgedehnt. Das innere <div> wird zentriert mit margin:auto sowie (für den IE 5) mit text-align:center im äußeren <div>

Probier mal aus, ob es so besser geht?

26.01.2005 16:44

3 xtoph (Gast)

mh, jetzt ist es schon zentriert, jedoch nicht ganz unten *wunder*

http://zeus.fh-brandenburg.de/~franzc/neu2/

aba schonmal riesen Dankeschön!

26.01.2005 20:58

4 Jörg Kruse

Bei meinem IE 6 und bei einer Auflösung von 1024*768 ist der Footer ganz unten - wenn ich aber das Fenster kleiner mache und anschließend nach unten scrolle, hängt er in der Luft :\

Wenn du die XML-Deklaration ganz am Anfang rausnimmst:

<?xml version=\"1.0\" encoding=\"UTF-8\"?>

Tritt das Problem im IE 6 dann immer noch auf?

Diese Zeile wird zwar empfohlen für XHTML-Dokumente, aber sie verhindert oft, dass der IE 6 standardkonform / korrekt rendert - deswegen habe ich sie in diesem Forum z.B. auch nicht drin. Valide ist der Code dennoch

26.01.2005 22:29 | geändert: 26.01.2005 22:34

5 xtoph (Gast)

THX THX THX!!!

das ist das erste mal, dass jemand einen ansatz findet!!! Super!

zumindest im bei 1024*768 siehts gut aus, ne höhere Auflösunghab ich hier leider nicht.

RIESEN THX!!!

27.01.2005 20:01

6 Jörg Kruse

Schön dass es geklappt hat :)

Ich habe hier auch nur 1024*768 - aber bei größeren Auflösungen sollte es eigentlich keine Probleme geben, jedenfalls nicht die, die vorher auftraten

27.01.2005 20:36

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]