nicht angemeldet
Problem mit Ankernavigation in CSS-Layout
0 
Der Martin
0 0 Der Martin
0 0 Der Martin
0 0 Der Martin
0
Problem mit Ankernavigation in CSS-Layout
Hallo Forum,
ich habe mittels CSS ein Layout, das im Kopf ein Banner-DIV (width=100%), darunter ein DIV für die Navigation, daneben eines für den Inhalt (feste Pixelwerte für width) hat. Die DIVs sind absolut positioniert.
Direkt nach dem Body-Tag habe ich außerhalb der DIVs einen Anker (name=top) eingefügt, um aus längeren Listen an den Seitenanfang zurückspringen zu können.
Im Content-DIV sind Absätze zusätzlich mit Ankerlinks versehen, um diese direkt anspringen zu können.
Soweit zum Seitenaufbau, nun zum Problem:
Die Anker im Inhaltsbereich sind aus der Seite problemlos anzuspringen, aus anderen Seiten oder auch direkt klappt's oder auch nicht. Das sieht dann so aus, als springe er zunächst den richtigen Anker an, lädt dann die Bannergrafiken nach und kehrt zum Seitenanfang zurück. Passiert im Safari und IE 6, von lokal wie auch von einem Webserver. Nach einer Weile (und reichlich Refreshs) landet er dann immer, wo er soll.
Ein Workaround wäre, Ihn via JavaScript window.scrollTo(x,y) an die richtige Stelle zu bringen, aber gerade das y läßt sich wohl nur im Netscape über die y-Eigenschaft der Elemente des anchors-Arrays ermitteln.
Der IE kriegt es zusätzlich partout nicht auf die Reihe, den "top"-Anker anzuspringen; statt zum Seitenanfang zurückzukehren, bleibt er, wo er ist, selbst, wenn ich den Anker in das Banner-DIV packe. Hier konnte ich mir mit einem window.scrollTo(0,0) helfen, aber toll ist das nicht gerade.
Hat irgendwer eine Idee, woran das liegen kann.
-
Hallo,
[...] Die DIVs sind absolut positioniert.
warum das? Das müsste doch nicht sein.
Die Anker im Inhaltsbereich sind aus der Seite problemlos anzuspringen, aus anderen Seiten oder auch direkt klappt's oder auch nicht. Das sieht dann so aus, als springe er zunächst den richtigen Anker an, lädt dann die Bannergrafiken nach und kehrt zum Seitenanfang zurück.
Zum Safari kann ich da nichts sagen, aber der IE tut sich mit Ankern im Dokument oft schwer. Ist die Seite bereits geladen, dann kriegt er's meist gebacken. Wenn er aber die Seite erst neu laden muss, findet er den Anker oft nicht. Für mich sieht es so aus, als durchsuche er das Dokument nach dem Zielanker, *bevor* es überhaupt geladen ist.
Oder hast du ein scrollbares div und erliegst dem Irrtum, du könntest das div-Element mit einem Anker an die gewünschte Stelle scrollen? Das geht nämlich nicht.
Nach einer Weile (und reichlich Refreshs) landet er dann immer, wo er soll.
Ja, so kenne ich das Verhalten auch. Eine Lösung allerdings nicht. :(
Der IE kriegt es zusätzlich partout nicht auf die Reihe, den "top"-Anker anzuspringen; statt zum Seitenanfang zurückzukehren, bleibt er, wo er ist,
Ups, das ist mir neu. Das hat bisher immer funktioniert.
Wo kann man sich das Problemkind mal online ansehen?So long,
Martin--
Idealismus wächst mit der Entfernung zum Problem.-
Vielen Dank für die rasche Antwort!
Hallo,
[...] Die DIVs sind absolut positioniert.
warum das? Das müsste doch nicht sein.
Leider schon, da die DIVs im Fenster umbrechen, wenn das Fenster zu klein wird, um sie nebeneinander darzustellen. Das Problem tritt im übrigen aber auch bei default-mäßiger Positionierung auf (mit Float-Anweisungen und den entsprechenden Margins, um die DIVs auf Abstand zu halten).
Die Anker im Inhaltsbereich sind aus der Seite problemlos anzuspringen, aus anderen Seiten oder auch direkt klappt's oder auch nicht. Das sieht dann so aus, als springe er zunächst den richtigen Anker an, lädt dann die Bannergrafiken nach und kehrt zum Seitenanfang zurück.
Zum Safari kann ich da nichts sagen, aber der IE tut sich mit Ankern im Dokument oft schwer. Ist die Seite bereits geladen, dann kriegt er's meist gebacken. Wenn er aber die Seite erst neu laden muss, findet er den Anker oft nicht. Für mich sieht es so aus, als durchsuche er das Dokument nach dem Zielanker, *bevor* es überhaupt geladen ist.
Oder hast du ein scrollbares div und erliegst dem Irrtum, du könntest das div-Element mit einem Anker an die gewünschte Stelle scrollen? Das geht nämlich nicht.
Nein, die DIVs sind sämtlich nicht scrollbar.
Nach einer Weile (und reichlich Refreshs) landet er dann immer, wo er soll.
Ja, so kenne ich das Verhalten auch. Eine Lösung allerdings nicht. :(
Tja, muss man halt auf eine entsprechend schnelle Leitung auf Seiten des Surfenden hoffen...
Der IE kriegt es zusätzlich partout nicht auf die Reihe, den "top"-Anker anzuspringen; statt zum Seitenanfang zurückzukehren, bleibt er, wo er ist,
Ups, das ist mir neu. Das hat bisher immer funktioniert.
Wo kann man sich das Problemkind mal online ansehen?Die Links mit Ankerreferenz findest Du im Text (jazz, rock, cover) auf der Seite www.jochen-hafner.de/final_schlagzeuger.htm gehen auf die Seite final_referenzen.htm, wo das Problem mit dem Link auf den Seitenanfang auftaucht. JavaScript abschalten, sonst umgeht er das wie beschrieben via window.scrollTo(0,0).
Und bitte keine Kommentare über das Layout - Kunde ist König!
So long,
MartinVielen Dank!
-
Hallo,
Der IE kriegt es zusätzlich partout nicht auf die Reihe, den "top"-Anker anzuspringen; statt zum Seitenanfang zurückzukehren, bleibt er, wo er ist,
Ups, das ist mir neu. Das hat bisher immer funktioniert.
Wo kann man sich das Problemkind mal online ansehen?
http://www.jochen-hafner.de/final_referenzen.htmoh, was sehe ich da? Wenn ich mich recht erinnere, hat a in XHTML kein name-Attribut. Stattdessen kannst du ein beliebiges Element über seine ID als Sprungziel angeben. Lass den "nach oben"-Link doch zum Beispiel auf href="#banner" verweisen, die ID ist sowieso vergeben.
Und bitte keine Kommentare über das Layout - Kunde ist König!
Okay, dann behalte ich mein Lob für mich. *schmoll*
Nee, im Ernst: Die Gestaltung und auch die Farbkomposition gefällt mir gut. Aber du solltest vielleicht noch eine Hintergrundfarbe für body festlegen - oder den momentan weißen Hintergrund deiner Grafiken transparent machen. Das sieht sonst blöd aus, wenn am Rand der Grafik eine Kante von Weiß zur Browser-Hintergrundfarbe zu sehen ist.Ciao,
Martin--
Es gibt Tage, da gelingt einem einfach alles.
Aber das ist kein Grund zur Sorge; das geht vorbei.-
Hallo,
oh, was sehe ich da? Wenn ich mich recht erinnere, hat a in XHTML kein name-Attribut. Stattdessen kannst du ein beliebiges Element über seine ID als Sprungziel angeben. Lass den "nach oben"-Link doch zum Beispiel auf href="#banner" verweisen, die ID ist sowieso vergeben.
Danke für den Tipp. Ich habe jetzt die Abschnitte in SPANs mit entsprechender ID verpackt. Solltest Du gerade Zugriff auf den IE haben, schau doch bitte noch mal drüber, bei mir tut's das jedenfalls.
Wo kann ich das konkret nachschlagen? SelfHTML lässt sich in der Referenz ja nicht so wirklich über die XHTML-Kompatibilität der Attribute aus.
Und bitte keine Kommentare über das Layout - Kunde ist König!
Okay, dann behalte ich mein Lob für mich. *schmoll*
Nee, im Ernst: Die Gestaltung und auch die Farbkomposition gefällt mir gut. Aber du solltest vielleicht noch eine Hintergrundfarbe für body festlegen - oder den momentan weißen Hintergrund deiner Grafiken transparent machen. Das sieht sonst blöd aus, wenn am Rand der Grafik eine Kante von Weiß zur Browser-Hintergrundfarbe zu sehen ist.Oh, ja, die Hintergrundfarbe muss ich noch anpassen... soll ja nicht grau sein, sondern weiß.
Und was das Layout angeht, so habe ich persönlich einen anderen Geschmack, aber ok.
-
Hi,
oh, was sehe ich da? Wenn ich mich recht erinnere, hat a in XHTML kein name-Attribut. ...
Danke für den Tipp. Ich habe jetzt die Abschnitte in SPANs mit entsprechender ID verpackt. Solltest Du gerade Zugriff auf den IE haben, schau doch bitte noch mal drüber, bei mir tut's das jedenfalls.hm, bei mir leider noch nicht (momentan IE6SP1/Win2k). Anklicken der Links bringt keine Wirkung. Da muss also noch ein anderer Wurm drin sein, der mir aber leider nicht auffällt.
Was mich außerdem irritiert: Setze ich den Cursor in die Adresszeile, wenn der Anker #banner schon hintendran steht, und drücke dann die Enter-Taste, dann passiert auch *gar nichts*. Der Cursor bleibt in der Adresszeile stehen, als ob der IE das Drücken der Enter-Taste ignoriert.
Bei den übrigen ID-Ankern (z.B. #rock) ist das Verhalten ähnlich - der Cursor bleibt auch in der Adresszeile im Edit-Modus stehen, aber das Browserfenster scrollt immerhin zum angegebenen Anker.
Sehr merkwürdig, das ganze.Das mit den spans ist zwar grundsätzlich eine Idee - aber warum gibst du die ID nicht den Bildern, die du als Teilüberschriften verwendest? Oder noch besser, warum zeichnest du die Bilder -wenn sie schon eine Überschrift darstellen- nicht mit einem <hX> drumherum aus? Deine span-Lösung ist nämlich so nicht valid, da span als Inline-Element keine Blockelemente enthalten darf, die Verschachtelung mit den darin liegenden p-Elementen wäre deshalb unzulässig.
Oh, ja, die Hintergrundfarbe muss ich noch anpassen... soll ja nicht grau sein, sondern weiß.
Bei mir ist sie stattdessen hellblau, das sieht zusammen mit deiner Farbgebung auch eigenwillig aus. ;-)
Und was das Layout angeht, so habe ich persönlich einen anderen Geschmack, aber ok.
*g*
Wär ja auch schlimm, wenn wir alle denselben Geschmack hätten.Ciao,
Martin--
Programmierer (m), seltener auch ~in (w):
Irdische, i.a. humanoide Lebensform, die in einem komplizierten biochemischen Prozess Kaffee, Cola und Pizza in maschinenlesbaren Programmcode umwandelt.
P~ bilden gelegentlich mit ihresgleichen kleine Gruppen, sogenannte Communities, sind aber ansonsten meist scheue Einzelgänger.
P~ sind vorwiegend nachtaktiv und ohne technische Hilfsmittel nur eingeschränkt lebensfähig.-
Danke für den Tipp. Ich habe jetzt die Abschnitte in SPANs mit entsprechender ID verpackt. Solltest Du gerade Zugriff auf den IE haben, schau doch bitte noch mal drüber, bei mir tut's das jedenfalls.
hm, bei mir leider noch nicht (momentan IE6SP1/Win2k). Anklicken der Links bringt keine Wirkung. Da muss also noch ein anderer Wurm drin sein, der mir aber leider nicht auffällt.
Könntest Du's vielleicht noch einmal kurz testen? Ich habe die Überschriften jetzt in Hn-Container verpackt.
Was mich außerdem irritiert: Setze ich den Cursor in die Adresszeile, wenn der Anker #banner schon hintendran steht, und drücke dann die Enter-Taste, dann passiert auch *gar nichts*. Der Cursor bleibt in der Adresszeile stehen, als ob der IE das Drücken der Enter-Taste ignoriert.
Bei den übrigen ID-Ankern (z.B. #rock) ist das Verhalten ähnlich - der Cursor bleibt auch in der Adresszeile im Edit-Modus stehen, aber das Browserfenster scrollt immerhin zum angegebenen Anker.
Sehr merkwürdig, das ganze.Eben. Vielleicht hat MS dem IE das mit den beliebig anspringbaren Objekten noch nicht beibringen können. Bei mir im Safari tut's das ganze nämlich ohne Problem... sollte es diesmal nicht klappen wird wieder auf HTML 4 transitional umgestellt und dann kommen wieder die guten alten benannten A-Tags.
Das mit den spans ist zwar grundsätzlich eine Idee - aber warum gibst du die ID nicht den Bildern, die du als Teilüberschriften verwendest? Oder noch besser, warum zeichnest du die Bilder -wenn sie schon eine Überschrift darstellen- nicht mit einem <hX> drumherum aus? Deine span-Lösung ist nämlich so nicht valid, da span als Inline-Element keine Blockelemente enthalten darf, die Verschachtelung mit den darin liegenden p-Elementen wäre deshalb unzulässig.
Ist jetzt geändert; siehe oben.
Oh, ja, die Hintergrundfarbe muss ich noch anpassen... soll ja nicht grau sein, sondern weiß.
Bei mir ist sie stattdessen hellblau, das sieht zusammen mit deiner Farbgebung auch eigenwillig aus. ;-)
Die sollte aber eingentlich rein-weiß (background-color: #FFFFFF) sein...
-
Hallo,
Könntest Du's vielleicht noch einmal kurz testen? Ich habe die Überschriften jetzt in Hn-Container verpackt.
Kein Unterschied. Mist.
Eben. Vielleicht hat MS dem IE das mit den beliebig anspringbaren Objekten noch nicht beibringen können.
Scheint so - aber auf vielen anderen Seiten funktioniert das. Es kann also keine generelle Unfähigkeit sein, sondern wahrscheinlich nur eine blöde Kombination, die auf deiner Seite auftritt und die zu finden wahrscheinlich ein tagesfüllendes Projekt sein könnte. Wenn man wirklich so viel Aufwand daran verschwenden möchte.
Vermutlich hilft es dir auch wenig, wenn ich dir sage, dass ich bald Feierabend mache und dir dann von zuhause melde, dass es mit dem IE5.5 (voraussichtlich) funktioniert ... ;-)[Hintergrundfarbe]
Die sollte aber eingentlich rein-weiß (background-color: #FFFFFF) sein...Ist sie jetzt auch. :)
So long,
Martin--
Du kannst dem Leben nicht mehr Tage geben.
Aber dem Tag mehr Leben.-
Könntest Du's vielleicht noch einmal kurz testen? Ich habe die Überschriften jetzt in Hn-Container verpackt.
Kein Unterschied. Mist.
Bei mir ist er am Ende auch keinen Anker mehr angesprungen. Jetzt tagelang nach der Ursache zu suchen ist akademisch sicher interessant, aber der Kunde zahlt's nicht. Da sich bei meiner Seite ja alle Browser quergestellt haben, habe ich die Seiten - wie angedroht - auf schnödes HTML umgestellt und die Anker eingefügt.
Ein kurzer Test wäre nett, auch wenn's nur der 5er IE ist.
-
Tach nochmal,
Ein kurzer Test wäre nett, auch wenn's nur der 5er IE ist.
der gute alte 5.5er macht's ohne Murren, wieder und wieder. Erweist sich immer wieder als die IE-Version, die am wenigsten Probleme macht.
Ich weiß schon, warum ich auf _meinen_ Rechnern nie auf den IE6 upgraden wollte. ;-)Viel Erfolg noch,
Martin--
Der Gast geht solange zum Tresen, bis er bricht.
-
-
-
-
-
-
-
-
Oder hast du ein scrollbares div und erliegst dem Irrtum, du könntest das div-Element mit einem Anker an die gewünschte Stelle scrollen? Das geht nämlich nicht.
Du meinst: Das geht nicht im IE.
Ein scrollbares Div, das den angesprungenen Anker enthält, wird automatisch an die richtige Stelle gescrollt; zumindest im Opera (8.5/9) und Firefox (1.5).
-