CSS für Mitte + IE workaround für Positionsangabe

  • CSS für Mitte + IE workaround für Positionsangabe

    gesplittet von T-Online Browser(weiche)?
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    [...]wir leben ja in einer Zeit wo es CSS gibt, da braucht kein Mensch mehr Tabellen, also weg damit! Alles schön in <div>'s gepackt, Firefox auf gemacht, sieht schonmal ganz gut aus. Einziges Problem, wie bekomm ich den kram mittig? Ich such bestimmt schon ne Stunde bei SelfHTML rum, stoße auf alle möglichen Atribute, aber nicht auf die Lösung. "text-align: center;" wird beflissen ignoriert, aus lauter Verzweiflung habe ich schon Sachen wie "left: 50% - 360px" versucht, natürlich auch ohne Erfolg. "left: 50%" oder "left: 300px" funktionieren zwar, aber dann sitzt der Content nicht in der Mitte, sondern beginnt ab der Mitte, bzw bei 300px. Das ist nicht so wirklich was ich wollte :(
    Also, blöde Frage Nr.1: Wie bekomme ich ein <div> mit fester breite mittig?

    Nun, immerhin funktioniert das Design an sich noch, Navigation und Fußzeile bleiben wo sie sind, der Rest ist scrollbar. Oder? I-Ex und T-Offline Browser auf gemacht... OhJeh! Na immerhin sind die beiden sich jetzt einig, das Bild is auf beiden gleich: Beide ignorieren Angaben zur Position (ob nun "top: 140px" oder "left: 50%") föllig und klatschen einfach alles untereinander. Dafür sind die Scrollbars jetzt wieder erreichbar, und das Scrolling funzt auch wie es soll. Die Navi bleibt wo sie ist, der Content ist scrollbar, die Fußzeile kommt nie ins Bild, befindet sich geschätzte 500px unter dem Bildschirmrand... Hab ich schon erwähnt das der I-Ex n ganz doller Browser is? Ja oder? Ich mag es wenn ein Browser immer ne Extrawurst braucht! Find ich toll! *kotz*
    Also, blöde Frage Nr.2: Wie bringe ich dem I-Ex bei was Positionsangaben sind? Ich weiß, Browserweiche, aber was krickel ich da rein? Angaben wie "top: 140px" werden wir gesagt einfach ignoriert.

    Vielen Dank schonmal
    Look

  • Ich habe dein Thema mal gesplittet, damit es nicht unübersichtlich wird.

    Hier deine Lösung zu Frage1: Ein div mit fester Breite mittig platziert:

    Quellcode

    1. <div style="margin-left:auto;margin-right:auto;width:200px;border:1px solid #000">test</div>


    Positionsangaben interpretiert der Internet Explorer genau wie der Firefox.
    Was der IE (<7) nicht kann position:fixed. Ist es das was du benötigst? Ansonsten poste mal ein Beispiel.

  • Hm, ok, das hilft mir schonmal ein bischen weiter.
    Dein Beispiel funktioniert zwar iwie nicht so wie ich mir das vorstelle, aber ich hab mir daraus eine Lösung gebastelt die Funktioniert, jedenfalls für die <div>'s mit fester Breite.

    Quellcode

    1. left: 50%; margin-left: -380px;

    Einen <div> habe ich, mit variabler Breite. Hier ist die Breite deshalb variabel, weil sich der Inhalt evtuellen Schriftgößen Änderungen beim User anpassen können soll. Da funktioniert das leider noch nicht.

    Und, ja, ich arbeite mit "position: fixed;", aber auch beim scrollbaren Teil werden die Positionsangaben ignoriert. I-Ex eben...

    Ich will mal sehn, das ich den Quelltext mal irgendwo hochladen kann, vielleicht hilft euch das ja mir zu helfen :)

    Edith sagt sie hätte den HTML und den CSS Quellcode, sowie die bisherige Browserweiche hoch geladen. Letztere erfüllt leider noch nicht wirklich ihren Zwek. Sie sagt auch, ihr sollt euch nicht an den komischen Farben stören, ich hätte das nur so bunt eingefärbt, damit ich leichter sehen könnte wo die einzelnen <div>'s liegen.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Lookbehind ()

  • Dann haben wir die Erklärung doch. Der IE (<7) kann position:fixed nicht.

    Du kannst nun entweder versuchen Workarounds zu bauen oder es lösen indem du die ie7.js per Conditional Comment einbindest
    ie7-js
    A JavaScript library to make MSIE behave like a standards-compliant browser.


    Quellcode

    1. <!--[if lt IE 7]>
    2. <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
    3. <![endif]-->


    Ausführlich wird das ganze hier auf drei Seiten erklärt: artikel.fabrice-pascal.de/posfixedie6/
    Das W3C hat in seiner CSS Empfehlung bei der Positionierung von Elementen[...] auch eine fixe Positionierung vorgesehen. Leider kam diese Art der Positionierung bisher eigentlich nie zum Einsatz, da der Microsofts Internet-Explorer, dieses Attribut leider selbst in Version 6 nicht unterstützt. Microsoft scheint jedoch auf die Aufschreie aus den verschiedenen Webdesign Ecken halbwegs gehört zu haben und der Internet Explorer 7 unterstützt diese Art der Positionierung nun endlich.


    Da auf sehr vielen Windows Systemen noch immer der Internet Explorer 5 oder 6 installiert ist, sollte die Lösung unbedingt auch im beiden Browsern funktionieren.
    Caio Chassot hat mal eine ganz andere Konstruktion ausprobiert, um einen position: fixed Effekt vorzutäuschen.[...]Das Unschöne daran : Leider verwendet sie Microsofteigene Tags und ist somit vor allen Dingen auf Mac Browsern (IE5.x, Safari und Co), sowie Mozilla und Opera nicht einsetzbar.


    Das kleine Paket von Dean Edwards beinhaltet einige in Javascript programmierte Erweiterungen, die verschiedene Fehler des Internet Explorers ausmerzen.

  • Ok, danke!
    Das hilft mir schonmal etwas weiter.
    I-Ex 5 und 6 funktionieren jetzt so wie der FireFox, das is schonmal n gewaltiger Fortschrit. Aber der IE-7 weigert sich wehement jedwede Verbesserung an zu nehmen, selbst wenn ich die IE-8 Erweiterung nehme.

    Quellcode

    1. <!--[if lt IE 8]>
    2. <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
    3. <![endif]-->

    Edith meint, sie wäre auch schon mit einer etwas anderen Lösung zufrieden. Wenn man das hin bekommen könnte, das der IE-7 das Position Fixed komplett ignoriert, und die Kopf(Menü) und Fuß-Leiste einfach mit scrollen würde. Lässt sich das iwie einrichten? Denn das Position Fixed hat mit Browserweiche sogar der IE5 akzeptiert, allerdings war dann die Positionierung der einzelnen Elemente etwas, sagen wir mal abenteuerlich :)

    Dann hab ich noch ein anderes Problem, das Menü bekomm ich einfach nicht zentriert, auch nicht im FireFox oder Opera (eigentlich nirgends). Das Problem dabei ist, das es eine variable Breite haben sollte.

    Quellcode

    1. <div id="Navi">
    2. <a href="../index.htm">NEWS</a> &nbsp;
    3. <a href="band.htm">BAND</a> &nbsp;
    4. <a href="media.htm">MEDIA</a> &nbsp;
    5. <a href="http://www.OWL-Soft.de/Horus/HTML/GB-Script/index.php">GUESTBOOK</a> &nbsp;
    6. <a href="links.htm">LINKS</a> &nbsp;
    7. <b>CONTACT</b>
    8. </div>

    Quellcode

    1. #Navi {
    2. position: fixed;
    3. top: 140px;
    4. margin-left: auto;
    5. margin-right: auto;
    6. font-family: "Times New Roman";
    7. background-color: #0000FF;
    8. }

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Lookbehind ()

  • Spiel das mal zur Verständnis schrittweise durch:

    Das Div ist 100% breit

    Quellcode

    1. #Navi {
    2. border:1px solid #000;
    3. }


    Das DIV schrumpft auf die Breite des Inhalts

    Quellcode

    1. #Navi {
    2. position: fixed;
    3. border:1px solid #000;
    4. }


    Das DIV ist wieder 100% breit:

    Quellcode

    1. #Navi {
    2. width: 100%;
    3. position: fixed;
    4. border:1px solid #000;
    5. }


    und der Inhalt ist mittig:

    Quellcode

    1. #Navi {
    2. width: 100%;
    3. position: fixed;
    4. border:1px solid #000;
    5. text-align:center;
    6. }

  • Wär ja zu schön um wahr zu sein :D
    Das funktioniert zwar im FireFox, aber dafür mag der I-Ex das nicht... Für den hat das <div> zwar auch 100% breite, und der Text ist mittig vom <div>, allerdings fängt das <div> auch erst auf der Mitte den Bildschirms an...
    Maaaaaaaaan! Warum muss eigentlich jedes Microsoft-Produkt irgendwelche Schwierigkeiten machen? Können die nich ein mal was vernünftiges machen?

    Edith meint sie hat es mittels Browserweiche hin bekommen, indem sie einfach nochmal mit margin-left: -100%; den ganzen Kram nach links verrückt hat, nur für den I-Ex versteht sich.

    Ich Danke dir d0nut! Du hast mir sehr geholfen!

    Edit2:
    Eine Sache hätte ich aber gerne noch erklärt, es funktioniert zwar, aber ich wüßte gern warum...

    Quellcode

    1. <div id="Zentreiert">
    2. <div id="Navi">
    3. <a href="../index.htm">NEWS</a> &nbsp;
    4. <a href="band.htm">BAND</a> &nbsp;
    5. <a href="media.htm">MEDIA</a> &nbsp;
    6. <a href="http://www.OWL-Soft.de/Horus/HTML/GB-Script/index.php">GUESTBOOK</a> &nbsp;
    7. <a href="links.htm">LINKS</a> &nbsp;
    8. <b>CONTACT</b>
    9. </div>
    10. </div>

    Die css Datei die das #Zentriert enthielt ist garnicht mehr eingebunden, hab in der Browserweiche eine Andere Datei verlinkt. Will sagen, nirgends in dem verwendeten CSS Teil exestiert ein #Zentriert. Trotzdem, sobald ich das <div> weg nehme, haut er mir das Ding an den rechten Rand. :?:

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Lookbehind ()