 Zentrierung von Div-Containern....*seufz* |
|
Willkommen, Gast ( Anmelden | Registrierung )
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML
 06.04.2004 - 15:26
Beitrag
#1
|
|
|
looks good Gruppe: User Beiträge: 43 Mitglied seit: 17.02.2004 Mitglieds-Nr.: 2.047  |
Hallo, nun puzzle ich schon seit ein paar Tagen an einem Problem und kriegs nicht hin, dass es in allen Browsern vernünftig dargestellt wird.
Möchte meine Page ganz mit CSS definieren (und sei es nur zur Übung *g*). Eigentlich ist der Grundaufbau recht simpel, das Problem ist lediglich, dass ich das gesamte Design gerne zentriert (horizontal reicht mir) hätte-und zwar in allen Browsern. Hier mal eine Probeseite: http://terry.funpic.de/vorlage1.html - nicht rumklicken, oder wenn doch, die anderen Seiten nicht beachten, sind auch Testseiten und größtenteils noch aus Tabellen aufgebaut... Probleme: bei der verlinkten Seite gelingt die Zentrierung durch: position:absolute; left:50%; margin-left:-412px; (den Trick hat mir jemand verraten...) Problem ist dabei allerdings, dass der untere Rahmen im IE nicht angezeigt wird und man auch nicht soweit runter scrollen kann, dass er mit ins Bild kommt. Wird einfach unten abgehackt. Im Firefox/Mozilla wird es korrekt angezeigt (leider mit anderen Rahmenfarbe, aber das läßt sich wohl nicht ändern...). Ich habe dann noch folgenden Tipp bekommen: margin:0px auto; soll mit allen Browsern ausser dem IE 5.0 klappen - für den dann nochmal extra: <body style= "text-align:center;"> in den folgenden Containern dann eben wieder text-align:left angeben. Alles schön und gut, hab ich auch probiert, Ergebnis s.hier: http://terry.funpic.de/vorlagen.html Nun verrutschen mir die beiden unteren Container nach links und halten sich nicht mehr an den Grundcontainer - und zwar in allen Browsern!! Warum das? Und fällt irgendjemandem noch was ein, wie man so ein Layout zentrieren kann, so dass es in allen gängigen, halbwegs modernen Browsern angezeigt wird? Rumgetestet hab ich noch mit allen möglichen relativen und absoluten Positionierungen, die mir so eingefallen sind, aber etwas, dass sowohl im IE als auch im Firefox funktioniert, hab ich noch nicht gefunden. Hätte nicht gedacht, dass das so schwierig wird... Wie einfach ist das doch da mit den Tabellen... :roll: Grüße, Terry |
 |
 
|
 |
Antworten
|
07.04.2004 - 14:37
Beitrag
#2
|
|
|
Ausnahme Poster  Gruppe: User Beiträge: 150 Mitglied seit: 24.10.2003 Wohnort: Berlin Mitglieds-Nr.: 1.544 |
ZITAT Eigentlich ist der Grundaufbau recht simpel, das Problem ist lediglich, dass ich das gesamte Design gerne zentriert (horizontal reicht mir) hätte-und zwar in allen Browsern. [...]Probleme: bei der verlinkten Seite gelingt die Zentrierung durch: position:absolute; left:50%; margin-left:-412px; (den Trick hat mir jemand verraten...) Verstehst Du genau, was obiger Code bewirkt? Wenn nicht - laß es. Absolute Positionierung ist nicht nur ein Kapitel für sich, sondern in vielen Fällen gar nicht notwendig. Zumal mir obiger Code Bauchschmerzen verursacht ... ZITAT Ich habe dann noch folgenden Tipp bekommen:
Das wäre der korrekte Weg, um ein Blocklevel-Element (p, div, table, ...) zu zentrieren.
margin:0px auto; ZITAT soll mit allen Browsern ausser dem IE 5.0 klappen Tut es i. A. auch. ZITAT für den dann nochmal extra: <body style= "text-align:center;"> Allgemeiner: Das Elternelement des zu zentrierenden Elements bekommt ein text-align: center, da der IE dieses fälschlicherweise nicht nur auf Text und Inline-Elemente anwendet, sondern eben auch auf andere Block-Elemente. Man benutzt quasi einen Bug, um einen anderen zu umgehen. Typisch IE halt.
ZITAT Alles schön und gut, hab ich auch probiert, Ergebnis s.hier: http://terry.funpic.de/vorlagen.html Nun verrutschen mir die beiden unteren Container nach links und halten sich nicht mehr an den Grundcontainer - und zwar in allen Browsern!! Das dürfte aber nicht an der Zentrierung, sondern an den ganzen absoluten Positionierungen liegen. Wie oben schon angedeutet - wenn Du nicht genau weißt, was absolute bzw. relative Positionierung ist, wie sie arbeitet und welche Probleme auftreten können, solltest Du sie auch nicht verwenden. Und hattest Du nicht gesagt, daß Du auf Tabellen verzichten willst? Was machen dann die Navigationstabelle und diese ganzen da? Sei Dir auch bewußt, daß Deine Seite wegen der festen Breite in vielen Fällen (800x600 Auflösung und weniger) horizontale Scrollbalken verursachen wird. HTH n! |
|
|
|
Beiträge in diesem Thema
Terry Zentrierung von Div-Containern....*seufz* 06.04.2004 - 15:26
Terry Habt ihr keine Ideen dazu? Ist es echt so komplizi... 07.04.2004 - 12:11 Conny Hi,
wenn das DIV eine feste Breite hat, kannst Du ... 07.04.2004 - 15:20 Terry Re: Zentrierung von Div-Containern....*seufz* 07.04.2004 - 15:24 Conny Re: Zentrierung von Div-Containern....*seufz* 07.04.2004 - 15:31 Terry Hallo Conny,
die Idee hatte ich auch schon - klap... 07.04.2004 - 15:34 Conny Hi Terry,
meine Seiten basieren auch auf DIV Conta... 07.04.2004 - 15:55 amethyst Hallo Conny,
Ich hoffe, wir dürfen auch kucken ;-... 07.04.2004 - 16:49 Terry Und ich schon wieder. Bin noch mal ganz zurück geg... 07.04.2004 - 17:37 Conny Hi Terry,
hab' Dir was gebastelt, kannst du vielle... 07.04.2004 - 20:51 Terry Vielen Dank, Conny - das ist echt lieb von Dir.
A... 07.04.2004 - 21:29 Terry Puh - ich habs jetzt - dank der Hilfe in einem and... 08.04.2004 - 11:33 Auge ZITAT(Netscape 4 oder ähnliches zählt nicht - der ... 08.04.2004 - 14:26 Terry ZITAT<randnotiz>
Zumindest dem letzten Teils... 08.04.2004 - 15:01 amethyst Hallo Terry,
ich hab aus diesem Thread viel gele... 08.04.2004 - 15:12 Terry Vielen Dank, Amethyst - dauert aber noch ein Weilc... 08.04.2004 - 18:54
Netizen ZITATWer son Ding zuhause benutzt, ist aber nun wi... 08.04.2004 - 20:21 |
2 Besucher lesen dieses Thema (Gäste: 2 | Anonyme Besucher: 0)
0 Mitglieder:
|
Vereinfachte Darstellung | Aktuelles Datum: 12.05.2025 - 1:32 |