Absolute Positionierung innerhalb centered div mit z-index

[AndiRudi]

Hallo,

ich habe ein Layout das zunächst mal zentriert sein soll, d.h. wir haben z.b. ein 600px Quadrat in der Mittag.

Nun kann ich ja in diesem zentrierten Quadrat weitere Elemente absolut positionieren. Das geht wenn ich dem Quadrat position:relative mitgeben, denn dann beziehen sich die inneren Elemente auf das Quadrat anstatt auf den Browserrand.

Soweit gut.

Wenn ich nun aber die inneren Elemente mit Z-Index in Ebenen zeichnen will, geht das nicht. Diese Elemente positionieren sich wieder absolut an der linken oberen Ecke des Browsers anstatt des zentrierten Quadrats. Ich nehme an, das für jeden z-index-context ein eigenes Parent gilt...

Wie kann ich das Problem lösen? Siehe auch die URL... das ist das Beispiel das nun zentriert sein muss.

[Marc]

Hallo AndiRudi,

ich habe ein Layout das zunächst mal zentriert sein soll, d.h. wir haben z.b. ein 600px Quadrat in der Mittag.

Wie soll das gehen? Bietest Du für Handhelds ein extra CSS an? Und wie sieht es mit Leuten aus, die mit 800x600 Pixeln unterwegs sind aus?

Es sieht mir fast so aus, als wolltest Du eine Print-Broschüre gestalten - Weblayout ist das jedenfalls nicht...

Nun kann ich ja in diesem zentrierten Quadrat weitere Elemente absolut positionieren. Das geht wenn ich dem Quadrat position:relative mitgeben, denn dann beziehen sich die inneren Elemente auf das Quadrat anstatt auf den Browserrand.

Soweit gut.

Wenn ich nun aber die inneren Elemente mit Z-Index in Ebenen zeichnen will, geht das nicht. Diese Elemente positionieren sich wieder absolut an der linken oberen Ecke des Browsers anstatt des zentrierten Quadrats. Ich nehme an, das für jeden z-index-context ein eigenes Parent gilt...

Wie kann ich das Problem lösen? Siehe auch die URL... das ist das Beispiel das nun zentriert sein muss.

Meiner Meinung nach eignet sich dieses Layout nicht für eine Zentrierung - es sieht viel besser aus, wenn es oben und links bündis abschließt. Ich würde nur dafür sorgen, dass die Linien in jedem Fall den gesamten Hintergrund überdecken.

Viele Grüße,
Marc.

[AndiRudi]

Also eigentlich wollte ich keine Meinung haben, sondern wissen ob das technisch möglich ist.

Es liegt nicht in meiner Macht das Design zu verändern. Die Seite soll einfach mittig zentriert sein und das mit Layern.

Hallo AndiRudi,

ich habe ein Layout das zunächst mal zentriert sein soll, d.h. wir haben z.b. ein 600px Quadrat in der Mittag.

....

[Marc]

Hallo,

Also eigentlich wollte ich keine Meinung haben, sondern wissen ob das technisch möglich ist.

Grundsätzlich ist es möglich. Bei horizontaler UND vertikaler Zentrierung wirst Du kaum um CSS rumkommen.

Ansonsten musst du den Nutzern der Webseite vorschreiben, dass Sie sich gefälligst einen großen Bildschirm zu kaufen haben, die Seite bitte nicht von unterwegs betrachten und auch bitte sonst keine Möglichkeiten nutzen, die alle anderen Webseiten bieten (von der Schriftvergrößerung bis hin zum Zoom der gesamten Seite oder dem Abschalten von CSS).

Aber das kannst Du dann mit JavaScript wohl auch nicht (sinnvoll) verhindern.

Meinungen zu haben macht also durchaus Sinn - selbst dann, wenn man gar keine hat und auch nicht haben will.

Mit Deiner Methode legst Du Dir allerdings zu viele Beschränkungen auf. Nutze das Standard-Verhalten von Block- und Inline-Elementen für die Umsetzung des Designs und positioniere nicht alles absolut.

Es liegt nicht in meiner Macht das Design zu verändern. Die Seite soll einfach mittig zentriert sein und das mit Layern.

Warum mit Layern? Dürfen die Besucher Deiner Webseite nur den Netscape 4 benutzen? In Deinem Beispiel benutzt du doch gar keine Layer...

