Anton: Layout zentrieren

Ich versuche das h1-Element mit dem blauen Hintergrund zu zentrieren. Das klappt auch im Firefox. Im IE7 aber nicht. Woran kann das liegen?

  
<html>  
  <head>  
    <style rel="stylesheet" type="text/css">  
      * {  
        margin: 0px;  
 padding: 0px;  
      }  
  
      body {  
        width: 950px;  
 margin: 20px auto;  
      }  
  
      h1 {  
        height: 135px;  
 background: blue;  
      }  
    </style>  
  </head>  
  <body>  
    <h1>Test</h1>  
  </body>  
</html>  

  1. Mit "<center></center>" oder "<div align="center"></div>" oder "h1 { height: 135px; background: blue; text-align:center; }"

    1. Mit "<center></center>" oder "<div align="center"></div>" oder "h1 { height: 135px; background: blue; text-align:center; }"

      Hab's so probiert und im IE7 getestet.

        
      h1 {  
        height: 135px;  
        background: blue;  
        text-align:center;  
      }  
      
      

      Klappt trotzdem nicht :-(

      1. Klappt trotzdem nicht :-(

        Sorry war dumm von mir.

        Mach doch so:

          
          <body>  
            <center>  
             <h1>Test</h1>  
            </center>  
          </body>  
        
        
        1. Sorry war dumm von mir.

          und jetzt legst du gleich noch eins drauf? :)

          Mach doch so:

          <body>
              <center>
               <h1>Test</h1>
              </center>
            </body>

          bitte nicht
          
          1. Sorry war dumm von mir.
            und jetzt legst du gleich noch eins drauf? :)

            ICH persönlich würde es per CSS ausrichten!

            Mach doch so:

            <body>
                <center>
                 <h1>Test</h1>
                </center>
              </body>

            
            > bitte nicht  
            
            Es geht mir hier nur um die Funktionaliät, und dies, funktioniert!  
            Kein schöner Programmierstil, aber egal.
            
            1. ICH persönlich würde es per CSS ausrichten!

              warum empfiehlst du dann nichts entsprechendes?

              Es geht mir hier nur um die Funktionaliät, und dies, funktioniert!

              nein, in diesem fall wird der text innhalb aller darinliegenden elemente zentriert inklusive dem element selbst - gewünscht ist aber dass das h1-element zentriert wird, der vom inhalt (text) des h1-elements war nie die rede

              Kein schöner Programmierstil, aber egal.

              natürlich nicht, html ist schließlich keine programmiersprache :)

          2. mmm,

            habt ihr keine Ahnung was ich tun kann, damit es im IE7 funktiniert?

            1. habt ihr keine Ahnung was ich tun kann, damit es im IE7 funktiniert?

              ich hab dir bereits 1x gesagt, dass du zum testen einfach mal alle möglichen elemente bunt einfärben sollst um zu sehen was passiert

              html { background: red; }  
              body { background: blue; }  
              h1 { background: green; }
              

              damit sollte klar sein, was passiert

              wenn du dein h1-element zentrieren willst, tu dieses - momentan zentrierst du dein body-element und das ist dem h1-element prinzipiell egal

              1. wenn du dein h1-element zentrieren willst, tu dieses - momentan zentrierst du dein body-element und das ist dem h1-element prinzipiell egal

                Ich hab mir das bisher so vorgestellt:

                Mein Body-Element enthält mehrere Bereiche. In diesem Beispiel allerdings nur das ein h1-element zum Testen. Nun sollen alle Bereiche die sich im Body-Element befinden zentriert werden. Also zentriere ich nur das Body-Element, dass ja alle Bereiche enthält. Da sich die Bereiche innerhalb des body-Elementes befinden werden diese also bei einer Zentrierung des body-elementes auch zentriert.

                Das ist doch das tyische Vorgehen beim Zentrieren eines Layouts. Es klappt ja auch beim Firefox. Bein IE7 ist es allerdings so, dass sich das Body-Element über die ganze Breite der Seite erstreckt.

                1. Hallo,

                  Das ist doch das tyische Vorgehen beim Zentrieren eines Layouts. Es klappt ja auch beim Firefox. Bein IE7 ist es allerdings so, dass sich das Body-Element über die ganze Breite der Seite erstreckt.

                  Dann solltest du deinem Dokument mal einen vernünftigen Doctype verpassen.

                  1. Dann solltest du deinem Dokument mal einen vernünftigen Doctype verpassen.

                    Ich bin vielleicht ein Vollidiot. Ich nutze normalerweise natürlich immer diesen Doctype:

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">

                    Hatte den in meinem kleinen Test allerdings rausgelassen, da ich mit möglichst wenig Code den Fehler finden wollte. Die Ursache war allerdings genau dieser fehlende Doctype. Jetzt klappt es auch im IE7.

                    Vielen Dank für den Tip. Da wär ich ja nie drauf gekommen. Ich dachte ein Doctype ist nur dafür da, zu validieren, ob die Webseite den Regeln folgt die in der entsprechenden DTD definiert sind.

                    Meine Vermutung warum es ohne Doctype nicht geklappt hat:

                    Der IE7 ist da er keinen Doctype gefunden hat in den Quirks-Modus gewechselt. Dort reagiert er anders und hat deshalb die Zentrierung nicht durchgeführt. Könnte ich mit dieser Vermutung richtig liegen?

                    1. Hallo,

                      Der IE7 ist da er keinen Doctype gefunden hat in den Quirks-Modus gewechselt. Dort reagiert er anders und hat deshalb die Zentrierung nicht durchgeführt. Könnte ich mit dieser Vermutung richtig liegen?

                      Ja, das machen auch die anderen Browser so. Such einfach mal, es gibt genug Tabellen im Internet, die aufzeigen, welcher Doctype welchen Modus aktiviert.

                      Die Standardkonformen Modi, wie ihn auch der von dir genannte Doctype auslösen ist dabei die beste Wahl, da der IE im Quirksmode nicht weiterentwickelt wird (neuere CSS Features also versagen, wie in deinem Fall).

                      Einen wirklich bedeutennden anderen grund hat der Doctype nicht.

                      Gruß

  2. Ich versuche das h1-Element mit dem blauen Hintergrund zu zentrieren. Das klappt auch im Firefox. Im IE7 aber nicht. Woran kann das liegen?

    an dem teilweise magischen verhalten des html-elements im internet explorer

    färbe html und body ein und schau was passiert

    wenn du das h1-element zentrieren willst, solltest du das auch tun - aktuell zentrierst du das body-element im html-element - das h1-element interessiert das nicht