|
Box per Css mittig auf der Seite zentrieren:
Die Anweisungen liegen in einem externen Stylesheet dafür
wird zwischen die Headtags der Aufruf für die "Style.css" notiert:
Beispeil:
<HEAD>
<TITLE>mittige Ausrichtung</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="http://www.mittig.css">
</HEAD>
Der Code für die Htmlseite wäre folgender, und wird
zwischen den Bodytags notiert
Beispiel:
<BODY>
<DIV ID="contentcenter">hier
steht der Seiteninhalt</DIV>
</BODY>
die dazu gehörige "Css Anweisung" sähe so aus und steht in einer externen Datei
hier: mittig.css
Ausgehend von einer Bildschirmauflösung von 1024 x 768 Pixel hier der Inhalt in
einer Box von 800 x 600 Pixel.
Damit hätte man beide Bildschirmauflösungen bedient. Je nach Gusto kann man die
Größe der Inhaltsbox verädern.
***
Der Startpunkt
der Box liegt genau in der Mitte, wenn ich die absolute Position jeweils mit
50% angebe. Durch margin left/top wird der Abstand zur Mitte jeweils um die
Hälfte der späteren Größe verschoben. Das Minus bewirkt eine Verschiebung nach
links und die Box oder das Div erscheinen relativ zur Bildschirmanzeige in der
Mitte.
/*Definition der gesamten Inhaltsumgebung */
#contentcenter {
width: 800px; /*Größe der Seite */
height: 600px;
position: absolute;
left: 50%;
position: absolute; top: 50%;
margin-left: -400px;
margin-top: -300px;
border: 1px solid #fff;
background-color: #333 }
Beispiel ansehen
zurück
|
