zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden margin-top im IE8 und Firefox nicht richtig dargestellt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 25.11.2012, 18:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von toniken Beitrag anzeigen
Nein, es werden in dem Buch 3 Varianten von XHTML 1.0 empfohlen. Das XHTML 1.1 muss mir mal irgendein Editor vorgeschlagen haben und ich habe es übernommen, weil ich damit besonders "modern" sein wollte. Warum ist es nicht zu empfehlen?
Wenn du XHTML1.1 über deine Dokumente schreibst heißt das, dass du bewusst nicht abwärtskompatibel sein willst. D.h., dass du deine Dokumente auch mit dem entsprechenden MIME-Type ausliefern müsstest.[1] Jeder noch so kleine Tippfehler würde in den Browsern dann nur noch zu einer Fehlermeldung führen. Ältere IEs können damit überhaupt nichts anfangen.
Dass das nicht der richtige Ansatz ist für das Web, wie wir es kennen, kann man inzwischen als Konsens betrachten. "Modern" wäre HTML5, mit XHTML1.1 bist du eher hinten dran.

Nimm für den Anfang XHTML 1.0, so wie es in dem Buch verwendet wird. Und beachte die Kompatibilitätsrichtlinien. Das Link-Element im Head ist ein "leeres Element".


[1]Im Moment lieferst du dein Dokument als text/html aus.


Zitat:
Auch hier kennst Du das Buch besser als ich.
Nö, aber ich habe schon ein paar Dropdowns gesehen --und konnte mir nicht vorstellen, dass die Autoren deines Buches etwas anderes als ein weit verbreitetes Vorgehen verwenden.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 25.11.2012, 18:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von toniken Beitrag anzeigen
..aber die position:relative; bei #main und #navigation und den z-index bei #navigation braucht es schon - auch, wenn ich, wie jetzt, die Sublisten position:absolute; gesetzt habe
Nein.
Relative Positionierung ist nur sinnvoll für die li-Elemente der ersten Ebene. Warum, wird sicher in deinem Buch erklärt (ich strapaziere meine Kristallkugel gerade ziemlich).
Ansonsten wirf sie überall raus.

Zitat:
- zu diesem Ergebnis komme ich jedenfalls nach meinem Ausprobieren.
Und warum liest du nicht nach, wie es in deinem Buch gemacht wird?
Trial&Error funktioniert nicht bei CSS.

Zitat:
Lediglich den negativen Wert für top in #main als auch die Angabe von height für #navigation kann ich mir nun sparen,
Unbedingt weg damit. Pfusch!

Einer der wichtigen Hinweise, die ich dir oben bereits gegeben habe, lautet:
Zitat:
Sorge dafür, dass die Navigation nicht auf eine Nullhöhe zusammenfällt, d.h: Floate die li-Element und sorge dafür, dass das ul-Element diese einschließt.
Auch darüber kannst du dich bestimmt in deinem Buch informieren, ansonsten in unseren FAQ. [Eine (sinnvolle!) height-Angabe wäre möglich, ist aber nicht der beste Weg.]

Bitte nimm dir die Zeit, dir die Grundlagen zu erarbeiten.

Geändert von fricca (25.11.2012 um 18:30 Uhr) Grund: Puh, jede Menge Tippfehler ... Sorry.
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 25.11.2012, 19:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.11.2012
Beiträge: 8
toniken befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Und warum liest du nicht nach, wie es in deinem Buch gemacht wird?
Leider ist das script nur sporadisch erklärt und viele Code-Zeilen bleiben unerläutert. Habe aber gerade entdeckt, dass bei der nochmaligen Auflistung des Gesamtscripts für #main clear:left gesetzt wurde (Clear wird in dem Buch nur am Ende in der CSS-Referenz erwähnt und wird ansonsten anscheinend nicht erläutert - steht jedenfalls nicht im Stichwortverzeichnis). Das tauchte im Script mit den Erläuterungen nicht auf. Konnte jetzt tatsächlich sogar alle position:relative; entfernen. Nur das die Main-Box jetzt wieder am unteren Rand der Menüleiste klebt und auf kein margin-top oder top reagiert.
Ist im Buch auch nicht nötig zu behandeln, da der main-text denselben Hintergrund hat, wie die Gesamtseite und der Abstand zur Menüleiste über padding gelöst wird.
Habe also daraufhin #main nochmal in ein Extra-div gepackt und dort ein padding angegeben, um #main etwas tiefer rutschen zu lassen.

Zitat:
Sorge dafür, dass die Navigation nicht auf eine Nullhöhe zusammenfällt, d.h: Floate die li-Element und sorge dafür, dass das ul-Element diese einschließt.
Hatte ich bereits beherzigt und getan - nur nicht explizit erwähnt.

Das gesamte Problem entstand dadurch, dass im Buch alles am linken Rand ist und ich es auf meiner Seite zentrieren wollte und ich mich in meinen Versuchen immer weiter vom Buch entfernt habe. Vielleicht steckte der teufel ja in dem vergessenem clear:left.
Mit Zitat antworten
  #14 (permalink)  
