elli: absolut mittig zentrieren vertikal + horizontal

... mit einer Grafik
... innerhalb einer Tabelle
... krieg ich das problemlos hin
... z.B. so:

<html>
<head>

<style type="text/css">
body
{
background-color: #000000;
}
</style></head>

<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<div align="center">
<table width="100%" height="100%" border="0" align="center" valign="middle" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<div align="center">
<img src="image1.gif" alt="" width=700 height=500 border=1 align="absmiddle">
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

... wie krieg ich das dann mit einer
... Tabelle innerhalb der äusseren Tabelle hin?
... *dummguck*

... genauer:
... ich möchte neun Grafiken
... in drei Reihen platzieren
... und das genau mittig
... innerhalb einer Seite
... analog zu der Platzierung der Grafik oben
... also
... sowohl horizontal
... also auch vertikal
... das geht eigentlich nur
... mit einer weiteren Tabelle
... oder nicht?

... irgendwie komm ich da zu keiner Lösung
... wahrscheinlich weil ich schon zu lange
... daran rummuckele :(

... vielleicht könnt Ihr als die Spezialisten
... da einem WebLehrling weiterhelfen?
... wäre superb *knicks*

elli

  1. Hallo,

    zuerst: beschäftige Dich "ruhig" einmal mit CSS. Grob gesagt: alles was das "Aussehen" bestimmt, gehört in eine möglichst seperate CSS-Datei, die dann in das html-Dokument nachgeladen wird. Im html-Dokument steht dann nur noch der (meistens Text-) Inhalt, der dann mit "nur noch" reinen strukturierung-Tags ausgezeichnet wird. Also alles wie Deine Margings, Colors etc verschwinden damit aus "all Deinen html-Dokumenten" und kommen in eine(!) ausgelagerte Datei. Neben vielen Vorteilen könnte Dir vielleicht volgender als erstes ins Auge fallen: Du brauchst nur noch in einer(!) Datei etwas ändern, und zack ändert sich auf allen Seiten die, sagen wir mal, Schriftfarbe....

    Wie man das im Detail macht, kannst Du in selfhtml nachlesen. Der erste Schritt wird Dir sicherlich schwer fallen, aber wenn Du auch in Zukunft in dieser Branche arbeiten möchtest, kommst Du nicht darum.

    Ich würde Dein neun-Bilderproblem so lösen, bzw habe es so gelöst ;-)

    Man nehme eine html-Datei, in der die neun image-Tags liegen. Diese habe ich mit einem div-Paar umschlossen, weil ich mithilfe dieses Div-Paares alle neun imagetags "gruppieren" kann und diese Gruppe dann mitten werde.

    Also:

    <!doctype html public "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

    <link rel="stylesheet" type="text/css" href="normal.css">

    </head>

    <body>

    <div class="mittig">
    <img src="grafik.gif" width="140" height="140" alt=""><img src="grafik.gif" width="140" height="140" alt=""><img src="grafik.gif" width="140" height="140" alt=""><br>
    <img src="grafik.gif" width="140" height="140" alt=""><img src="grafik.gif" width="140" height="140" alt=""><img src="grafik.gif" width="140" height="140" alt=""><br>
    <img src="grafik.gif" width="140" height="140" alt=""><img src="grafik.gif" width="140" height="140" alt=""><img src="grafik.gif" width="140" height="140" alt=""><br>
    </div>

    </body>
    </html>

    _________

    Oben siehst Du, das ich eine CSS-Datei nachlade. Da steht dann drin:

    html {
          height:100%;
          }
         }
    .mittig {
      position:absolute;
      top:50%;
      left:50%;
      width:420px;
      height:420px;
      margin-left:-210px;
      margin-top:-210px;
      }

    ________

    Bei diesem .mittig steht drin, was ich mir vom ganzen Div-Block wünsche: er soll auf der Seite bei Position 50%/50% anfangen. Dazu muß ich dem Block noch eine Breite und Höhe mitgeben, hier also die Breite und Höhe aller 9 Bilder zusammen.

    Da würde der Block jetzt zwar in der Bildschirmmitte anfangen, aber dann eben "nach unten rechts" wegkleben. Deswegen rücke ich ihn mit den negativen marginangaben noch was nach oben links, und zwar um genau der Hälfte der Breite und Höhe der 9 Grafiken.

    _

    Wenn Du zwischen den Grafiken noch Abstand haben möchtest, must Du per CSS für die images auch noch marginwerte wählen, diese dann aber bei .mitte dazuadieren, denn der gesammte Div-Block aller neun Grafiken wird dann ja um den Abstand größer....

    Chräcker

    PS. war vielleicht nett vor Dir gedacht, Dein Posting so zu formatieren, aber es liest sich doch recht schwer.... schreib lieber normal ;-)

    --
    Erinnerungen?
    zu:]
    1. Hallo Chräcker Heller und Sirdan :)

      danke für Eure Hilfe - ich bin vor fünf Minuten durch schieres Rumprobieren auf die Lösung ähnlich von Chräcker Heller gekommen wie folgt:

      <html>
      <head>

      <style type="text/css">
      body
      {
      background-color: #000000;
      }
      </style></head>

      <body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
      <div align="center">
      <table width="100%" height="100%" border="0" align="center" valign="middle" cellpadding="0" cellspacing="0">
      <tr>
      <td align="center" valign="middle">
      <div align="center">
      <img src="image1.gif" alt="" width=100 height=100 border=1 align="absmiddle">
      <img src="image1.gif" alt="" width=100 height=100 border=1 align="absmiddle">
      <img src="image1.gif" alt="" width=100 height=100 border=1 align="absmiddle">
      <br>
      <img src="image1.gif" alt="" width=100 height=100 border=1 align="absmiddle">
      <img src="image1.gif" alt="" width=100 height=100 border=1 align="absmiddle">
      <img src="image1.gif" alt="" width=100 height=100 border=1 align="absmiddle">
      <br>
      <img src="image1.gif" alt="" width=100 height=100 border=1 align="absmiddle">
      <img src="image1.gif" alt="" width=100 height=100 border=1 align="absmiddle">
      <img src="image1.gif" alt="" width=100 height=100 border=1 align="absmiddle">
      </div>
      </td>
      </tr>
      </table>
      </div>
      </body>
      </html>

      Ich werde mir aber auf jeden Fall noch Chräcker Heller's Variante genauer anschauen - schließlich bin ich bloß ein WebLehrling und frau lernt nie aus :)

      Dass ich die Seite schlampig geschrieben habe liegt einfach daran, daß ich mich kurz fassen wollte. Das mit CSS ist mir schon klar :) Ich mach HPs noch nicht lange und ich hab hier bei SelfHtml schon unglaublich viel gelernt und was mich jetzt noch mehr beeindruckt ist das Forum *strahl*

      VIELEN DANK *knicks*

      elli

    2. Hi,

      Bei diesem .mittig steht drin, was ich mir vom ganzen Div-Block wünsche: er soll auf der Seite bei Position 50%/50% anfangen. Dazu muß ich dem Block noch eine Breite und Höhe mitgeben, hier also die Breite und Höhe aller 9 Bilder zusammen.

      Da würde der Block jetzt zwar in der Bildschirmmitte anfangen, aber dann eben "nach unten rechts" wegkleben. Deswegen rücke ich ihn mit den negativen marginangaben noch was nach oben links, und zwar um genau der Hälfte der Breite und Höhe der 9 Grafiken.

      Hast Du zufällig eine Ahnung, warum der Opera (7.54 WIN) diese gängige Zentrierung nicht mitmacht? Mein genauso gestricktes Beispiel zur horizontalen und vertikale Zentrierung (ganz unten) funktioniert in Geckos und im IE (sogar im 5.0), nur Opera mag's irgendwie nicht.

      Eine andere reine CSS-Lösung wüßte ich nämlich nicht.

      freundliche Grüße
      Ingo

      1. Hallo,

        Hast Du zufällig eine Ahnung, warum der Opera (7.54 WIN) diese
        gängige Zentrierung nicht mitmacht? Mein genauso gestricktes

        »  Beispiel

        ich bin mir, das jetzt nur am Rande, 100% sicher, das "meine Lösung" nicht von mir ist, ich weiß nur leider nicht mehr, wo ich sie her habe.... vielleicht sogar von Deiner Seite? ;-)

        Wie dem auch sei, "meine Version" funktioniert bei Opera 6 und Opera 7, grad noch mal getestet.....

        Chräcker

        --
        Erinnerungen?
        zu:]
        1. Hi,

          ich bin mir, das jetzt nur am Rande, 100% sicher, das "meine Lösung" nicht von mir ist, ich weiß nur leider nicht mehr, wo ich sie her habe.... vielleicht sogar von Deiner Seite? ;-)

          Diese Methode ist schon sehr lange auf etlichen Seiten im Netz vorgestellt - keine Ahnung, wer da zuerst drauf gekommen ist; ich war's jedenfalls nicht;-)

          Wie dem auch sei, "meine Version" funktioniert bei Opera 6 und Opera 7, grad noch mal getestet.....

          Tja, dann hast Du eine andere Version vom Opera. Meiner:
          Version 7.54
          Build 3870
          Plattform Win32
          Betriebssystem Windows XP
          stellt bei exakt von Dir kopierten Code die Bilder links oben dar.

          @Andreas: das wird's wohl sein. Nur übel, wenn dadurch eine vertikale Zentrierung im Opera bei unbekannter Höhe des Elternelements nur mittels Tabelle möglich ist. :-(

          freundliche Grüße
          Ingo

          1. Hallo,

            Tja, dann hast Du eine andere Version vom Opera. Meiner:
            Version 7.54
            Build 3870
            Plattform Win32
            Betriebssystem Windows XP

            stimmt, Opera 7.0, Build 2637....

            Chräcker

            1. Hi,

              stimmt, Opera 7.0, Build 2637....

              tja, scheint so, als wenn Opera mit seiner standardkonformeren Auslegung hier ein Eigentor geschossen hat, oder?

              freundliche Grüße
              Ingo

              1. Hi,

                stimmt, Opera 7.0, Build 2637....
                tja, scheint so, als wenn Opera mit seiner standardkonformeren Auslegung hier ein Eigentor geschossen hat, oder?

                Kann es sein, daß Dein Test-Code einfach fehlerhaft ist?

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html><head><title>Testseite</title>
                <style type="text/css">
                div {   position:absolute; left:50%; top:50%;
                        width:400px; height:200px; margin-left:-200px; margin-top:-100px;
                        background-color:red; }
                </style>
                </head><body><div></div></body></html>

                erzeugt in meinem Opera 7.54 (Build 3869) einen perfekt zentrierten roten Kasten.

                cu,
                Andreas

                --
                Warum nennt sich Andreas hier MudGuard?
                Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                1. Hi,

                  Kann es sein, daß Dein Test-Code einfach fehlerhaft ist?

                  jetzt wo Du es sagst, habe ich mal Chräckers Code näher angesehen und
                  html {
                        height:100%;
                        }
                       }
                  hier ^ diese überflüssige Klammer entdeckt. Entferne ich sie oder lösche diese Zuweisung komplett, funktioniert zumindest dieser Code schonmal.
                  Die Methode scheint also doch im aktuellen Opera doch noch zu funktionieren.

                  Jetzt habe ich mit meiner Beispielseite einmal ausgiebig experimentiert und dabei herausgefunden, daß Opera die allgemeine Definition:

                  #webtext h2 img { margin:0 7px 3px 0; float:left; }

                  nicht durch entsprechende Änderungen zu #Tafelgrafik (für das img gegeben) überschreibt.

                  Bis (falls überhaupt) mir eine Lösung einfällt, zumindest das float für diesen komplexen Selektor über Javascript zu überschreiben, habe ich es erstmal auf dieser Seite rausnehmen müssen. :-(
                  Vielleicht ändere ich aber auch einfach mein Beispiel um...

                  freundliche Grüße
                  Ingo

      2. Hi,

        Hast Du zufällig eine Ahnung, warum der Opera (7.54 WIN) diese gängige Zentrierung nicht mitmacht?

        Vielleicht hält er sich an folgenden Satz, zweiter Teil:
        Negative values for margin properties are allowed, but there may be implementation-specific limits.

        ;-)

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  2. Ich wuerde es mit window.innerHeight und windows.innerHeight versuchen.

    1. Hallo,

      Ich wuerde es mit window.innerHeight und windows.innerHeight
      versuchen.

      Mit Javascript? Wäre das nicht etwas überdimensioniert bzw falsch dimensioniert, nur um neun Bildchen zu mitten????

      Chräcker

      --
      Erinnerungen?
      zu:]