trans_kreise_li
kreise_rechts
logo
Wie wurde diese Seite horizontal und vertikal zentriert und wie kommt der Streifen in den Hintergrund?

Der CSS-Code dafür sieht so aus:

html { height:100%; }

body {
background-color: #FFF;
background-image: url(../hintergruende/hg_horiz_367x20px.png);    /*=Streifen*/
background-repeat:repeat-x;
background-position:50%;
}

Nun muss nur noch der Hauptcontainer der Seite wie folgt formatiert werden:

#Hauptcontainer{                      /*in diesem container befinden sich alle anderen container*/
position:absolute;
margin: -191px 0 0 -500px       /*= immer die hälfte der breite*/
top:50%;                                  /*hier muss immer 50% stehen*/
left:50% ;                                 /*hier muss immer 50% stehen*/
width:1000px;
height:600px;
z-index:1;
visibility: visible;
background-color: #FFFFFF;
}


Und hier ist der dazugehörige html-Code:

<body>

        <div id="Hauptcontainer">/div><!--hier liegen die anderen Container drin--></div>

</body>

Sie können den o. g. Code kopieren und den CSS-Code im Head, den html-Code im Body einfügen. Wenn Sie das eingefügte Bild (hier der Streifen) lieber vertikal statt horizontal wiederholt haben möchten, geben Sie "background-repeat: repeat-Y" ein. Die Prozentzahl bei background-position gibt immer die zweite Dimension an (bei x ist das die vertikale Lage, bei y ist das die horizontale Lage auf der Seite). Bei einem Bild, das Sie nicht wiederholt haben möchten, geben Sie "background-repeat:no-repeat" ein und legen die Position mit zwei Werten fest, z. B.: 50% 50%. Sie können natürlich auch statt der Prozentzahlen feste Werte eingeben.

Wirklich ganz einfach, man muss es nur wissen :-)

schatten_oben
schatten_unten