Guten Morgen,
mit der Anweisung "margin:auto" zentriere ich horizontal einen DIV-Contrainer. Das funktioniert leider nur mit der Positionierung "position:relative".
Mein Navigationsbereich wurde nämlich fixiert (position:fixed), und dort möchte ich meinen Container ebenfalls zentrieren.
Hat jemand eine Lösung? Ich bastle seit Tagen, kann aber das Problem nicht lösen.

Ich versuchte es mit folgender Umgehungslösung:

<div id="eltern">
<div id="kinder">
</div>
</div>

Der CSS-Teil:

#eltern{
position:relative;
margin:auto;
width:1024px;
}

#kinder{
position:fixed;
width:1024px;
}

Im Firefox zeigt er mir zwar das gewünschte Ergebnis an, doch im Google Chrome verschieben sich die Layer.

Wo ist das Problem?

Dass wir kein Testcase haben...
bastel doch mal was einfaches und stells irgendwo online.
So ist es eine Raterei.

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Ich kann auf der Schnelle keine Testumgebung zur Verfügung stellen. Daher möchte ich die Frage anders formulieren:

Hat jemand von euch schon einmal einen fixierten Div-Contrainer zentrieren müssen? Wie habt ihr das Problem gelöst?

Scheinbar weißt du nicht, was position so bewirkt. "fixed" richtet sich IMMER am Viewport aus, lässt sich also nicht im Elternelement zentrieren.
Ich bin mir auch fast sicher, das position hier völlig überflüssig ist. Mehr kann man allerdings nur sagen, wenn man weiß, was genau du darstellen willst.

Ansonsten ein wenig Lesestoff zu position: position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Der Bildschirm hat eine Auflösung von 1600 x .... Bildpunkten.

Darin soll eine HTML-Seite mit einer Breite von 1024 x .... Pixeln mittig dargestellt werden.

In dem 1024 x ... - Layer sollen mehrere Div-Container nebeneinander dargestellt werden. Ich bemerkte, dass die Anweisung "float:left;" dazu führte, das meine gewünschte Ausrichtung (horizontal zentriert) nicht funktionierte.

Unter Startseite @ tutorials.de: Tutorials, Forum & Hilfe habe ich nun folgende Lösung gefunden:


Quelle: div Elemente zentrieren mit float:left @ tutorials.de: Tutorials, Forum & Hilfe

Das ganze funktioniert auch!

Ich arbeite noch nicht lange mit CSS, aber für eine relativ einfache Anforderung bedarf es einen so umständlichen Code? Ich bin enttäuscht von CSS.

zum zentrieren reicht:
die beiden anderen floaten mit passender Breite.

Grundlagen: Little Boxes

Und ich bin enttäuscht davon wieso du dir nicht mal Gedanken zu CSS machst und vielleicht einfach mal mit den Basics anfängst bevor du dich an sowas wie position: fixed heran wagst.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS) (Um zu zeigen wie leicht es doch geht)

__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?

Ich denke wir reden etwas aneinander vorbei, da ich meine Anforderung nicht exakt schilderte. Deshalb möchte ich meine Anforderung nochmal zu Wort bringen, dieses Mal mit Foto!

1. Ich möchte einen Layer mit einer Breite von 1024 x .... mittig plazieren (siehe Abbildung - großer schwarze Rahmen)
2. Der Kopfbereich (siehe Abbildung - roter Hintergrund) darf beim scrollen NICHT mitwandern. @Thielo: daher die Positionierung "fixed".
3. Innerhalb des Kopfbereichs befinden sich nun mehrere DIV-Layer (im Bild 3 Stück), die nebeneinander dargestellt werden müssen. DIV-Layer lassen sich bekanntlich nur mit "float:left" nebeneinander darstellen. @Thielo: sobald ich "float:left" anwende, funktioniert dein Code nicht mehr. Wie du siehst, es geht doch nicht so einfach, wie man manchmal denkt. Leider.

Wie kommst du da drauf?

<del>Ich sehe nichts, weil du nicht zeigst was du baust sondern nur sagst es würde nicht funktionieren.</del>

Ah, Edit sagt http://jsfiddle.net/Ce889/2/ du hast gezeigt aber geheim.

Hier ein erweitertes Beispiel: Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS) (mit 3 Nebeneinander ausgerichteten Containern, einer sogar rechts!)
Und jetzt bitte wirklich erstmal die Grundlagen lernen, ok??!?!?!?!

__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?