Zur Navigation

Site Zentrierung in unterschiedlichen Browsern

1 Moni (Gast)

Hallo Zusammen,

nach langer Zeit wollte ich einer Freundin helfen und komme nicht weiter...

So schaut die Site jetzt aus:

http://www.house-of-blue-eyes.de/images/MONI-01-SEP-09/FERIENWOHNUNG-THEMEL/startseite.html

Jetzt habe ich das Problem, dass ich sie nicht zentrieren kann und
bei Opera und Firefox der Footer nicht richtig funktioniert.

Könntet Ihr mir vielleicht helfen?

Lg
Moni

03.09.2009 11:21

2 Jörg

Du kannst den Container div#container mit margin:auto zentrieren. Allerdings musst du dann bei der Positonierung der darin enthaltenen Seitenelemente wohl auf ein position:absolute oder position:fixed verzeichten, da diese sich dann an dem Anzeigebereich des Browsers ausrichten und somit aus dem zentrierten Container herausspringen. Alternativ kannst du diese Elemente mihilfe von float innerhalb des Containers positionieren.

und
bei Opera und Firefox der Footer nicht richtig funktioniert.

Was meinst du mit "richtig funktionieren"?

03.09.2009 18:28

3 Moni

Hallo Jörg,

danke für Deine Antwort. Dann muss ich also den Header, Menü und Footer floaten, ist das richtig?

Den Fehler mit dem Footer hatte ich noch gefunden, ist erledigt.

Schönen Abend
Moni

03.09.2009 20:25

4 Jörg

Header und Footer müssen nicht gefloatet werden, die nehmen ja bereits die volle Breite (von div#container) ein. Das Menü und den Inhalt kannst du aber mithilfe von float nebeneinander positionieren.

03.09.2009 21:05

5 Moni

Guten Morgen,

irgendwie komme ich nicht weiter (ist nur die eine Seite):

http://www.house-of-blue-eyes.de/images/MONI-01-SEP-09/FERIENWOHNUNG-THEMEL/TEST.html

Ich muss doch das Menü fixed positionieren, wenn ich dass es immer an gleicher Stelle ist...

Im IE ginge es aber in Opera und Firefox nicht - irgendwie habe ich gerade einen denkfehler...

04.09.2009 09:58

6 Jörg

Du verwendest auf der Seite keine Doctype-Angabe - das führt dazu, dass die Browser das HTML und CSS nicht standardkonform interpretieren und die Ergebnisse entsprechend unterschiedlich ausfallen.

04.09.2009 10:15

7 Moni

jetzt verwirrst mich total...

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en"

ist doch enthalten?

04.09.2009 11:25

8 Jörg

Ja, sorry, das Tool, mit dem ich mir den Quelltext angeschaut habe, zeigt keine Doctype-Angabe an.

Das "float: right" von #table besagt, dass nachfolgende Elemente links von #table angeordnet werden - #menu befindet sich im Quelltext aber vor #table. Opera und Firefox verhalten sich so gesehen korrekt.

Wenn du #menu mit position:fixed statt mit float:left positionieren möchtest, musst du dafür sorgen, dass der Platz dahinter leer ist. Das könntest du vielleicht dadurch erreichen, dass du #table einen entsprechenden margin-left oder padding-left gibst

04.09.2009 12:29

9 Moni

Ok,
Wenn du #menu mit position:fixed statt mit float:left positionieren möchtest, musst du dafür sorgen, dass der Platz dahinter leer ist. Das könntest du vielleicht dadurch erreichen, dass du #table einen entsprechenden margin-left oder padding-left gibst

das habe ich auch dann auch versucht, schau bitte noch mal, bei Firefox ist es ok, bei Opera na ja und dafür hat es den IE zerrissen...


04.09.2009 12:55

10 Jörg

In Opera, Firefox und auch Google Chrome sieht die Seite gleich aus. Der Inhalt ist nicht mehr zentriert, aber das liegt wohl am "margin-left:200px;" von body

Du kannst statt margin-left ja mal padding-left probieren, vielleicht kommt der IE damit besser klar.

04.09.2009 13:16