IPB

Willkommen, Gast ( Anmelden | Registrierung )

> Zentrierung von Div-Containern....*seufz*
Terry
Beitrag 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
Go to the top of the page
 
+Quote Post
 
Start new topic
Antworten
Terry
Beitrag 07.04.2004 - 15:24
Beitrag #2


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:
Go to the top of the page
 
+Quote Post

Beiträge in diesem Thema


Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 12.05.2025 - 1:25

taschenkalender
expertise-panel IPS Driver Error

IPS Driver Error

There appears to be an error with the database.
You can try to refresh the page by clicking here