✔ Kriege mein Design einfach nicht zentriert,

[SaschaW]

Huhu ich hab ein Problem mit der Ausrichtung meiner Seite ich gestehe bin auch noch Frischling im Thema css aber hier mal mein Problem: http://www.blackflava.de/index2.php

Ich hab da auch mal den Rahmen rum gestzt wo es halt alles reinsoll. Bisher stimmt nur die ganz linke Seite der rest nicht.

Bevor ich mich da jetzt ganz durcheinander bringe hab ich das jetzt so mal gelassen... Es soll sich halt dynamisch der Seite anpassen. Wobei halt die feste Größe vom Haupteil 800x600 sein soll.

Ich hoffe Ihr versteht was ich meine.

Danke im Vorraus.

CSS:

#centeredDiv {

border:10pt solid #ff9900;
width:800px;
height:600px;
margin:auto;

}

#left {

background-image:url(img/left.gif);
width:113px; height: 600px;

}

#header {

background-image:url(img/header.gif);
position:absolute;
left:113px;
top:0px;
width:568px;
height:140px;

}

#lftm {

background-image:url(img/left_menue.gif);
position:absolute;
left:113px;
top:140px;
width: 37px;
height: 30px;

}

#bt_home {

background-image:url(img/home.gif);
position:absolute;
left:150px;
top:140px;
width:54px;
height:30px;

}

index2.php

<div id="centeredDiv">
        <div id="left"></div>
        <div id="header"></div>
       <div id="lftm"></div>
        <div id="bt_home"></div>
        <div id="bt_me"></div>
        <div id="bt_freunde"></div>
        <div id="bt_hobbies"></div>
        <div id="bt_gallery"></div>
        <div id="bt_charts"></div>
        <div id="bt_gb"></div>
        <div id="bt_kontakt"></div>
        <div id="right_menue"></div>
        <div id="content"></div>
        <div id="right"></div>
        

</div>

 

[kuddeldaddeldu]

Hi,

das liegt an der Positionierung der inneren Elemente.

Aus selfhtml:

absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.

Nachtrag: was in Deinem Fall halt der Body wäre

LG

 

[Maik]

Hi,

damit sich die Positionsangaben der inneren DIVs auf die Grenzen des DIVs #centeredDiv beziehen, muss dieses ebenfalls positioniert werden.

Mit den hinzugefügten Regelerweiterungen wird das Element wie gewünscht im Viewport horizontal und vertikal zentriert:

#centeredDiv {
border:10pt solid #ff9900;
width:800px;
height:600px;
position:absolute;
left:50%;
top:50%;
margin-left:-400px;
margin-top:-300px;
}

 

[SaschaW]

Vielen Danke für eure Hilfe.

Aber nun versteh ich die Zahlen bei margin-left und top nicht? wieso -400px?

Danke nochmal =)

 

[Maik]

In dem Stylesheet beträgt der margin-left-Wert die negative Hälfte der Elementbreite, und der margin-top-Wert die negative Hälfte der Elementhöhe.

Und warum das Ganze?

Mit left:50% sitzt der linke Elementrand in der Fenstermitte, das Element somit außermittig nach rechts verschoben, und wird um seine halbe Elementbreite nach links verrückt, damit es im Fenster horizontal zentriert ist.

Die gleiche Prozedur gilt für die vertikale Ausrichtung, also top:50% und margin-top:-300px.

 

[SaschaW]

Ah ich verstehe vielen Dank tolle Hilfe =)