Hallo zusammen,

gibt es eine Möglichkeit einen Layer horizontal und vertikal zu zentrieren?
Ich kenne einen Weg über eine Positionierung mit Prozentangaben und negativen margin:

zB


Das Problem bei dieser Lösung ist aber, das sobald der anzuzeigende Bereich kleiner wird wie der Layer. Der Layer in sämtliche Richtung abgeschnitten wird. Also auch am oberen und unteren Rand. Was natürlich nicht sauber aussieht, und auch kein scrollen zu den verloren gegangenen Inhalten hilft.

Gibt es vielleicht noch einen andere Lösung?

Dankeschön schonmal

Zumindest horizontal kannst du einen DIV-Bereich (Layer sind eine wenig erfolgreiche Erfindung von Netscape) mit der Zuweisung eines automatischen Außenabstandes (margin: auto) zentrieren. Soll er zusätzlich vertikal zentriert sein bleibt wohl nur der von dir genannte Weg.

---
Schützenverein „Einigkeit“ Autenzell-Rettenbach
meisterschuetzen.net - Der Treffpunkt für Sportschützen

Bei Layern spreche ich automatisch schon von fest positionierten Block-Elementen, zB. Divs. Ist natürlich nicht ganz eundeutig, das ist korrekt.

Letzendlich müsste ich also den semi-professionellen weg wählen, und einkalkulieren das bei geringeren Bildschirmauflösungen Inhalte verloren gehen.

Bzw. müsste in diesem Punk wieder auf Tabellen zurückgreifen.

smonkey schrieb am 26.04.2005 11:03 Letzendlich müsste ich also den semi-professionellen weg wählen, und einkalkulieren das bei geringeren Bildschirmauflösungen Inhalte verloren gehen.

Du hast dabei nicht berücksichtigt, dass das nichts mit der Auflösung zu tun hat, sondern einzig und allein mit der Browsergröße. Auch bei großen Auflösungen kann man sein Browserfenster kleiner machen, und wenn das jemand macht, hat er dafür gute Gründe. Wenn er dann Deine Site nicht mehr nutzen kann, und das muss man klar sagen, dass die Site dann nicht mehr nutzbar ist, das schlimmste also, was einer Website passieren kann, dann wird er Deine Site verlassen.
Und das nur wegen einer vertikalen Zentrierung? Das kann nicht sein!
Wenn diese vertikale Zentrierung "unbedingt nötig" ist, dann würde ich das Design überdenken. Es kann nicht sein, dass eine Site unbenutzbar wird, aufgrund solcher Kinkerlitzchen wie einer Zentrierung.

Bzw. müsste in diesem Punk wieder auf Tabellen zurückgreifen.

Dann würde die Site erst recht unbenutzbar werden, das würdest Du sicher nicht wollen.

Ich verstehe nicht, wie Du Dich so an diese Zentrierung klammern kannst.

Ja, also sind wir mal ehrlich. Selbstverständlich richtet sich die Darstellung einer Webseite je nach Darstellungsbereich des Browsers. Dies kann ja nach Fenstergrösse, der Darstellung von Sidebars sowie Toolbars variieren. Demnach gibt es dutzende Variationen je Bildschirmauflösung. Letztendlich müssen wir aber zugeben das der Grossteil der Nutzer den Browser im Vollbild darstellt während er durchs Web surft. Von daher ist es denke ich sinnvoller von Bildschirmauflösungen zu sprechen.

Aber du sprichst ein ganz anderes Problem an: In bestimmten Konstellationen kann es vorkommen, das der Browser fest positionierte Bereiche, nach einer Grössenänderung nicht wieder korrekt darstellt. Dann müsste man wiederrum auf JS zurückgreifen, was weitere Kompatibilitätsverluste mit sich zieht.

Ich denke eine vertikale Zentrierung ist kein "Kinkerlitzchen" wie du es nennst. Wenn ich schon als Programmierer es als wichtiges Designelement empfinde, dann gehört es für einen „screen-designer“ wohl zu den Grundelementen.

