amanojaku.org: zentrierung im opera 7

hi

kann es sein dass der opera 7 angaben wie height:99% oder auch height="99%" einfach ignoriert? bekomme s auf jeden fall nicht hin auf diese art und weise ein element variabel zu zentrieren.

kann mir da jemand helfen?

  1. Hi,

    kann es sein dass der opera 7 angaben wie height:99% oder auch height="99%" einfach ignoriert?

    Nein.

    bekomme s auf jeden fall nicht hin auf diese art und weise ein element variabel zu zentrieren.

    Bitte? Wäre eine Zentrierung variabel, wäre es keine Zentrierung mehr. Oder willst du erreichen, dass ein Element immer an der gleichen Stelle erscheint, unabhängig von der Fenstergröße? Wenn ja, hier ein Beispiel, das in relativ vielen (auch alten) Browsern funktioniert:

    http://skop.net/self/zentriertes_div.html

    LG Roland

    1. Genau das möchte ich aber ohne absolute Angabe hinbekommen.
      Siehe hier :  http://the-new-sunshine.net/strohhalm/zentrieren.html

      http://skop.net/self/zentriertes_div.html

      1. Hi,

        Genau das möchte ich aber ohne absolute Angabe hinbekommen.

        Horizontale Zentrierung:

        #test {
         margin-left:auto;
         margin-right:auto;
        }

        Siehe hier: http://the-new-sunshine.net/strohhalm/zentrieren.html

        Verpasse dem body noch eine Höhe, an der sich die Höhe der Tabelle orientieren kann. Wie sieht das Beispiel in Mozilla aus?

        LG Roland

        1. in moz sitzt mittig links :(

          margin:auto; hat leider nichts bewirkt.
          ebendsowenig die vergabe von height und width für das body tag (meines wissens nach eh nicht valid)

          1. Hi!

            in moz sitzt mittig links :(

            margin:auto; hat leider nichts bewirkt.
            ebendsowenig die vergabe von height und width für das body tag (meines wissens nach eh nicht valid)

            Nicht als Attribut. Damit ein Element 100% des Anzeigefensters eines Browsers einnimmt, müssen die Elternlemente ebenfalls 100% hoch sein. Und das wird nicht über das Attribut height gemacht, sonder via CSS:

            html, body {height:100%}

            Damit margin:auto wirkt, muss natürlich die Breite des Elternelements grösser sein als die des Elements selbst. Und margin:auto wirkt nicht vertikal zentrierend.

            Gruß Herbalizer

            --
            SELF-Code: (http://emmanuel.dammerer.at/selfcode.html)
            sh:( fo:) ch:? rl:( br:> n4:& ie:% mo:} va:} de:] zu:) fl:{ ss:) ls:& js:|
    2. Moin!

      http://skop.net/self/zentriertes_div.html

      Habe vor einiger Zeit dieses Modell mal eingesetzt, mit dem Ergebnis,
      dass in dem zentrierten DIV die Links nur in einer Hälfte funktionierten.
      Bis hin zu der Kuriosität, dass die linke Hälfte eines Links "tot" war,
      die rechte Hälfte aber normal funktionierte.

      Dabei lang der zentrierte DIV _sicher_ über dem anderen und es gab auch
      sonst keinerlei Hindernisse innerhalb des DIVs (soweit ich sagen könnte).
      Der Fehler war nur im Moz 1.x zu beobchten.

      Kennt jemand das Problem, d.h. ist es auf anderen Rechnern reproduzierbar?

      Gruß

      Der Hans

      1. Moin nochmal!

        Hab noch einmal eben ein bisserl Quellcode gebastelt um das Problem zu zeigen.
        Im Moment leider grad nur via Copy & Paste zu bewundern:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html>
        <head>
         <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
         <title>halbtoter Link</title>
         <style type="text/css">
         <!--
          body {
           width : 100%;
           height : 100%;
           font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
           margin: 0px;
           padding: 0px;
          }
          #centhelp {
           height: 10px;
           width: 10px;
           position: absolute;
           top: 50%;
           left: 50%;
          }

        #cent {
           height: 300px;
           width: 430px;
           background-color: silver;
           color: black;
           position: relative;
           top: -150px;
           left: -225px;
           text-align: justify;
           padding: 10px;
           border: 2px groove gray;
          }

        #cent a:link {
           color : blue;
           background-color : transparent;
           font : normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
           text-decoration : none;
          }

        #cent a:visited {
           color : blue;
           background-color : transparent;
           font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
           text-decoration : none;
          }

        #cent a:hover {
           color : red;
           background-color : transparent;
           font : normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
           text-decoration : none;
          }
         -->
         </style>
        </head>

        <body>

        <div id="centhelp">
          <div id="cent">
          <p><b>Hallo, Leute!</b></p>
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
          <p style="text-align:center;"><a href="#">Der Link</a>
          <br />
          <br />

        linke Hälfte des obigen Links tot - rechte Hälfte o.k.
          </p>
          </div>
         </div>

        </body>
        </html>

        Gruß

        Der Hans