Alt 25.11.2012, 19:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von toniken Beitrag anzeigen
Nur das die Main-Box jetzt wieder am unteren Rand der Menüleiste klebt und auf kein margin-top oder top reagiert.
Das liegt am Clear. Margin ist (fast) immer unwirksam, wenn ein Element Clear-Wirkung hat.
top ist ohne Positionierung sowieso wirkungslos.

Zitat:
Habe also daraufhin #main nochmal in ein Extra-div gepackt und dort ein padding angegeben, um #main etwas tiefer rutschen zu lassen.
Trial&Error... [Du hast übrigens nicht nur ein oberes Padding angegeben. Absicht?]

Zitat:
Hatte ich bereits beherzigt und getan - nur nicht explizit erwähnt.
Was hast du getan?
Das ul-Element schließt die floatenden li-Elemente noch immer nicht ein. Nutz die Entwicklerwerkzeuge deines Browsers. Schau nach, welche Höhe für das ul-Element angezeigt wird.
Welche Methoden zum Einschließen von Floats sind in deinem Buch vorgestellt?

Zitat:
Das gesamte Problem entstand dadurch, dass im Buch alles am linken Rand ist und ich es auf meiner Seite zentrieren wollte und ich mich in meinen Versuchen immer weiter vom Buch entfernt habe. Vielleicht steckte der teufel ja in dem vergessenem clear:left.
Du hast es mit diversen, nicht leicht verständlichen Konzepten in CSS zu tun (Collapsing Margins, Float, Clear, Positionierung ...). Da reicht dein Buch wohl nicht aus.

Wenn du tiefer einsteigen willst: Siehe meine Signatur. Wir erläutern all das, worauf du hier gestoßen bist. Das lässt sich aber nicht mal eben schnell in einem Forum wiedergeben.
Mit Zitat antworten
  #15 (permalink)  
Alt 26.11.2012, 21:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.11.2012
Beiträge: 8
toniken befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Du hast übrigens nicht nur ein oberes Padding angegeben. Absicht?
Nein, es war mir eher unwichtig, aber du hast recht, wenn ich genauer darüber nachdenke, ist padding-top die bessere Wahl.
Zitat:
Das ul-Element schließt die floatenden li-Elemente noch immer nicht ein. Nutz die Entwicklerwerkzeuge deines Browsers. Schau nach, welche Höhe für das ul-Element angezeigt wird. Welche Methoden zum Einschließen von Floats sind in deinem Buch vorgestellt?
Bis gestern war ich noch der Auffassung, dass ich die Aufgabe erfüllt hätte, wenn ich die <li> floate, dem #main ein clear zuordne und der #navigation eine feste Breite verpasse. Aber du hast mich eines Besseren belehrt.
Zunächst muss ich meine Anschuldigung zurücknehmen, clear würde in meinem Buch nicht behandelt, denn es wird sehr wohl im Zusammenhang mit float erklärt - tauchte eben nur nicht im Stichwortverzeichnis auf. Es ist schon eine Weile her, als ich das Buch von vorne bis hinten Schritt für Schritt durchgegangen bin und ich habe damals wohl auch nicht alles verstanden. Man muss so ein Buch nach einer gewissen Zeit wohl noch einmal lesen.
Nun, das Umschließen habe ich nun (glaube ich) verstanden, nachdem ich mir gestern Abend noch die entsprechende Stelle auf der Internetseite von LittleBoxes von Peter Müller durchgelesen habe (ein Buch, dass Du auch schon in einem anderen Thread, wie ich gelesen habe, zur Lektüre empfohlen hast).
Um auf Deine Frage zurückzukommen: In meinem Buch wird zunächst, NACH (nicht wie bei Peter Müller am Ende innerhalb) des umschließenden Divs eine <hr> eingefügt und diese gecleart. Die <hr> wird auch nicht ausgeblendet.
Weiter unten wird dann auch noch die overflow:hidden-Methode erklärt, aber in dem Zusammenhang, dass sonst die Hintergrundfarbe des umfließenden Textes nicht das ganze <div> umfasst, wenn das gefloatete Image aus dem <div> herausragt. Für die anderen beiden Methoden, die Peter Müller angibt, sind in dem Buch Verweise ins Internet angegeben.
In dem Dropdown-Menü-Beispiel aus meinem Buch wird nichts umschlossen, außer dass dem #main ein clear zugeordnet wird, aber auch das wird nur stillschweigend am Ende in das Script eingefügt.
Um meine floats nun zu umschließen, habe ich mich für die overflow:hidden-Methode entschieden.
Zitat:
Wenn du tiefer einsteigen willst: Siehe meine Signatur. Wir erläutern all das, worauf du hier gestoßen bist. Das lässt sich aber nicht mal eben schnell in einem Forum wiedergeben
Ja - ich habe auch schon in Deinem online-Einsteigerkurs geblättert.
Ich denke, Du bist eine gute, wenn auch strenge Lehrerin. Du sagst nicht einfach nur vor, sondern zeigst Wege auf, damit der Schüler selbst die Lösungen findet und auch finden muss. Fehler, die der Schüler auf diese Art korrigiert bekommt, macht er sicher nicht nochmal. Ich bin selber Lehrer und weiß das zu schätzen. Ich war gestern abend fix und alle nach soviel Input, und habe aber an diesem einen Tag wohl mehr verstanden, als vorher durch Wochen von Buchlektüre.
Mit Zitat antworten
  #16 (permalink)  
