float problem, einfach zum Verzweifeln.

    Hallo,

    nach langem Kampf mit Positionierungen habe ich es endlich hinbekommen, dass die gewünschte Seite korrekt angezeigt wird, sogar im IE. Sie sieht so aus :

    http://www.learn-german-thoroughly.de/centerproblem_trial.php

    Da ich Anfänger bin, war das für schon ein kleiner Erfolg. Ich kann ihn aber nicht genießen, denn Safari für Windows verschiebt die Blöcke im ersten div, ein furchtbares Durcheinander!

    Darufhin habe ich stundenlang verschiedene Sachen probiert und gelesen und fand, dass ich mittels Variation von "position" (rel, stat., abs.) das Problem lösen kann. Es funzt jetzt im Safari.

    Kernproblem: wenn ich den code für Safari "repariere", machen die anderen Browser ein Durcheinander. "Re-repariere" ich das sind alle Browser glücklich, auch IE, aber Safari spinnt.
    Weiß nicht mehr was ich noch versuchen soll. Habe auch schon den CSS code validieren lassen (w3), es heißt dort ‚Herzlichen Glückwunsch, alles gut‘.

    Nebenproblem: Nur bei Opera ausschließlich hat die Navigationsleiste oben ein Eigenleben. Beim öffnen der Seite ist sie nicht zentriert. Aber wenn man mit der Maus drauf geht, o Wunder, zentriert sie sich korrekt und hält dann auch brav die Stellung.
    Bin sehr dankbar für alle Ideen und Ratschläge!

    Lass zunächst wieder alle position-Angaben weg, weil sie nicht nötig sind.
    Verzichte ebenso auf das veraltete

    Code
    <div align="center"


    und behebe noch den hier genannten zweiten Fehler: http://validator.de.selfhtml.org/validate
    Zentriere die Seite dagegen so wie hier beschrieben:
    http://www.ohne-css.gehts-gar.net/0001.php

    Wenn das nichts nützt, poste nochmal einen Link mit diesen Anpassungen.

    Zwischenbericht:

    Ich habe, sejumas Rat folgend, alle <div lign:"center" id:"blabla"> geändert in <div id:"blabla>, also die 'align center' herausgenommen.

    Außerdem habe ich die Positionsangaben rel./stat./abs. herausgenommen, allerdings mit Ausnahme der Angabe "fixed" im headwrapper. Diese erschien mir notwendig, denn sonst verschwindet ja die Navigatiosleiste wenn man nach unten srollt.

    Habe dann noch die vom "Validome" vorgeschlagene Korrektur durchgeführt, mit dem Ergebnis, dass dieser jetzt zufrieden ist, document is valid.

    Ergebnis all dessen: Ich sehe keines. Die Seite sieht aus wie vorher, nämlich so:

    http://www.learn-german-thoroughly.de/centerproblem_trial.php (Ja das ist die geänderte Version)

    Daraus schließe ich, dass die Positionsangaben in der Tat wohl überflüssig waren, wie sejuma sagte. Auch schien das 'align center Unsinn gewesen zu sein, denn die Zentrierung ist nach wie vor erhalten.

    Aber die beiden Probleme bestehen nach wie vor. Viel Browser zeigen das gleiche korrekte Bild, Safari dagegen zeigt folgendes Durcheinander: siehe screenshot.

    Hoffe sehr auf Eure Ideen. Danke!

    Hallelujah! :)

    Das war ein großer Schritt vorwärts!

    In der Tat ist das schlimmste Problem, so scheint es jedenfalls im Moment, gelöst. Dank an sejuma, der Tausch der Reihenfolge w.o.a. hat funktioniert. Den Browsern die ohnehin glücklich waren war es egal, und der Safari ist jetzt auch nicht mehr beleidigt.

    Es gibt noch andere kleine Probleme, die ich allerdings selbstständig in den Griff zu bekommen hoffe.

    Mysteriös erscheint mir aber immer noch das erwähnte Nebenproblem, das nur bei Opera aufzutreten scheint (immernoch):


    Auf der Seite sind diverse Divs untereinander zentriert, alle gleich breit. Öffne ich die Seite in Opera, dann ist die Navigationsleiste nicht in Flucht mit dem Rest. Sie ist nach rechts versetzt, nur ein bißchen zwar, aber doch genug um den Gesamteindruck total zu verderben. Sobald man aber mit der Maus drüber geht (ohne zu klicken), springt die Leiste in die richtige Position und bleibt dann zum Glück auch dort. Als würde der Code erst bei Mauskontakt gelesen.

    Was meint Ihr, soll ich einfach mal gegen die Kiste treten? Bessere Ideen?

    Das ist jetzt die bisher letzte Version:

    http://www.learn-german-thoroughly.de/centerproblem_trial.php

    Falls jemand die Seite mit einem anderen Browser öffnet als Opera/Firefox/Safari/IE, öffnet sie bei Euch 'normal'?

    Nochmals Dank an sejuma.

    Versuch's mal damit:

    Code
    #menu {
font-size:13px;
width: 840px;
margin: 0 auto;
padding-top: 15px;
text-align: center;
}

    Dann mach dich mal noch dran, deinen Code insgesamt abzuspecken. Er wird dadurch übersichtlicher und somit weniger fehleranfällig.
    Auf manche divs kannst du verzichten.
    Wenn du einmal mit einem allumfassenden #wrapper eine horizontale Zentrierung vornimmst, kannst du dir das im weiteren Verlauf für andere Elemente sparen.

    So sind z.B. #headwrapper und #fixedwrapper unnötig. Abstände kannst du auch mit margins bei den anderen Elementen erreichen.
    Auch #main ist überflüssig.

    Aber keine Bange: das sind so typische Anfängerfehler, die anfangs auch ich gemacht habe.
    Weniger ist mehr. Versuche also immer, mit so wenig wie möglich divs auszukommen. Das erhöht wie gesagt den Überblick.