Template Zentrieren

[koshiro]

Hallo,
kann mir einer bitte sagen was hier dran falsch ist.

Code: PHP  [Auswählen]

<table class="headernavi_topbg" width="1000px" border="0" cellspacing="0" cellpadding="0" align="center">
 

Ich möchte eine Template auf eine feste breite mittig zentrieren, im IE macht er mir das.
Im Firefox centriert er mir aber nichts. Habe ich bei dem Code ein fehler ?
Ich hatte mir das so auf selfhtml rausgesucht. Und teste gerade so ein bissel auf meinem localen shop.
Gruß
Micha



Linkback: https://www.modified-shop.org/forum/index.php?topic=1723.0

[AlexInAustria]

Hi,
mach's mit

Code: PHP  [Auswählen]

style="left:50%; margin-left:-500px;"

so funzt es dann...

Am Besten Du addest es in dem CSS File.

lg, Alex

[koshiro]

Hallo Alex,
einfach deinen befehl in die css mit einfügen oder an einer bestimmten stelle zu ordnen.
Bis jetzt habe ich alles über die index.html vom Template gemacht.
Gruß
Micha

[AlexInAustria]

Das ist zwar unsauber, aber nachdem offenbar eh alle Formatierungen in deiner index.html liegen, nimm einfach meinen Code-Schnipsel und füge ihn testweise innerhalb des tags ein. Also vor dem>...

Mal schaun, was passiert  

Falls es nicht klappt, ein div-tag rund um die Tabelle legen also vor dem <hinschreiben: <div style="width:1000px; left:50%; margin-left:-500px;"> und nach dem die Tabelle mit </table> geschlossen wurde mit </div> schließen.

[koshiro]

In moment habe ich es mit dem code am anfang der Tabelle drin

Code: PHP  [Auswählen]

<div align="center">
 

Hat aber den nachteil das im IE auch gleichzeitig die Schrift im Content auch zentriert ist.
Im Firefox aber nicht so wie es ja richtig ist.

[AlexInAustria]

Dann nimm stattdessen

Code: PHP  [Auswählen]

<div style="width:1000px; left:50%; margin-left:-500px;">

Dann sollte das nicht der Fall sein.

[koshiro]

Hallo Alex,
danke erstmal für deine tipps, aber jetzt stimmt zwar im IE alles, aber im Firefox ist nichts Zentriert da ist alles nach links gerutscht.
Gruß
Micha

[AlexInAustria]

Dann füge noch ein

Code: PHP  [Auswählen]

position:absolute;

innerhalb der Anführungszeichen des style-Attributs.
Kann aber natürlich auch sein, dass sich verschiedenste Eigenschaften deines Templates aufheben bzw. beeinflussen, normalerweise hätte das funktionieren sollen...

[koshiro]

Hallo alex,
nein geht so auch nicht. Na ich werde noch ein bissel weiter testen.
Trotzdem erstmal danke.
Gruß
Micha

[guensi]

Da bist du über das alte Problem von IE gestolpert. Der interpretiert das Attribut align="center" obwohl er das eigentlich gar nicht tun sollte. Demnach macht es der FF richtig, er ignoriert diese Anweisung.

Um eine ganze Shop-Seite auf allen Browsern zu zentrieren solltest du folgendes tun:

in der index.html folgendes ergänzen:

Code: XML  [Auswählen]

<div id="container_ie">
<div id="container">
 

Dann gehts weiter wie gewohnt mit

Code: XML  [Auswählen]

<div id="wrap">
 

... bis ganz nach unten...

Code: XML  [Auswählen]

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

Dann legst du in deiner stylesheet.css folgendes an, passenderweise unter dem Punkt:
(aber von der Funktion her ist egal wo)

Code: CSS  [Auswählen]

/* WHOLE SITE WRAPPER */

#container_ie {
        text-align: center;
        width:100%;
        height:auto;
        margin: 0px;
        padding: 0px; }

#container {
        margin: 0 auto;
        width:1004px;
        /* weitere Angaben nach Belieben und Erforderlichkeit */
}
 

Warum das Ganze?
Die alten IE interpretieren das align="center" oder auch das im CSS verwendete text-align für alle Seiteninhalte. Damit die das alle richtig machen, kriegen die zunächst einen eigenen Container, der die ganze Seite umfasst nämlich: <div id="container_ie">
Dieser wird dann mit der eigentlich fehlerhaften CSS-Anweisung zentriert. Diese Anweisung wird von normal arbeitenden Browsern ignoriert werden.
Damit die dann die Seite richtig zentrieren, gibts den eigenen "container"

Die festen Leerzeichen   dienen dazu einen Fehler in einigen Browsern auszumerzen, der dadurch entsteht, dass ein Container der keinen Inhalt hat (andere Container werden da als Inhalt ignoriert) nicht dargestellt wird. Alternativ kann hier auch ein gif mit einem transparenten Pixel eingesetzt werden, zur Platzersparnis.

Sollte der IE8 inzwischen gelernt haben dass text-align nur auf Text bezogen sein sollte, kannst du mit einer Definition von text-align im "container" die Angabe im "container_ie" wieder überschreiben.

[koshiro]

Hallo Guensi,
das wäre bestimmt schon mal ein guter ansatz, aber funktioniert das ganze auch wenn man ein Template nutzt was auf Tabellen aufgebaut ist ?
Ich habe auch grad schon überlegt ob man das Template nicht umbauen kann von Tabellen auf div, ich hatte eben mal verglichen zu dem xtc5 da ist mir das aufgefallen.
Ich denke dafür muss ich noch ne menge lernen um das um zu bauen, aber habe ja zeit ist ja nur auf meinem Localen Testshop, soll mal später für meine 2 Domain genutzt werden.
Gruß
Micha

[guensi]

Die Container umfassen die ganze Seite, damit ist der Inhalt egal, also auch Tabellen sollten akzeptiert werden. "Tabellenfreies" Layout ist meiner Meinung nach die bessere aber auch arbeitsintensivere Variante beim Aufbau. Tabellen sollten da eingesetzt werden wo sie wirklich Sinn machen. Für das was du aktuell willst reichen die "alles umfassenden Container".

[koshiro]

Hallo Guensi,
na dann danke ich Dir schon mal.
Werde mich dann mal morgen ran machen und das alles versuchen um zu bauen, und werde auch mal sehen ob ich das nicht hin bekomme um zu bauen auf ein Tabellen freies Template.
Gruß
Micha

[guensi]

Viel Spass, das tabellenfreie Layout wird ein deutlich schwierigeres Problem als die Zentrierung der Seite. Einfach mal intensiv auf allen Browsern testen während du das machst.
Wünsche dir jetzt schon gute Nerven und viel Glück.

[koshiro]

Hallo Guensi,
danke. Wird aber denke ich auch ein bissel Spaß machen, und lehrreich sein.
Gruß
Micha