Alt 26.11.2012, 22:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von toniken Beitrag anzeigen
Bis gestern war ich noch der Auffassung, dass ich die Aufgabe erfüllt hätte, wenn ich die <li> floate, dem #main ein clear zuordne und der #navigation eine feste Breite verpasse.
So wird nur #main unter die Floats verschoben; das ul-Element bleibt weiterhin auf Null.
Nebenbei: In IE <= 7 werden die Floats tatsächlich eingeschlossen, weil die Breitenangabe hasLayout auslöst.
Lesestoff: Über hasLayout ? das Konzept des hasLayout im IE/Win | Deutsche Übersetzung (Achtung, keine leichte Kost. Nur noch relevant für IE <= 7.)

Zitat:
Um auf Deine Frage zurückzukommen: In meinem Buch wird zunächst, NACH (nicht wie bei Peter Müller am Ende innerhalb) des umschließenden Divs eine <hr> eingefügt und diese gecleart.
So werden wiederum die Floats nicht von ul eingeschlossen, nur der nachfolgende Inhalt unter die Floats verschoben.
Ein hr-Element innerhalb der ul ist aber nicht möglich, da ul nur li enthalten darf.

Zitat:
Weiter unten wird dann auch noch die overflow:hidden-Methode erklärt, aber in dem Zusammenhang, dass sonst die Hintergrundfarbe des umfließenden Textes nicht das ganze <div> umfasst, wenn das gefloatete Image aus dem <div> herausragt.
Das ist es eben, was mit "Einschließen" von Floats gemeint ist. Wenn ein Element die Floats nicht einschließt, sieht man den Hintergrund des Elements nicht, weil es auf Nullhöhe zusammenfällt. (Dazu Punkt 2 der FAQ)

Zitat:
Um meine floats nun zu umschließen, habe ich mich für die overflow:hidden-Methode entschieden.
Das ist kritisch in Verbindung mit einem Dropdown-Menü -- schließlich sollen überstehende Inhalte nicht abgeschnitten werden.
Bei dir wird nur deshalb nichts abgeschnitten, weil die Liste nicht Containing Block (noch so ein nicht einfaches Konzept) der abs. pos. Sublisten ist.
Sobald du die li-Elemente der ersten Ebene oder das ul relativ positionierst, siehst du nichts mehr von deinen Dropdowns.
Wenn du dein Menü auch für IE7 tauglich machen willst, wirst du diese relative Positionierung brauchen -- damit du Positionsangaben für die abs. pos. Sublisten machen kannst. Denn jetzt hast du wieder die Situation wie am Anfang: Du vertraust darauf, dass die Browser die abs. pos. Elemente an die richtige Stelle setzen. Das kann klappen, muss aber nicht.

Lange Rede: In deinem Fall wäre das sog. EasyClearing, angewendet auf ul, eine passende Methode zum Einschließen der Floats.

Zitat:
Ich denke, Du bist eine gute, wenn auch strenge Lehrerin. Du sagst nicht einfach nur vor, sondern zeigst Wege auf, damit der Schüler selbst die Lösungen findet und auch finden muss. Fehler, die der Schüler auf diese Art korrigiert bekommt, macht er sicher nicht nochmal. Ich bin selber Lehrer und weiß das zu schätzen. Ich war gestern abend fix und alle nach soviel Input, und habe aber an diesem einen Tag wohl mehr verstanden, als vorher durch Wochen von Buchlektüre.
Bingo! Danke, dass du das so siehst. Wirklich, ich freu mich darüber. So macht es Spaß, zu helfen.
[Der absolut überwiegende Teil der Fragenden beschwert sich und will fertige Lösungen, aber bitte sofort.]

An deinem Beispiel kann man wunderbar sehen, warum CSS wirklich nicht einfach ist. Nur eine Menüzeile und ein Inhaltsbereich. Und trotzdem muss man man so viele CSS-Konzepte kennen, die man nicht intuitiv durch "Rumprobieren" begreifen kann.
Mit Zitat antworten
Antwort

Stichwörter
liste, margin-top, margin:auto, position:absolute

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 19:29
Grafiken je nach Zustand Visu CSS 14 07.10.2009 19:28
Browser Zoom - Divs vergrößern sich nicht mit mathias81 CSS 19 04.08.2009 08:58
Untermenü im IE nici CSS 10 22.06.2009 21:19
Darstellung in Firefox und IE unterschiedlich. Boxen verschoben usw. hss CSS 4 29.06.2007 21:54


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:21 Uhr.