Neuling: Horizontale Zentrierung im IE bei Body mit fester Breite/Höhe

Hallo!

Mein Quellcode soll nur html/CSS sein und irgendwann grundsätzlich mal in FF,IE6+IE7 laufen.

Der Body soll eine feste Breite von 760px und eine feste Höhe von ca. 600px haben. Der Body soll auf alle Fälle horizontal und wenn möglich ebenfalls vertikal zentriert sein. Die vertikale Zentrierung ist aber sekundär.

Für die Zentrierung möchte ich keine negativen Margins verwenden, da es wohl passieren kann, daß die Scollbalken bei verkleinertem Viewport nicht mehr sichtbar sind.

Sehr wichtig ist mir eine feststehende Kopfzeile. Navigation links und Body sollten einzeln scrollbar sein.

Meine Bi9ldschirmauflösung ist 1280x1024. Wenn ich den Viewport verkleinere, so soll die Zentrierung beibehalten werden.

Getestet habe ich den unten angehängten Quellcode im FF. Da soweit ganz gut. Aber im IE6 wird die max Breite von 760px nicht berücksichtigt und das komplette Fenster ausgefüllt.

Ich probiere seit Tagen mit text-align, diversen Breitenangaben, Hacks (die ich aber eventuell falsch eingesetzt habe) und Doctype, bisher ohne brauchbares Ergebnis. Für IE7 habe ich noch gar nicht getestet, mal sehen was da noch auf mich zukommt....

Für jede Eurer Hilfe bin ich sehr, sehr dankbar!  Anbei der Code:

<!-- IE quirks mode --> <!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="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Des ischn Tescht </title> <style type="text/css">

html {       /== html muß drin sein, weil sonst bei IE Scrollbalken ohne Balken am Rand entsteht===/    height:100%;      /* Bei weniger als 100 wird der viewport unten abgeschnitten   /    max-height:100%;      / Bei weniger als 100 wird der viewport ebenfalls unten abgeschnitten   */    padding:0;    margin:0;    border:0;    background: yellow;    font-size:100%;    font-family:Verdana, palatino linotype, times new roman, serif;    text-align:center;    overflow: hidden;

}

body    {

max-height:600px;    max-width: 760px;    width:760px;    margin: 0px auto;    top:1%;    bottom: 1%;    left:1%;    right:1%;    overflow:hidden;    padding:0px;     /* Abstand vom Bildschirmrand des Browsers, Scrollbalken rechts verschiebt sich   */

border:0;    background: blue;    position:absolute;

}

#content   {       /* Für alle Browser /    overflow:auto;    position:absolute;     z-index:3;    top:160px;        / Abstand vom oberen Bildschirmrand des Browsers, Scrollbalken rechts verschiebt sich   /    bottom:20px;     / Abstand vom unteren Bildschirmrand des Browsers, Scrollbalken rechts verschiebt sich  */   left:155px;     padding:20px;    right:0;     background:transparent;    }

  • html #content {       /* Nur für IE */    top:0;    left:0;     right:0;     bottom:0;    padding:15px;     height:100%;    max-height:100%;     width:100%;    overflow:auto;    text-align:center     position:fixed;     z-index:3;     border-top:160px solid transparent;     border-bottom:20px solid #fff;     border-left:155px solid #fff;    }

#kopf   {       /* Für alle Browser /    position:absolute;     margin:0;     top:0px;     left:0px;    right:0px;     display:block;     width:100%;      / Breite, bei Wert unter 100% wird rechts abgeschnitten*/    height:160px;     background:url(kopf.jpg) red;     background-position:0 0;     background-repeat:no-repeat;     font-size:4em;     z-index:5;     overflow:hidden;     color: white;     /* Farbe des Textes */    }

#foot   {       /* Für alle Browser */    position:absolute;     margin:0;     bottom:0;     left:0;     display:block;     width:100%;     height:20px;     font-size:1em;     z-index:5;     overflow:hidden;     background: magenta;     color:#fff;    }

#left   {       /* Für alle Browser /    position:absolute;     left:0px;      / Rückt den Container nach rechts zieht nicht ab von width /     top:160px;     bottom:20px;     width:155px;     / Breite des Containers vom linken Rand aus gezählt */    padding:5px;    background-color: green;     font-size:1.2em;     z-index:4;    overflow:auto;     }

  • html #left  {       /* Nur für IE */    height:100%;     padding:5px;    top:0;     bottom:0;    font-size:1.2em;     border-top:160px solid #fff;    border-bottom:20px solid #fff;     color:#fff;

}

#content    {    padding: 30px;    }