Hallo AndiRudi,

ich habe ein Layout das zunächst mal zentriert sein soll, d.h. wir haben z.b. ein 600px Quadrat in der Mittag.

Guten Appetit!

Viele Grüße,
Marc.

[AndiRudi]

Hi Marc,

ich kann ja deine Verliebtheit in das CSS verstehen und ich weiß ja auch das es nicht cool ist. Aber ich habe für eine kleine Seite einfach nicht den Nerv dafür.

Die Seite soll für die meisten Leute funktionieren und die haben nun mal nen IE oder nen Firefox in einer aktuellen Version und auch einen Bildschirm mit min. 1024px, das kannst in jedem Log einer Website für Normalbürgen nachschauen.

Ich finde es überdies hinaus nicht gut, wenn man in einem Forum in dem jemannd eine Frage stellt - und dazu ist es da - diesem seine eigene Meinung aufzudrücken.

Wenn ich deine Webseite sehe, dann weiß ich auch, das du niemals eine tolle Webseite machen wirst :)

Anyway für die Leute, die auch das Problem haben ist hier die Lösung.

Es ging darum, zwei übereinanderliegene DIVs (im normalen Menschenverstand und Grafikdesign auch Layern genannt) absolut auf das Elternelement zu positionieren, wobei das Elternelement ein zentrierter DIV ist.

Folgender Code kommt diesem schon recht Nahe, läuft aber eventuell so auf älternen Browsern nicht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>

<div id="center" style="position:absolute; left:50%; width:600px; margin-left:-300px; height: 500px; border: 1px solid black;">

<div id="layer1" style="background-color:Gray; position:absolute; left: 0px; top: 20px; height:200px; width:200px; z-index: 1;">
</div>

<div id="layer2" style="background-color:Yellow; position:absolute; left: 80px; top: 80px; height:200px; width:200px; z-index: 2;">
</div>

</div>

</body>
</html>

[Marc]

Hallo AndiRudi,

Die Seite soll für die meisten Leute funktionieren und die haben nun mal nen IE oder nen Firefox in einer aktuellen Version und auch einen Bildschirm mit min. 1024px, das kannst in jedem Log einer Website für Normalbürgen nachschauen.

In den mir zugänglichen Logs, kann ich Deine Angaben nachvollziehen. Mir und meinem Arbeitgeber reicht es aber nicht, wenn meine Seiten nur von 80% aller Internet-Nutzer wie gewünscht betrachtet werden können.

Ich finde es überdies hinaus nicht gut, wenn man in einem Forum in dem jemannd eine Frage stellt - und dazu ist es da - diesem seine eigene Meinung aufzudrücken.

Das habe ich auch nicht versucht. Aber ich habe eine Meinung und die darf ich doch wohl noch äußern, ohne von jemandem, der um einen Ratschlag gebeten hat, für einen ernst gemeinten Ratschlag beleidigt zu werden?

Selbstverständlich werde ich nicht darauf bestehen, dass Du meinen Lösungsansatz wählst, nur weil er meiner Vorgehensweise näher kommt. Deine Gründe, es anders zu machen, sind durchaus berechtigt (keine Lust wegen einer einizigen Seite (womöglich privaten Seite, für die dich hoffentlich niemand bezahlt) so einen Aufwand zu betreiben - überhaupt scheinst du weder Aufwand noch Sorgfalt zu lieben).

Ich wollte Dir lediglich einen meiner Meinung nach nachhaltigeren und eleganteren Lösungsansatz aufzeigen. Ob du den Rat annimmst oder nicht, ist Dir überlassen. Du kannst auch gerne mit mir darüber diskutieren und nur weil ich schon ewig beruflich Webseiten erstelle und das auch unterrichte, bin ich nicht so arrogant geworden, anderen Menschen nicht mehr zuzuhören. Mir fallen immer wieder Seiten auf, auf denen bestimmte Dinge anders gemacht sind, als auf meinen - mitunter besser und eleganter. Auch Menschen, die erst anfangen, sich mit dieser Materie auseinander zu setzen, bringen mich manchmal auf neue Ideen. Wenn Du an einer ernsthaften Diskussion interessiert bist, können wir die beiden Lösungsansätze gerne (am besten per PM) ausdiskutieren. Ansonsten würde ich dich bitten auf Äußerungen wie die folgende zu verzichten.