Versuche doch mal eine 800x600px, oder gar 640x480px optimierte Seite auf einem Bildschirm mit 1400er Auflösung darzustellen. Wenn die Seite dann oben anklatscht sieht es einfach nicht gerade professionell aus. Oder findest du nicht?

smonkey schrieb am 03.05.2005 14:15 Letztendlich müssen wir aber zugeben das der Grossteil der Nutzer den Browser im Vollbild darstellt während er durchs Web surft.

Das ist ein unbestätigtes Gerücht. Ich bräuchte nur zu sagen, dass in meinem Bekanntenkreis idR nicht Vollbild genutzt wird, und Du wärest widerlegt. Außerdem ist das völlig irrelevant. Sagst Du Deinem Browser, dass ein Element 10% breit sein soll, rechnet er das ja auch nicht von der Auflösung, sondern von der Browserinnenbreite. Niemand richtet sich nach der Auflösung. Und Du sprichst selbst Sidebars an. Auch mit Sidebar und maximiertem Browser ist Browserinnengröße definitiv nicht identisch oder auch nur annähernd ähnlich der Auflösung. Von der vertikalen ganz zu schweigen.

Von daher ist es denke ich sinnvoller von Bildschirmauflösungen zu sprechen.

Nein, es ist totaler Quatsch. Und Deine Beweisführung ist keine.

Wenn Du von Auflösung sprichst, stimmt das definitiv nicht für 100% aller Nutzer zu. Ob das nun 40% oder 80% sind, ist egal. Da wirst Du mir zustimmen.
Sprichst Du aber von Browserinnengröße, trifft das für 100% der Nutzer zu. Auch da musst Du mir zustimmen.
Also, warum was Falsches oder nur in weniger als 100% der Fälle Richtiges sagen, wenn Du etwas zu 100% Richtiges sagen kannst?
Es liegt wohl in der Natur des Menschen, sich ungenau auszudrücken, obwohl alles akribisch genau definiert ist. Und das hat der Mensch auch noch selbst definiert.

Aber du sprichst ein ganz anderes Problem an: In bestimmten Konstellationen kann es vorkommen, das der Browser fest positionierte Bereiche, nach einer Grössenänderung nicht wieder korrekt darstellt.

Habe ich das angesprochen? Mir war nicht bewusst, dass ich von Größenänderung sprach.

Ich denke eine vertikale Zentrierung ist kein "Kinkerlitzchen" wie du es nennst.

Warum nicht? Wenn durch die Nichtnutzung der Zentrierung die Nutzbarkeit nicht abnimmt, aber sehr wohl durch den Einsatz die Nutzbarkeit abnehmen kann, dann ist es gefährlich, das zu nutzen. Und etwas, das nicht schadet, wenn man es weg lässt, ist "Kinkerlitzchen"

Wenn ich schon als Programmierer

Als was? Du meinst, als gelernter Programmierer in einem dem gelernten fremden Medium? Will sagen, im Web sind wir keine Programmierer.

es als wichtiges Designelement empfinde

Aber was nützt mir das schönste Design, wenn die Site dadurch unbenutzbar wird?

dann gehört es für einen „screen-designer“ wohl zu den Grundelementen.

Ich habe eher das Gefühl, hier gehts um die Meinung eines Print-Designers. Denn ein echter Web-Designer weiß, dass die Nutzbarkeit oberstes Gebot ist, und dass Dinge aus dem Print meist ohnehin nicht so genau umgesetzt werden können.

Versuche doch mal eine 800x600px, oder gar 640x480px optimierte Seite

Das an sich ist schon Unfug. Man optimiert keine Web-Seiten. Man schreibt sie so, dass sie von allen Besuchern genutzt werden können. Wer etwas optimieren muss, hat einen konzeptionellen Fehler.

