zentrieren einer css-basierten website im IE

[Markus M.]

Hallo,
ich habe folgendes problem:
ich bin gerade dabei eine Website zu basteln, die auf css basiert. Diese seite soll generell in der mitte ausgerichtet sein, was im firefox (neuste version) auch problemlos funktioniert...
wenn ich nun die gleiche seite in den IE lade, bleibt sie linksbündig ausgerichtet.

...
#seite { width:700;
         margin:auto;
         position:center;
         background-color:#FFFFFF;
         height:100% }
...
das ist der entsprechende ausschnitt aus der CSS-Datei der normalerweise die position festlegen sollte...

hier noch die screenshots:
http://www.european-houses.de/Sniper/Bilder/IE.jpg
http://www.european-houses.de/Sniper/Bilder/FF.jpg

und der link zu der seite (wenn einer den kompletten quellcode haben will ^^)
http://www.european-houses.de/Sniper/index.html

ich hoffe die informationen reichen aus, damit mir einer helfen kann :)

[Damian]

Hallo,

ich bin gerade dabei eine Website zu basteln, die auf css basiert. Diese seite soll generell in der mitte ausgerichtet sein, was im firefox (neuste version) auch problemlos funktioniert...
wenn ich nun die gleiche seite in den IE lade, bleibt sie linksbündig ausgerichtet.

Setze mal in deiner css-Datei body noch auf text-align:center, das sollte helfen...

und der link zu der seite (wenn einer den kompletten quellcode haben will ^^)
http://www.european-houses.de/Sniper/index.html

Weiterer Verbesserungsvorschlag: Das ist kein Link! Wie man einen Link einbindet, findest du in der SELFHTML-Forums-Hilfe...

Viele Grüße
Damian

[Markus M.]

Setze mal in deiner css-Datei body noch auf text-align:center, das sollte helfen...

Hab ich gemacht... nun ist zwar der hintergrund (<div id=seite>)
in der mitte, aber das, in den grenzen des div-tags befindliche, layout nicht mehr auf dem hintergrund, sondern diesmal am rechten rand ausgerichtet, allerdings passen manche sachen nicht merh aufeinander..
http://www.european-houses.de/Sniper/Bilder/IE1.jpg
http://www.european-houses.de/Sniper/index.html

[Snafu]

body {
    text-align:center;
}
div#seite { //das div element, das die ganze seite beinhaltet
            // bei dir eben das mit id=seite
    text-align:left;
}

Ich würde dir raten, die werte _sämtlicher_ Attribute unter Anführungszeichen zu setzen.

Hast du das schon probiert? Ich schon!

ps: Wenn der Betrag von width, height usw _UNGLEICH_ 0 (Null) ist, dann  musst du die Maßeinheit angeben, nicht umgekehrt!!!

[Markus M.]

body {
    text-align:center;
}
div#seite { //das div element, das die ganze seite beinhaltet
            // bei dir eben das mit id=seite
    text-align:left;
}

Ich würde dir raten, die werte _sämtlicher_ Attribute unter Anführungszeichen zu setzen.

Hast du das schon probiert? Ich schon!

ps: Wenn der Betrag von width, height usw _UNGLEICH_ 0 (Null) ist, dann  musst du die Maßeinheit angeben, nicht umgekehrt!!!

also.. ich habs ausprobiert.. aber das wird dann ehr schlechter als besser...

hier mal die komplette css-datei:
body { margin:0px;
       padding:0px;
       background-image:url(Bilder/background.jpg);
       text-align:center; }

#seite { width:700;
         margin:auto;
         position:center;
         background-color:#FFFFFF;
         height:100%
         }

#logo { margin:0px;
        width:257px;
        height:143px;
        position:absolute;
        z-index:50; }

#header { margin:0px;
          width:100%
          height:143;
          position:absolute;
          padding-left:257px; }

#navi { margin:0px;
        width:143px;
        height:100%;
        background-color:#506787;
        position:absolute; }

#navi2 { margin:0px;
         width:143px;
         height:260px;;
         position:absolute;
         padding-top:143px;
         background-image:url(Bilder/nav.jpg);
         background-position:143px 143px; }

