Allmystery zentrieren?

@dns

Sorry, hab die betreffenden Klassen mit padding nur für meine Auflösung passend verschoben.
Das beudetet, dass es bei jedem Nutzer mit ner anderen Auflösung nicht mehr zentriert sein wird.

Nebenbei ist es aber auch ungünstig, dass Allmystery komplett in absoluten Zahlen mit px arbeitet.

@Dr.Shrimp

ah ok, dachte du konntest irgendwie den kompletten body verschieben, sodass die absoluten px zahlen noch funzen, da muesste eigentlich was gehen.

@dns

Warum gibt es eigentlich kein float-center? xD

Denn das nach rechts verschieben geht wunderbar.

@Dr.Shrimp

das geht mit margin: auto soweit ich weiss

@dns

Ja genau das hab ich auch im Netz bei CSS-Tutorials gefunden.
Das hab ich also gleich als Erstes probiert.

Aber wenn ich den Margin für den body rechts und links auf auto setze, dann regt sich nichts.
Der body klebt trotzdem links.

jo aber den main auf margin: auto funzt bspw. aber ich bin auch nicht so der css pro.

Man kann durchaus mit absoluten px Werten arbeiten. Einfach mit JavaScript die Bildchirmauflösung abfragen und entsprechend die CSS Werte setzen, sofern JS deaktiviert ist oder es eine unbekannte Auflösung ist einfach standardmäßig links lassen.

@Lightstorm

Dann kann es aber sein dass die Seite bei jedem Aufruf kurz zuckt.

@dns

Hm. Vielleicht kann man die CSS Werte setzen bevor body geladen oder angezeigt wird?

@Lightstorm

gehen würde da sicher was, aber so optimal ist das nicht :D.

am besten wäre einfach ne handvoll CSS, den ich in den header packe.

Ja bisschen gefrickelt :D

Also ich zentriere immer indem ich body eine feste Breite in px angebe und margin-left und margin-right auf auto setze.
Das funktioniert zumindest bei allen neuen Browsern zuverlässig soweit ich testen konnte.

@dns
@Lightstorm

Lightstorm schrieb:Also ich zentriere immer indem ich body eine feste Breite in px angebe und margin-left und margin-right auf auto setze.

Genau und das klappt bei Allmystery leider nur eingeschränkt.

Bei der .main klappt es.

Aber die Infoleiste und Navigation lassen sich so nicht zentrieren, weil sie ihre Position schon zugewiesen bekommen haben, bevor der margin autogeneriert wird.

Wenn man zwei Hintergründe in einem Quellcode definiert, wird auch nur der erste Hintergrund angezeigt. oO

@dns

Ich hab gerade mal was probiert.
Nimm das mal als Ansatz. Das ging bei mir.


HTML-Dokument:

...




Stylesheet:

.everything{
width:900px;
margin: auto;
}

Ich hab praktisch mal ne Seite bei mir abgespeichert, um auch den HTML-Code ändern zu können.

Die Idee ist eine Extra Div zu erschaffen, die so breit ist wie der Header und dann zentriert wird. Danach werden alle Komponenten zueinander proportional erstellt.

Nur die Infoleiste macht noch Probleme wegen dem position:absolute.

Original anzeigen (0,2 MB)Unter der oben eingeführten Klasse .everything kann ich mit folgender Modifikation des Stylesheets:

.everything{
width:900px;
margin: auto;
}

.infoleiste {
position: absolute;
top: 137px;
width:150px;
margin: auto;
}

.main {
clear:both;
width:730px;
padding-top:16px;
padding-right:10px;
padding-left:9px;
height:100%;
/*line-height:19px;*/
float:right;
}

...folgendes Ergebnis erreichen.
Andersrum krieg ich es irgendwie nicht hin, weil das CSS Layering mit dem z-index nich so wirklich klappt. Vielleicht hat einer eine Idee.

Ich geb mir echt Mühe. ^^

Es ist tatsächlich zentriert und unabhängig von der Auflösung!

Original anzeigen (0,2 MB)

@Dr.Shrimp

Hat bei dir eigentlich z-index schon je funktioniert? Bei mir hat es noch nie seine angebliche Funktion erfüllt, egal was ich mache und wie genau... -.-

@Thawra

Nein, aber es ist schließlich der 3. Advent. Ich werde ja wohl hoffen dürfen. ^^

@Thawra
@Dr.Shrimp

welche browser können den z-index verarbeiten?

Also wenn ich allmy über ein stylesheet zentriere spreche ich die klassen an und fertig

@Prof.nixblick

Also eigentlich sollte ja in Firefox fast alles funktionieren. z-index jedoch eher nicht, scheint's. Und in anderen Browsern hatte ich nicht viel mehr Glück.

@Prof.nixblick

Das ist aber nicht auflösungsunabhängig was du machst.
Wir haben ja schon oben geklärt, dass das margin:auto nur bei .main klappt.

Du musst ja dafür sorgen, dass die Seite zentriert ist, auch wenn du 800x600 hast. ^^
Dafür hab ich eine Lösung gefunden, indem man so eine neue Klasse wie oben beschrieben einführt, in welche die komplette Seite eingebettet ist.

@Dr.Shrimp

ok das leuchtet ein.