Wenn ich deine Webseite sehe, dann weiß ich auch, das du niemals eine tolle Webseite machen wirst :)

Diese Aussage wird auch durch den Smiley nicht richtiger oder klüger. Von zugegebenermaßen inhaltlich und technisch völlig veralteten Webseiten darauf zu schließen, wie ich heute arbeite oder in Zukunft arbeiten werde, ist wirklich nicht sehr weise. Diese Unweisheit auch noch öffentlich im Forum kund zu tun, lässt dich auch nicht klüger oder sympathischer erscheinen.

Andererseits: Dass meine Website so noch im Web steht, ist eigentlich eine Schande, das gebe ich zu. Und das sind die Dinge, die ich selbst von so einem wie Dir noch lerne: Meine Site muss dringend renoviert werden.

Anyway für die Leute, die auch das Problem haben ist hier die Lösung.

Es ging darum, zwei übereinanderliegene DIVs (im normalen Menschenverstand und Grafikdesign auch Layern genannt)

Nein, im Verstand von Menschen, die zu faul sind, sich mit dem was sie machen auseinanderzusetzen. Und die Webseiten bauen, die so oder so ähnlich wie gewünscht in dem Browser angezeigt werden, den die meisten Leute benutzen. DIVs sind eben keine echten Ebenen (Layer), wie man sie etwa als Designer aus Photoshop kennt. Bestenfalls kann man damit so etwas wie Ebenen simulieren.

Und gerade im Zusammenhang von HTML muss man sagen: Es gibt ein (proprietäres) HTML-Tag, <layer>, welches Du überhaupt nicht einsetzt und wahrscheinlich nicht einmal kennst. Darauf, dass es so etwas gibt und dass Du etwas anderes meinst und mit falschen Worten eventuell bei denen Verwirrung stiftest, die Du um Hilfe bittest, darauf wollte ich Dich aufmerksam machen.

Tut mir leid, wenn ich Dir nicht das alles in meinem letzten Posting auf dem Silbertablett gereicht habe. Aber ich setze ein bißchen Kommunikationsbereitschaft und Interesse bei den Postern dieses Forums voraus. Das mag in Deinem Fall ein bißchen zu viel an Vorschusslorbeeren gewesen sein.

An früheren Diksussionen kannst Du nachvollziehen, dass ich mit jedem der sich auf die Diskussion mit mir eingelassen hat, bis zur Lösung eines Problems den Thread fortgeführt habe.

Folgender Code kommt diesem schon recht Nahe, läuft aber eventuell so auf älternen Browsern nicht:

Und ist ein gutes Beispiel dafür, wie man es nicht machen sollte. Er ist nicht einmal als Code markiert, so dass das Markup farblich hervorgehoben würde.

» <div id="center" style="position:absolute; left:50%; width:600px; margin-left:-300px; height: 500px; border: 1px solid black;">  

>   
> <div id="layer1" style="background-color:Gray; position:absolute; left: 0px; top: 20px; height:200px; width:200px; z-index: 1;">  
> </div>

IDs mit physischen statt mit logischen Namen zu belegen, Pixel für Größenangaben, die nur auf den modernsten Monitoren zum gewünschten Ergebnis führen (und nicht einmal auf allen, zum Beispiel denen, die in den jetzt so beliebten Netbooks und "Surf"-Handys wie iPhone verbaut werden), Elemente ohne Not aus dem üblichen Elementfluss herauszunehmen und Farbnamen (mal groß, mal klein geschrieben) statt rgb- oder Hexadezimal-Angaben zu verwenden mag in den meisten Fällen funktionieren. Aber so etwas als Beispiel für tolles Webdesign hinzustellen bedarf neben der daraus ersichtlichen Abneigung gegen sauberes Arbeiten einer gehörigen Portion an Arroganz und Selbstüberschätzung...

Viele Grüße,
Marc.

[minicrispie]

Hallo,

ein 600px Quadrat in der Mittag.

wow ... ein Mann von Welt!
Er hat einen 600px großen, quatratischen Teller zum Mittag :)

MfG. Christoph Ludwig

[at]

Hallo.

ich habe ein Layout das zunächst mal zentriert sein soll, d.h. wir haben z.b. ein 600px Quadrat in der Mittag.

<starttag><mittag /></endtag>?
MfG, at