auf einem Bildschirm mit 1400er Auflösung darzustellen. Wenn die Seite dann oben anklatscht sieht es einfach nicht gerade professionell aus.

Dann kann man ja ein margin-top setzen. Aber wenn durch vertikales Zentrieren bei jemandem die Site unbenutzbar ist, ist das Zentrieren nicht mehr akzeptabel. Dann mache ich lieber ein margin-top in einer angemessenen, mit "em" ausgezeichneten Größe, da weiß ich wenigstens, dass Scrollbalken kommen, wenn das Fenster zu klein wird.

Oder findest du nicht?

Ja, finde ich nicht. Wie beschrieben.

Hallo Smonkey,

Dein Problem lässt sich recht einfach lösen:

zunächst sollte ein umfassendes Tag mit einem Abstand zur Oberkante von zwischen 40 und 50 % definiert werden:

h5 { position:absolute; top:45%; }

Der Inhalt sollte dann um die Hälfte seiner Höhe nach oben verschoben werden:

table { position:relative; height:400; top:-200; }

Der Quelltext sieht dann so aus:

Inhalt der Tabelle ... blablubberblubb

Das geht natürlich nicht nur mit Tabellen.

Ich bin mit einem Top-Abstand von 45% am besten gefahren, die Höhe des Elements spielt aber auch eine gewisse Rolle.

Ich habe das hier mit erfolg angewandt.

Ich hoffe Dir weiter geholfen zu haben.

Gruß
Raven

Hi Raven,

Danke, endlich mal eine qualifizierte Antwort.

Dein Lösungsweg ist ja so ähnlich die der von mir beschriebene. Leider ist das Problem über dem Weg, schaust du dir deine Seite beispielsweise mit einer Auflösung von 640x480px an, verschwindet die komplette Navigation. Da hilft dann leider auch kein Scrollen mehr.

Es wäre schön , wenn es einen Weg gäbe - bei dem der Inhalt nicht oben oder links abgeschnittern wird. Wenn du verstehst was ich meine?

Grüsse,
smonkey

wenn du nur horizontal zentrieren wuerdest, waers einfach:



aber mit der negativmargin-methode ist da ohne javascript nichts zu machen.

Oh und.. ein h5 als Containerelement, noch dafuer fuer eine Layouttabelle zu missbrauchen.. uah. Allzu qualifiziert war diese Antwort dann doch nicht.

Also müsste man dann wieder auf eine Tabelle mit 'width=100%' und 'height=100%' zurückgreifen, und den Inhalt dann vertikal und horizontal zentrieren.

Was dann wiederrum aber nur im IE interpretiert wird, und auch nur ohne Angabe eines des 'Doctypes'.

Gibts es deine keine 'saubere' Lösung für so etwas banales, wie den Inhalt einer Seite mittig zu zentrieren?

Danke,
smonkey

Nein, horizontal eben nicht.

In JS saehe das so aus:


mit css wie dus vorher schon hattest, also zb

Mir fällt dazu jetzt spontan nur eins ein:



Müßtest du für verschiedene Auflösungen austesten.
Habs eben schnell im Firefox und IE getestet, klappt ganz gut.

---
Kostenlos Webspace bei funpic.de

Hey Efchen,

verzeih mir bitte das ich erst heute wieder mal Zeit gefunden habe auf deine langen und überflüssigen Nachrichten zu antworten. Aber es gibt noch Leute mit einem Beruf und die dabei auch viel zu tun haben.
Noch eins vornweg, was soll diese ganzen Zitate? Bist du unfähig dazu einen zusammenhängenden Text zu schreiben, oder dich auf andere Art und Weise auf Textstellen zu beziehen? Selbst ich bekomme das hin, obwohl ich meine Rechtschreibung und Grammatik höchstens als ausreichend bezeichne.