#inhalt { margin:0px;
          padding-left:143px;
          padding-top:143px;
          background-color:#FFFFFF; }

und der div-bereich auf im eigentlichen dokument:

<div id="seite">
  <div id="logo">
   - logo -
  </div>
  <div id="header">
   - kopf -
  </div>
  <div id="navi">
   <div id="navi2">
    - links -
   </div>
  </div>
  <div id="inhalt">
   - text -
  </div>
 </div>

vielleicht steckt der fehler auch woanders drin ^^
das is unternaderem auch meine erste, rein mit css aufgebaute, seite..

[Sascha Knappe]

Hallo Markus,

#seite { width:700; // 700 was?
         margin:auto;
         position:center;
         background-color:#FFFFFF;
         height:100%
         }

#logo { margin:0px;
        width:257px;
        height:143px;
        position:absolute;
        z-index:50; }

#header { margin:0px;
          width:100%
          height:143; // 143 was?
          position:absolute;
          padding-left:257px; }

Schönen Gruß aus München

die knappschaft

[Markus M.]

Hallo Markus,

#seite { width:700; // 700 was?
         margin:auto;
         position:center;
         background-color:#FFFFFF;
         height:100%
         }

#logo { margin:0px;
        width:257px;
        height:143px;
        position:absolute;
        z-index:50; }

#header { margin:0px;
          width:100%
          height:143; // 143 was?
          position:absolute;
          padding-left:257px; }

Schönen Gruß aus München

die knappschaft

da müsste eigentlich 700px; stehn.. aber das prob besteht immernoch, das die seite, so wie sie da steht im IE net korrekt angezeigt wird.. entweder linksbündug oder irgendwas anderes ^^
da das meine erste css-based seite ist hab ich keine ahnung wie ich das in den griff kriege... lustigerweise hat der Firefox damit keine probleme...

[Snafu]

[code=css]
body {
    text-align:center;
}
div#seite { //das div element, das die ganze seite beinhaltet
            // bei dir eben das mit id=seite
    text-align:left;
}
[/code]

Ich würde dir raten, die werte _sämtlicher_ Attribute unter Anführungszeichen zu setzen.

[Zeromancer]

Hallo Markus,

#seite { width:700;
         margin:auto;
         position:center;
         background-color:#FFFFFF;
         height:100% }

schau doch mal in die Hilfe, bei den häufig gestellten Fachfragen

http://forum.de.selfhtml.org/hilfe/faq.htm#css-zentrieren

Mit freundlichen Grüßen,
André

[DeadDreamer]

Hallo

Vertikale Zentrierung ist immer nur mit einigem Rumgetrickse zu erreichen... du könntest dir ein aktuelles Projekt von mir anschauen, in dem ich eine Methode angewandt habe (die ich aber von irgendwo her habe ;), die den Inhalt der Seite Browserübergreifend zentriert darstellen sollte:

http://home.arcor.de/deaddreamer/swim/index.htm

Und die dazugehörige CSS-Datei:

http://home.arcor.de/deaddreamer/swim/swim.css

Schau dir das mal an, dann sollte das ohne Probleme gehen ;) Nun könnte ich ja erwähnen dass Seiten, die zentriert sind, und eine feste Höhe aufweisen, alles Andere als ideal sind, aber wenn das betreffende Projekt es zulässt, kann man es ja benutzen :p

Grüße

[Detlef G.]

Hallo DeadDreamer,

... (die ich aber von irgendwo her habe ;), ...

Vielleicht bei fricca?

... die den Inhalt der Seite Browserübergreifend zentriert darstellen sollte:

Zumindest im IE-Mac dürfte es bei deiner Seite so nicht funktionieren.
(friccas Posting dazu)

http://home.arcor.de/deaddreamer/swim/index.htm

Vergrößere mal die Schrift ein wenig (z.B. im Firefox).
Besser wäre wohl, die Schriftgröße sowie Höhe und Breite in em anzugeben,
womit sich alles der Schriftgröße anpassen könnte.
Oder du verwendest zumindest min-height statt height (und nur für IE height).
Damit würde dann bei Schriftvergrößerung zwar die Zentrierung flöten gehen,
der Text würde aber wenigstens in der Box bleiben.

Auf Wiederlesen
Detlef