nicht angemeldet
DIV-Layout -> Sprungmarken kurios
Hallo Leute!
Ich habe ein DIV-basiertes Seitenlayout erstellt.
Das funktioniert soweit gut. NUR:
Im inhalt-DIV habe ich Sprungmarken (a id="") definiert.
Springe ich diese an, so wird der Inhalt des inhalt-DIVs unter den leisteoben-DIV geschoben. Das dürfte doch eigentlich gar nicht sein, denn der inhalt-DIV fängt erst bei top:76px; an. Warum wird der dann auf top:0px; geschoben? Ich hab doch kein DHTML verwendet.
Hört sich vielleicht komisch an, aber klickt doch bitte auf der Test-Seite mal auf die drei Verweise im inhalt-DIV (Unterpunkt1 -3). (Die Verweise im Menü links gehen nicht, Grafiken sind auch nicht vorhanden zZt.)
Die Test-Datei liegt in
http://www.martin-baluses.de/test.html
das StyleSheet unter
http://www.martin-baluses.de/format.css
Hab ich was übersehen? Wenn ja, was? Ach ja, der Mozilla 1.5 hat das gleiche Problem. Der IE6 nicht, da er eh kein position:fixed kennt.
Grüße und Danke
Martin
-
Hallo,
Hab ich was übersehen? Wenn ja, was? Ach ja, der Mozilla 1.5 hat das gleiche Problem. Der IE6 nicht, da er eh kein position:fixed kennt.
da die Seite immer noch oben anfängt, muss der Abstand irgendwo ausgeglichen werden, z.B. * >#upunkt2{padding-top:76px;}.
Grüsse
Cyx23
-
Hallo Cyx,
Hab ich was übersehen? Wenn ja, was? Ach ja, der Mozilla 1.5 hat das gleiche Problem. Der IE6 nicht, da er eh kein position:fixed kennt.
da die Seite immer noch oben anfängt, muss der Abstand irgendwo ausgeglichen werden, z.B. * >#upunkt2{padding-top:76px;}.
Das kannte ich noch nicht, scheint zumindest ab Opera 7 und frühen Geckos zu funktionieren. Darf ich das auf http://home.t-online.de/home/dj5nu/css-position-fixed.html aufnehmen? Das wäre ja eine der elegantesten Lösungen. Ich baue den Artikel gerade sowieso aus (es ist noch eine sehr alte Version oben). Weißt du, ob Konqueror diese Methode kann? *> würde meines Wissens auch IE/Mac betreffen, der hat aber Probleme mit position:fixed. Zudem interpretiert zumindest MSIE 5.0/Win *>#bla wie #bla, da wäre dann halt das entsprechende Element wie body>#bla angebracht oder eben #bla[id], wenn man IE/Mac ausschließen will.
Mathias
--
[x] Die Entity lästerte Ihro Majestät auf unglaublich infame Art und Weise.-
Hallo Mathias,
da die Seite immer noch oben anfängt, muss der Abstand irgendwo ausgeglichen werden, z.B. * >#upunkt2{padding-top:76px;}.
Das kannte ich noch nicht, scheint zumindest ab Opera 7 und frühen Geckos zu funktionieren. Darf ich das auf http://home.t-online.de/home/dj5nu/css-position-fixed.html aufnehmen? Das wäre ja eine der elegantesten Lösungen.
gerne. Wenn es sich anbietet kannst du ja einen Link auf http://www.lipfert-malik.de/webdesign oder http://www.lipfert-malik.de/webdesign/tutorial/css.html setzen.
Ich baue den Artikel gerade sowieso aus (es ist noch eine sehr alte Version oben). Weißt du, ob Konqueror diese Methode kann? *> würde meines Wissens auch IE/Mac betreffen, der hat aber Probleme mit position:fixed. Zudem interpretiert zumindest MSIE 5.0/Win *>#bla wie #bla, da wäre dann halt das entsprechende Element wie body>#bla angebracht oder eben #bla[id], wenn man IE/Mac ausschließen will.
Muss ich nochmal schauen, soweit ich mich erinnere macht Konqueror es; möchtest du grundsätzlich vermeiden für bestimmte Browser wie den IE 5 nochmal zu korrigieren? body > #nav{position:fixed} und cond. comment für die Win-IE geht natürlich auch.
Sonst habe ich noch neue valide Weichen für IE 4-5:
http://www.lipfert-malik.de/webdesign/tutorial/bsp/kristof-lipfert-ie5-crossover.html
http://www.lipfert-malik.de/webdesign/tutorial/bsp/kristof-lipfert-ie4-b-crossover.htmlGrüße
Kristof-
Hallo,
Weißt du, ob Konqueror diese Methode kann? *> würde meines Wissens auch IE/Mac betreffen, der hat aber Probleme mit position:fixed. Zudem interpretiert zumindest MSIE 5.0/Win *>#bla wie #bla, da wäre dann halt das entsprechende Element wie body>#bla angebracht oder eben #bla[id], wenn man IE/Mac ausschließen will.
Muss ich nochmal schauen, soweit ich mich erinnere macht Konqueror es; möchtest du grundsätzlich vermeiden für bestimmte Browser wie den IE 5 nochmal zu korrigieren?
Ich verstehe nicht, worauf du hinauswillst. Wieso bedarf MSIE 5/Win hinsichtlich des Ausgangsthemas einer Korrektur? Er sollte, was position:fixed angeht, über #bla[id] ausgeschlossen werden können, sodass man ihm wie auch MSIE 6 etwa stattdessen position:absolute zuteilt oder die Boxen fließen lässt. Darüber natürlich mögen natürlich Anpassungen aufgrund des Box-Modells für MSIE 5.x notwendig bzw. ratsam sein, darüber wollte ich aber keine Aussagen machen. Ich sagte lediglich, dass *>#bla keine angemessene Methode ist, um Styles vor MSIE zu verstecken. Das hat mit dem position:fixed-Problem direkt wenig zu tun.
Dementsprechend verstehe ich das von dir verlinkte http://www.lipfert-malik.de/webdesign/tutorial/css.html#BoxBug nicht, es geht ja um den standardkonformen Modus dort:#beispiel { width:320px; height:320px; }
*>#beispiel { width:200px; height:200px; }
<!--[if IE 6]><STYLE>
#beispiel { width:200px; height:200px; }
</STYLE><![endif]-->Ich nehme einmal an, es ist etwa der Fall gemeint, in dem #beispiel zusätzlich padding:60px; erhält und das Element in allen Browsern gleich groß sein soll, ob W3C-Boxmodell oder MSIE-Boxmodell. Was bringt dann diese Vorgehensweise? Für welche Browser sind die Regeln jeweils gedacht? MSIE 5 interpretiert wie gesagt die zweite Regel als ob der Selektor »#beispiel« hieße und macht das Element insgesamt 200 Pixel hoch und breit. Auch Opera und Mozilla wenden diese Styles an, machen die Box aber dem padding entsprechend um 120 Pixel größer. Ebenso MSIE 6. Der Sinn eines Box-Model-Hacks liegt aber (im standardkonformen Modus) darin, MSIE 5 andere Styles als MSIE 6 und kindselektorfähigen Browsern zu geben...?
Mathias
-
Hallo Mathias,
Muss ich nochmal schauen, soweit ich mich erinnere macht Konqueror es; möchtest du grundsätzlich vermeiden für bestimmte Browser wie den IE 5 nochmal zu korrigieren?
Ich verstehe nicht, worauf du hinauswillst. Wieso bedarf MSIE 5/Win hinsichtlich des Ausgangsthemas einer Korrektur? Er sollte, was position:fixed angeht, über #bla[id] ausgeschlossen werden können, sodass man ihm wie auch MSIE 6 etwa stattdessen position:absolute zuteilt oder die Boxen fließen lässt. Darüber natürlich mögen natürlich Anpassungen aufgrund des Box-Modells für MSIE 5.x notwendig bzw. ratsam sein, darüber wollte ich aber keine Aussagen machen. Ich sagte lediglich, dass *>#bla keine angemessene Methode ist, um Styles vor MSIE zu verstecken. Das hat mit dem position:fixed-Problem direkt wenig zu tun.
das ging auch in Richtung ergänzende Angaben für IE 5, wenn statt position:fixed ein scrollbares Div für die IE eingesetzt wird, oft dürfte da aber eine gleiche Behandlung von 5 und 5.5 ausreichen. Ansonsten bietet sich body>.. und extra Styles für die IE per conditional comment an.
Dementsprechend verstehe ich das von dir verlinkte http://www.lipfert-malik.de/webdesign/tutorial/css.html#BoxBug nicht, es geht ja um den standardkonformen Modus dort:
[..]
Ich nehme einmal an, es ist etwa der Fall gemeint, in dem #beispiel zusätzlich padding:60px; erhält und
Danke für den Hinweis, da hatte wohl die Korrektur für IE 4-5 gefehlt. Muss ich vorsorglich nochmal die Testdatei raussuchen.
Wie schon angenommen wird *> von Konqueror (auch von Galeon) gelesen.
Grüsse
Cyx23
-
-
-
-
ite immer noch oben anfängt, muss der Abstand irgendwo ausgeglichen >werden, z.B. * >#upunkt2{padding-top:76px;}.
Danke, guter Tip, klappt.
Aber kann man dafür auch eine Klasse oder anderes Konstrukt formulieren? Für jeden ID, die ja pro Dokument auch unterschiedlich heißen, wär das ziemlich heftig, alles anzugeben.
Mir fällt da bloß grad nix ein, wie man das beschreiben könnte.
Also: jede Sprungmarke im DIV Inhalt soll den inneren Abstand von oben 76px haben.??? oder?-
Hallo,
Aber kann man dafür auch eine Klasse oder anderes Konstrukt formulieren? Für jeden ID, die ja pro Dokument auch unterschiedlich heißen, wär das ziemlich heftig, alles anzugeben.
Mir fällt da bloß grad nix ein, wie man das beschreiben könnte.
Also: jede Sprungmarke im DIV Inhalt soll den inneren Abstand von oben 76px haben.??? oder?Deine Sprungmarken kommen immer in Überschriften vor, sie haben zudem ein id-Attribut. Das sind zwei Merkmale, über die du sie mit CSS-Selektoren ansprechen kannst.
Wenn deine Anker nur in dieser Form (<h2><a name="bla" id="bla"></a>...</h2>) vorkommen, würde »a[id]« passen, genauer »h1 a[id], h2 a[id]«, was eben alle besagten Elemente anspricht.
Die Regel, die position:fixed; beinhaltet, müsstest du entsprechend aufbauen (vielleicht div#leisteoben {position:absolute; ...} und #leisteoben[id] {position:fixed; ...}), sodass es über den Attributselektor von MSIE/Win und MSIE/Mac versteckt wird, weil die position:fixed nicht oder nur fehlerhaft können.Mathias
--
[x] Die Entity lästerte Ihro Majestät auf unglaublich infame Art und Weise. -
Hallo,
Danke, guter Tip, klappt.
fein :-)
Aber kann man dafür auch eine Klasse oder anderes Konstrukt formulieren? Für jeden ID, die ja pro Dokument auch unterschiedlich heißen, wär das ziemlich heftig, alles anzugeben.
Mir fällt da bloß grad nix ein, wie man das beschreiben könnte.
Also: jede Sprungmarke im DIV Inhalt soll den inneren Abstand von oben 76px haben.??? oder?z.B.:
* > .upunkt{padding-top:76px;}
und
<h2><a id="upunkt2" class="upunkt">Unterpunkt2</a>
(oder <div class..)Eigentlich habe ich zuerst wie Mathias überlegt die Struktur mit den Überschriften zu nutzen und im HTML-Code sparsamer zu sein und bei dem Beispiel ohne Klassen auszukommen. Doch letztendlich scheint mir eine Lösung per Klasse auch stimmig und dazu übersichtlicher.
Grüsse
Cyx23
-
Hallo,
z.B.:
* > .upunkt{padding-top:76px;}
und
<h2><a id="upunkt2" class="upunkt">Unterpunkt2</a>Das a-Element sollte auf jeden Fall keinen Inhalt haben, da sonst der Inhalt darüber überlappt wird. Haben die h2-Überschriften der Testseite beispielsweise text-align:left statt center, lassen sich die Links zu den Ankern nicht anklicken. Zudem wirkt natürlich a:hover auf die a-Elemente, sodass der Bereich gleichzeitig eine Hintergrundfarbe erhält:
<img src="http://mitglied.lycos.de/molily/posfixed.png" border="0" alt="">
Mathias
--
[x] Die Entity lästerte Ihro Majestät auf unglaublich infame Art und Weise.-
Ja, das ist mir auch aufgefallen, daß dann der Padding-Bereich ausgeweitet wird. Habe den Inhalt aus dem <a> nun entfernt. Jetzt klappt's wunderbar.
Allen Leuten herzlichen Dank!
Grüße
Martin
-
-
-
-