a:link, a:visited, a:active, a:hover  /===========Links, im Content erhalten Grunddefinition==/   {     text-decoration:underline;     font-weight:normal;     color:#ff0000;     font-size:14px;   }

a:active, a:hover      /===========Links, die im Content stehen wechseln die Farbe beim Berühren ===========/   {     color:yellow;   }

a.menu        /=========== Anordnung der Links in der Navigationsleiste  ===========/   {    display:block;    text-align:left;   background: white;

}

a.menu:link, a.menu:visited    /======Formatierung der Links in der Navigationsleiste =====/   {    color:black;    text-decoration:none;    font-weight:bold;   letter-spacing: -1px;   }

a.menu:active, a.menu:hover    /======Links in der Navigationsleiste, Reaktion beim Berühren ====/   {     color:red;

}

</style> </head>

<body> <div id="kopf">Kopfzeile</div>

<div id="foot">Fusszeile</div>

<div id="left">

<br>   <img src="punkt.gif" style="float: left;"/> <a class="menu" href="start.html" >Startseite</a>

<br>   <br>

<img src="punkt.gif" style="float: left;"/> <a class="menu" href="link1.html">Link1</a>   <br>   <br>

<img src="punkt.gif" style="float: left;"/> <a class="menu" href="Anker.html#abschnitt">Anker1</a>   <br><br>

<img src="punkt.gif" style="float: left;"/> <a class="menu" href="link2.html" >Link2</a>   <br><br>

<img src="punkt.gif" style="float: left;"/> <a class="menu" href="link3.htmt" >Link3</a>   <br><br>

<img src="punkt.gif" style="float: left;"/> <a class="menu" href="link4.html" >Link4</a>   <br><br>

<img src="punkt.gif" style="float: left;"/> <a class="menu" href="link5.html" >Link5</a>   <br>   <br>   <img src="page/punkt.gif" style="float: left;"/> <a class="menu" href="link6.html" >Link6&nbsp; & Link6a</a>   <br>   <br>   <img src="page/punkt.gif" style="float: left;"; /> <a class="menu" href="link7.html" title="Link7">Link7</a>

<p style="clear:left;" ></p>

</div>

<div id="content">

<h1>text</h1>

<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit   lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure   dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore   eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim   qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla   facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> <p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh   euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim   ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl   ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit   in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla   facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent   luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>

<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit   lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure   dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore   eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim   qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla   facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh   euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim   ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl   ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit   in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla   facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent   luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit   lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure   dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore   eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim   qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla   facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh   euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim   ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl   ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit   in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla   facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent   luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit   lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure   dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore   eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim   qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla   facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>

</div>

</body> </html>

  1. Moin

    Aber im IE6 wird die max Breite von 760px nicht berücksichtigt und das komplette Fenster ausgefüllt.

    Vollkommen klar. IE6 kennt die Eigenschaft min-width noch nicht. Dies wurde erst ab Version 7 eingeführt. Du musst eine eigene CSS (mittels Conditional Comments o.ä.) mit der Eigenschaft width: statt min-width: für die entsprechenden Elemente einfügen. Der IE verhält sich mit der Eigenschaft width, genauso wie andere Browser mit der Eigenschaft min-width!

    Gruß Bobby

    --
    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
    -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
    ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    1. Moin

      Aber im IE6 wird die max Breite von 760px nicht berücksichtigt und das komplette Fenster ausgefüllt.

      Der IE verhält sich mit der Eigenschaft width, genauso wie andere Browser mit der Eigenschaft min-width!

      nein, das trifft nur "fast" auf height zu - min-width und width verhalten sich unterschiedlich - das merkt man spätestens, wenn man folgendes konstrukt für ein flüssiges layout verwenden möchte

      width: 100%;
      min-width: 500px;

      für die simulation von min-width gibts für den internet explorer expressions

      eine suche in der suchmaschine deiner wahl nach "min-width internet explorer" oder ähnliches gibt schnell auskunft darüber

      1. Moin

        nein, das trifft nur "fast" auf height zu - min-width und width verhalten sich unterschiedlich - das merkt man spätestens, wenn man folgendes konstrukt für ein flüssiges layout verwenden möchte

        Oh sorry... nun hab ich height mit width verwechselt... du hast natürlich recht.

        trotzdem liegt sein Darstellungsproblem am min-width!

        Gruß Bobby

        --
        -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
        -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
        ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
        1. trotzdem liegt sein Darstellungsproblem am min-width!

          das hab ich auch nicht bezweifelt ;)