 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 |
 |
 
|
|
07.04.2004 - 12:11
Beitrag
#2
|
|
|
looks good Gruppe: User Beiträge: 43 Mitglied seit: 17.02.2004 Mitglieds-Nr.: 2.047 |
Habt ihr keine Ideen dazu? Ist es echt so kompliziert?
Ich dachte, ihr Profis seht sofort meinen Fehler, der ja da irgendwo noch drinstecken muss.... |
|
|
|
|
07.04.2004 - 14:37
Beitrag
#3
|
|
|
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! |
|
|
|
|
07.04.2004 - 15:20
Beitrag
#4
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad!  Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hi,
wenn das DIV eine feste Breite hat, kannst Du so zentrieren: QUELLTEXT #div {
width: 700px; margin: 0px auto; text-align: left; } Wobei die Width angabe natürlich beliebig verändert werden kann und die Text-align nicht relevant ist :wink: cu Conny [Edit] Oops :oops: einmal nicht aktualisiert, habe Netizen seine Ausführungen zu spät gesehen, sorry. [/Edit] |
|
|
|
|
07.04.2004 - 15:24
Beitrag
#5
|
|
|
looks good Gruppe: User Beiträge: 43 Mitglied seit: 17.02.2004 Mitglieds-Nr.: 2.047 |
Hallo Netizen,
vielen Dank für Deine Antwort. ZITAT 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 ... Er wurde mir so erklärt: durch left:50% wird der Container extrem weit nach rechts geschoben, durch das negative margin (Hälfte der Containerbreite) kommt er dann wieder zurück. Funktioniert ja auch, sogar in allen Browsern (von Freunden auch im Opera und Netscape getestet). Nur dass der Rahmen unten abgeschnitten wird und man beim IE nicht mehr dorthin scrollen kann. Und das stört mich eben doch! ZITAT Das dürfte aber nicht an der Zentrierung, sondern an den ganzen absoluten Positionierungen liegen. Ich hatte es auch mit float:left für den unteren linken Container versucht, damit sich der andere dann brav daneben gesellt. Klappt im IE wunderbar, im Firefox (2. Testbrowser) leider nicht. Im Netscape 7.1 auch nicht. Der rechte Container legt sich dann über den linken, so dass die Thumbnails überdeckt sind - unnavigierbar. Deshalb habe ich dann die absolute Positionierung angewandt.
ZITAT 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 wie soll ich es dann lernen? :wink:
ZITAT Und hattest Du nicht gesagt, daß Du auf Tabellen verzichten willst? Was machen dann die Navigationstabelle und diese ganzen da? Warum soll da keine Tabelle bleiben? - Muss aber eh noch mal überarbeitet werden, stimmt schon - besser auch feste Breiten angeben und dann die Leerzeichen weglassen - die waren dafür da, damit die Abstände zwischen den Wörtern besser passen.
ZITAT 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. Weiß ich. Mit noch weniger als 800px Breite wird die Seite schon wegen der Grafiken (die alle schon verkleinert sind) kaum anzusehen sein - ist keine Seite fürs WAP-Handy. Ist so ein Kompromiß. Mit 800 px Breite ist es fast komplett ansehbar - der Rand verschwindet, wenn man sich in die Mitte scrollt, und der Inhalt passt ganz drauf.
So richtig viel schlauer bin ich nun allerdings leider immer noch nicht... :roll: |
|
|
|
|
07.04.2004 - 15:31
Beitrag
#6
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hi
ZITAT ....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. .. Du könntest versuchen das mit einer margin-bottom Angabe, im betreffenden Div-Container, in den Griff zu bekommen. cu Conny |
|
|
|
|
07.04.2004 - 15:34
Beitrag
#7
|
|
|
looks good Gruppe: User Beiträge: 43 Mitglied seit: 17.02.2004 Mitglieds-Nr.: 2.047 |
Hallo Conny,
die Idee hatte ich auch schon - klappt leider nicht! :wink: Wie gesagt, ich puzzel da schon seit ein paar Tagen dran rum... - alle Schritte kann ich unmöglich aufzählen - allerdings klappt nichts von dem, was ich bisher probiert habe, oder wenn, dann zumindest nicht in allen Browsern. Scheint doch ein kniffliges Problem zu sein. Grüße, Terry |
|
|
|
|
07.04.2004 - 15:55
Beitrag
#8
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
|
|
|
|
|
07.04.2004 - 16:49
Beitrag
#9
|
|
|
Kann auf gar keinen Fall einen Videorekorder programmieren! Gruppe: User Beiträge: 210 Mitglied seit: 08.12.2003 Wohnort: Bad Zwischenahn Mitglieds-Nr.: 1.751 |
Hallo Conny,
Ich hoffe, wir dürfen auch kucken ;-)) Danke, dass Du Dir in die Karten (äh Seiten) schauen lässt. ;-)) Gruß Amethyst |
|
|
|
|
07.04.2004 - 17:37
Beitrag
#10
|
|
|
looks good Gruppe: User Beiträge: 43 Mitglied seit: 17.02.2004 Mitglieds-Nr.: 2.047 |
Und ich schon wieder. Bin noch mal ganz zurück gegangen, hab die Seite neu aufgebaut, nur die Grundcontainer, ohne Inhalt, auch aus der CSS-Datei alles rausgeschmissen, was für dieses Problem nicht relevant ist. Und mal wieder nicht absolut positioniert, sondern mit float:left;
Ich habe gesehen, dass Du, Conny, das Ganze einfach mit <center> </center> zentriert hast - eigentlich genial einfach, war ich aber noch nicht drauf gekommen. Funktioniert zumindest mit IE und Firefox. Hier also die einfache Grundseite: http://terry.funpic.de/grundgaleriecss.html Zugehörige CSS-Datei: http://terry.funpic.de/stylesheets/grund.css (müßt ihr kopieren und im Browser eingeben, als Direktlink von hier funktionierts leider nicht) Sieht mit dem IE 6 so aus, wie es soll, der Firefox macht den grünen Container aus mir nicht ersichtlichen Gründen nicht breit genug - naja, fraglich, ob man´s hinterher merken würde, denn dann isser ja nicht mehr grün. - Soweit, so gut. So, die gleiche CSS-Datei, der gleiche Grundaufbau, nur gefüllt mit Inhalt, sieht dann aber so aus: http://terry.funpic.de/vorlage2.html Warum  Keines der Bilder überschreitet den Rahmen.
Ich hab schon mal das Java-Script rausgenommen, weil ich dachte, dass es vielleicht daran liegen könnte, aber das isses nicht.... Hat noch jemand eine Idee? Terry, die schon recht verzweifelt ist... |
|
|
|
|
07.04.2004 - 20:51
Beitrag
#11
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hi Terry,
hab' Dir was gebastelt, kannst du vielleicht als Grundlage gebrauchen. Guckst Du Hier Die CSS findest Du im jeweiligen Tag (style=""). Wie Du das per Class oder ID rausnimmst und in eine CSS einbindest weißt Du ja... cu Conny |
|
|
|
|
07.04.2004 - 21:29
Beitrag
#12
|
|
|
looks good Gruppe: User Beiträge: 43 Mitglied seit: 17.02.2004 Mitglieds-Nr.: 2.047 |
Vielen Dank, Conny - das ist echt lieb von Dir.
Aber das Problem sind nicht die Container an sich, wie ich vorhin festgestellt habe (schau noch mal meinen letzten Beitrag, hab jetzt alles eingefärbt), sondern die Bilderschau mit den verschiedenen Ebenen da rein zu kriegen. Die halten sich bei "nicht-absoluter Positionierung" der unteren Container nämlich nicht mehr an diesen, sondern an den Body - möchte gerne mal wissen, warum. Bei absoluter Positionierung der unteren Container (z.Zt. grün und blau hinterlegt) bleiben die Ebenen da, wo sie sollen. Aber das gibt wieder Schwierigkeiten mit der Positionierung der grünen und blauen Container an sich, die sich nicht an den äußeren Rahmen halten wollen..... seufz... Im Moment fällt mir nix mehr ein - entweder eine ganz andere Bilderschau ohne Ebenen, oder eben das Ganze doch in eine Tabelle sperren - das hat wenigstens funktioniert.... Grüße, Terry |
|
|
|
|
08.04.2004 - 11:33
Beitrag
#13
|
|
|
looks good Gruppe: User Beiträge: 43 Mitglied seit: 17.02.2004 Mitglieds-Nr.: 2.047 |
Puh - ich habs jetzt - dank der Hilfe in einem anderen Forum.
Zum Zentrieren wurde ich dabei auf diese Seite verwiesen und geb´s hier einfach mal weiter, vielleicht ist es ja für irgendwen interessant:http://www.css-blog.com/index.php?p=68&more=1&c=1 Zur Positionierung meiner Containerchen: Hab ich jetzt auch kapiert. Beim Grundcontainer hatte ich vergessen, position:relative; anzugeben. Mit dieser Angabe halten sich die weiteren brav an den ersten, und zwar egal, ob absolut oder mit float positioniert. Bei der Positionierung mit float braucht jedoch der rechte, in dem die Ebenen sitzen sollen, unbedingt noch wieder die Angabe position: relative; - sonst gehts wieder nicht. Hier könnt ihr das Endergebnis noch mal ansehen: http://terry.funpic.de/vorlagen2.html Sagt bitte Bescheid, falls sich in irgendeinem halbwegs aktuellen Browser noch was ganz seltsames zeigt. (Netscape 4 oder ähnliches zählt nicht - der ist mir egal - selbst Schuld, wer noch damit surft). Habe jedenfalls viel über die Positionierung von <div>s gelernt dabei, auch wenn ich immer noch nicht alles verstehe... Kommt vielleicht noch.... Grüße, Terry |
|
|
|
|
08.04.2004 - 14:26
Beitrag
#14
|
|
|
Anwärter auf W3.org Mitgliedschaft Gruppe: User Beiträge: 550 Mitglied seit: 28.11.2001 Wohnort: Berlin Friedrichshain Mitglieds-Nr.: 107 |
ZITAT (Netscape 4 oder ähnliches zählt nicht - der ist mir egal - selbst Schuld, wer noch damit surft). <randnotiz> Zumindest dem letzten Teilsatz möchte ich widersprechen. Es gibt immernoch einige Uni- und Firmennetze, in denen der NS 4 läuft. Somit sind die, die mit ihm surfen, nicht unbedingt selbst schuld. </randnotiz> Abgesehen davon kann man ihn ja schließlich von CSS-Definitionen ausschließen. Wenn der HTML-Quelltext logisch strukturiert ist, kann man eine Seite ja auch ohne Farben, Posiitionierungen etc. sehen. Tschö, Auge |
|
|
|
|
08.04.2004 - 15:01
Beitrag
#15
|
|
|
looks good Gruppe: User Beiträge: 43 Mitglied seit: 17.02.2004 Mitglieds-Nr.: 2.047 |
ZITAT <randnotiz>
Zumindest dem letzten Teilsatz möchte ich widersprechen. Es gibt immernoch einige Uni- und Firmennetze, in denen der NS 4 läuft. Somit sind die, die mit ihm surfen, nicht unbedingt selbst schuld. </randnotiz> Da hast zwar recht, aber es wird eine rein private Seite ohne jegliche kommerzielle Absichten, wo hauptsächlich einige Grafiken präsentiert werden. Die sollte man sich im Büro sowieso nicht angucken.. :wink: Wer son Ding zuhause benutzt, ist aber nun wirklich selber schuld. Gibt genug Browser zum kostenlosen Download. Ich befürchte, dass man die großen Grafiken, die auf den Ebenen liegen, im Netscape 4 ohnehin nicht ansehen kann... Kann man bei einer privaten Seite aber in Kauf nehmen, finde ich - bei einer geschäftlichen sicher nicht. Nachtrag zum Containerproblem: mit einer Positionierung durch float geht es doch nicht, klappt zwar im IE, nicht aber im Firefox, da legt sich der rechte Container mit den Grafiken einfach über den anderen, wenn er relativ positioniert wird. Also bleibt es jetzt bei der absoluten Positionierung - scheint das einzige zu sein, das funktioniert. Grüße, Terry |
|
|
|
|
08.04.2004 - 15:12
Beitrag
#16
|
|
|
Kann auf gar keinen Fall einen Videorekorder programmieren! Gruppe: User Beiträge: 210 Mitglied seit: 08.12.2003 Wohnort: Bad Zwischenahn Mitglieds-Nr.: 1.751 |
Hallo Terry,
ich hab aus diesem Thread viel gelernt und möchte Dich jetzt nur zu der Seite beglückwünschen, die mir unheimlich gut gefällt. Gruß Amethyst |
|
|
|
|
08.04.2004 - 18:54
Beitrag
#17
|
|
|
looks good Gruppe: User Beiträge: 43 Mitglied seit: 17.02.2004 Mitglieds-Nr.: 2.047 |
Vielen Dank, Amethyst - dauert aber noch ein Weilchen, bis sie ganz fertig ist - wenigstens steht jetzt das Grundgerüst. War für mich als Anfängerin schon ne harte Nuß - aber dass sogar die Profis noch was lernen konnten... :wink:
Der Rest muss dann "nur noch" geschrieben werden, die Bilder noch angepaßt und schließlich eingefügt werden. Grüße, Terry |
|
|
|
|
08.04.2004 - 20:21
Beitrag
#18
|
|
|
Ausnahme Poster Gruppe: User Beiträge: 150 Mitglied seit: 24.10.2003 Wohnort: Berlin Mitglieds-Nr.: 1.544 |
ZITAT Wer son Ding zuhause benutzt, ist aber nun wirklich selber schuld. Gibt genug Browser zum kostenlosen Download. Wer bewußt NN4 einsetzt, hat seine Gründe. Aktuelle Browser laufen nicht oder nur schwerlich auf älteren Rechnern (nicht jeder hat bzw. braucht GHz-Power) und auf einigen Betriebssystemen gab (bzw. gibt?) es keine wirklichen Alternativen. Und selbst ich benutze hin und wieder Lynx bzw. Opera mit Grafiken und CSS komplett abgeschaltet, wenn mir das ganze Multimedia-Geraffel zuviel wird. Da zeigt sich dann buchstäblich schwarz auf weiß, welche Webseite vernünftig aufgebaut ist und bei welcher nur der Schein trügt.
ZITAT Ich befürchte, dass man die großen Grafiken, die auf den Ebenen liegen, im Netscape 4 ohnehin nicht ansehen kann... Kommt drauf an, im Zweifelsfall testen. Wenn NN4 auch sonst nicht viel kann - mit HTML kommt er recht gut zurecht. Es ist auch ratsam zu testen, ob die Seite ohne Javascript funktioniert ... gerade solche Rollover-Geschichten, die nicht nur reine Effekte darstellen, sind da problematisch (vor allem auch im Hinblick auf die Ladezeit der Seite, da sämtliche Bilder geladen werden, selbst wenn sie nicht sichtbar sind). ZITAT Kann man bei einer privaten Seite aber in Kauf nehmen, finde ich - bei einer geschäftlichen sicher nicht. ACK Bei einer geschäftlichen Seite auf NN4 zu verzichten heißt u. U. auf einen guten Teil des Umsatzes zu verzichten. Wer sich's leisten kann ... Andererseits finde ich aber, daß auch private Seiten so zugänglich wie möglich sein sollten, macht ganz einfach einen besseren Eindruck. Just my 2 cents Gruß n! |
|
|
|
| Google Bot |
Beitrag
#
|
 Google Ads |
|
|
|
|
|
2 Besucher lesen dieses Thema (Gäste: 2 | Anonyme Besucher: 0)
0 Mitglieder:
|
Vereinfachte Darstellung | Aktuelles Datum: 12.05.2025 - 1:47 |