Christian Zill: DIV: mittig && zentriert? #1:

Beitrag lesen

Hi,

Vielen Dank für Deinen Lösungsansatz, der recht gut angedacht wohl nicht nur mir erscheint. Leider war er, mir persönlich, schon ZU kompliziert, jedenfalls zum auf die Schnelle Nachvollziehen. Liegt allein an MEINER Geduld. Es soll nicht missverstanden werden als "Ich hab' Deinen Thread nicht gelesen, und geb Dir trotzdem mal ne Antwort.Ich pick' mir im folgenden mal einen Teil Deiner Problemstellung auf:

  1. Kann man die Ausrichtung der Bilder auf die Mitte, also "center" auslegen? Welche möglichkeiten gibt es?
  2. Ich möchte die Option anbieten die Seite in einem separaten Popupfenster aufzurufen, oder aber in demselben Fenster wie die index.html. Dies wg.Popup-Bblockern und Leuten, die JS teilweise/temporär deaktiviert haben.

Ad 1:
------------------------------------------------------------------------
 CSS
    .h552 { height:552px; min-height:552px; max-height:552px }
    .w850 { width :850px; min-width :850px; max-width :850px }

#zentriert {
      /*position:absolute;*/
      position:relative;
      top:50%;
      left:50%;
      width :850px; min-width :850px; max-width :850px;
      height:555px; min-height:555px; max-height:555px;
      margin-left:-425px;
      margin-top:-277px;
     }

und dann 'im' HTML:

<body>

<div id="zentriert" style="vertical-align:middle;" align="center" valign="middle">

<!-- AB JETZT IST ALLES ZENTRIERT: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

<div class="w850 h552">

Bilder, Fliesstext, andere DIVs, usw. usw ...

</div></div></body>

-----------------------------------------------------------------
Soweit der Kern der Sache, m.E. Trotzdem noch EVTL. nötig in CSS:

* { margin:0px; padding:0px;border:0px;
     background-color:transparent;
     overflow:hidden;
     vertical-align:top;
     text-align:left;
     }
 html   { height       : 100%  }
 body   { min-height   : 101%;
          font-size    : 100.01%;
          position     : relative;
          color        : #fff;
          background   : #000;
          text-align   : left;
          border       : 0px solid #000000;
          }

td,div,img {
    margin:0px; padding:0px; border:0px; overflow:hidden;
    vertical-align:top; text-align:left;
    }

Ad 2:
---------------
OK, mit Dank zu den Akten.

Wäre schön, wenn Du das mal testen könntest, was ich da fabriziert habe. Wenn's
geklapppt hat wäre Deine fertige Lösung hier interessant, m.E. Also bitte, sag' ich mal jetzt, so. Das Ganze als Gedankenanstoß, mit der Hoffnung, nichts mißverstanden, Dich nicht sinnentstellt zitiert, und all' DIE Teile aus meiner "index.html" gepAsted zu haben, die ein ähnliches Problem HIER gelöst haben.

Best regards
Christian