[OT] Elastisch (zoombar) zentrierte Seite mittels CSS war:[...] Slices fuer Webdesign

[gerhard <ggrubbish@web.de>]

Am Dienstag 16 August 2005 02:18 schrieb Andreas Pakulat:
> > Am Montag, den 15.08.2005, 23:56 +0200 schrieb gerhard:
> > > .deadcenter {
> > >  position: absolute;
> > >  left: 50%;
> > >  top: 50%;
> > >  margin-left: -50px;
> > >  margin-top: -50px;
> > > }
> >
> > Ja, ich erinnere mich. Ein sehr passendes Beispiel: Firefox hat
> > plötzlich einen Scrollbalken rechts, der gar nicht gebraucht wird.
> > Das geht natürlich nicht.
>
> Das liegt an den height: 100%, ein Hack damit der IE das korrekt
> zentriert. Nimm mal die Definition mit dem height raus und es sieht
> sowohl in FF als auch im Konqueror korrekt aus.

Hallo Andreas,

Ist das für den IE 5.0?
html, body {
 height: 100%;
}

Denn folgendes Stylesheet hat so etwas garnicht, löst aber das Problem 
mit den Scrollbalken, und der horizontalen wie vertikalen zentrierung 
vollständig für alle geläufigen Browser (~>=version 5). Außerdem ist es 
ein "elastisches Zoom-Design" [1].  :

<style type="text/css" media="screen">
  body {  
   overflow:auto;
  }
  #content {
   position:absolute;
   left:50%;
   top:50%;
   width:30em;
   height:32em;
   margin-left:-15em; 
   /* the height/2 */
   margin-top:-16em;
     }
</style>

Bei der Größe der Box sieht man auch schon die Nachteile bzw. Grenzen
von vertikal zentrierten Websites: Wird das Browserfenster Kleiner, so 
sieht man nur noch die Mitte und muß scrollen, um zum Anfang der Seite 
zu gelangen.

Ein komplettes Beispiel ist im Anhang der Mail.
Dort enthalten ist der box model Hack von Tantek [2], da der IE das box 
model nicht richtig rendert.

ciao

Gerhard

[1] http://www.stopdesign.com/log/2005/06/24/zoom-layout.html
[2] http://tantek.com/CSS/Examples/boxmodelhack.html

Title: vertical and horizontal centering

This box is horizontally and vertically centered.(Doesn't work in IE5/Mac) And it's "elastic" like the nice example here.

body {  
overflow:auto;
background-color:#fff;
}
#Content {
position:absolute;
left:50%;
top:50%;
width:30em;
height:42em;
/* the width/2 */
margin-left:-15em; 
/* the height/2 */
margin-top:-21em;
border:1px dashed #333;
background-color:#eee;
text-align:left;
font:1.1em verdana;
padding:1em;
}
body>#content {/* boxmodel-hack that avoids IE to 
		read the following definitions */
margin-left:-16em; /* Overwrites the wrong IE values. 
		Correct value for w3c compliant browsers */
margin-top:-22em; /* Overwrites the wrong IE values. 
		Correct value for w3c compliant browsers */
}