So nun mal zu deinen zu deinen Aussagen. In meinem Bekannteskreis sind 80% deutscher Nationalität. Ist daher etwa 80% aller Menschen deutsch? Nein, eben nicht! Wieso willst du dann von deinem Bekannteskreis eine globale Aussage treffen? Und du gehst ja noch einen Schritt weiter, du willst meine Aussage, die sich auf Fakten und Statistiken beruht, damit wiederlegen. Das wäre so als würde ich sagen du bist ein Idiot, nur weil du in dieser Diskussion hauptsächlich Unsinn schreibst.

Du wirst auch noch festellen, das im Web-Bereich meistens von Bildschirmauflösung gesprochen wird. Denn diese lassen sich wenigstens fest definieren. Und zwar zB. auf 800x600px oder 1024x768px. Natürlich gibt es da auch noch einige Sonderformate, aber es gibt keine tausende wie bei der Grösse des vom Browser darzustellenden Bereichs.

Solltest du dich irgendwann mal mit den Begriffen Marketing und Design beschäftigen, wirst du feststellen das gutes und seriöses Design, sowohl auch eine Corporate Identy unabdingbar sind. Und um dies ordentlich umzusetzen ist es nunmal von Nöten, sich auf eine Systemvorraussetzung festzulegen.

Ich kann auch ehrlich nicht nachvollziehen was du mit deinem margin-top und einer 'em' angabe bezwecken willst. Es ist zwar eine relative Angabe, bezieht sich aber überhaupt nicht auf die dargestellte Grösse, sondern auf den Schriftgrad.

Diese Diskussion ist so Sinnlos und führt zu nichts. Hoffe das du das auch endlich einsiehst!

MfG
cg

Smonkey - ddu wirst unhöflich und persönlich.

Noch eins vornweg, was soll diese ganzen Zitate?

Es ist üblich bei konkreten Antworten auf bestimmte Textstellen sie zu zitieren. Dies erhöht die Lesbarkeit.

Efchen trifft keine globale Aussage sondern, bietet einfach eine genauere Begrifflichkeit an, welche auf alle Surfer zutrifft. Natürlich wird im Webbereich immer von Auflösung gesprochen. Aber es ist eigentlich nicht korrekt wenn man ein Layout entwirft. Die Innengröße des Browserfensters ist von vielen Faktoren abhängig. Die Aufösung ist einer, die Vorliebe des Besuchers eine zweite, der Browser selbst, die Breite der Scrollbars, ...

Nach meinen persönlichen Erfahrungen steigt mit der Größe der Auflösung auch die Wahrscheinlichkeit das der Besucher sein Browserfenster nicht auf Vollbild schaltet und/oder Sidebar-Funktionen des Browsers nutzt.

Bedenke das du die Seiten nicht nur für deinen Kunden machst, sondern vor allem auch für die Kunden deiner Kunden. Die Schwierigkeit ist beide Zielgruppen glücklich zu machen.

Solltest du dich irgendwann mal mit den Begriffen Marketing und Design beschäftigen, wirst du feststellen das gutes und seriöses Design, sowohl auch eine Corporate Identy unabdingbar sind. Und um dies ordentlich umzusetzen ist es nunmal von Nöten, sich auf eine Systemvorraussetzung festzulegen.

Die Systemvorraussetzung bei Webseiten ist erstmal nur ein Browser. Nicht einmal ein Bildschirm stellt eine Notwendigkeit dar. Marketing beschränkt sich nicht auf Optik. Auch Texte, Töne, Gegenstände und anderes könnten zur Vermittlung der CI genutzt werden.

Ich kann auch ehrlich nicht nachvollziehen was du mit deinem margin-top und einer 'em' angabe bezwecken willst. Es ist zwar eine relative Angabe, bezieht sich aber überhaupt nicht auf die dargestellte Grösse, sondern auf den Schriftgrad.

Durch verhält sich der Abstand relativ zum Schriftgrad. Wenn man diesen ändert, wird sich also der Abstand korrekt anpassen. Ist vor allem interessant, wenn man die Kaskadierungen nutzt.

---
Weaverslave