ComputerBase Menü
Aktuelles

HTML Chrome: Anker-Tag verbraucht Zeilenhöhe - wie verhindern?

cumulonimbus8

cumulonimbus8

Fleet Admiral
Registriert
Apr. 2012
Beiträge
18.398
Moin!

Innerhalb meiner Seite springe ich mit internen Links zu Kapiteln und wieder nach ganz oben zurück.

HTML: 
<body>
<a name="Oben"></a>

<a href="diesedatei.htm#kapitel1">Kapitel 1</a>
<a href="diesedatei.htm#kapitel2">Kapitel 2</a>

<a name="kapitel1"></a>
…
<a href="diesedatei.htm#Oben">Nach oben</a>
Diese Struktur dürfte geläufig sein.

Chrome verbraucht für das oberste Anchor-Tag eine Zeile in der Darstellung. Sicherlich könnte da was drinstehen…
<a name="Oben">Hier ist oben</a>
…aber das macht man ja nicht. Ist ja auch nicht sinnig, den unsichtbaren Anker extra sichtbar zu machen.

Wie kann man Chrome überreden bei inhaltlich leerem Anker dieses Tag auch nicht als (leere) Zeile anzuzeigen? Dieser klare optische Makel geht mir einigermaßen auf Keks.

CN8
 
Du könntest diesen leeren Tags eine Klasse geben, und das dann im CSS dafür definieren
 
Die Anker sind eigentlich nicht mehr notwendig, du kannst auch IDs als Ziel verwenden. Wenn du dem Body die ID gibst müsste der Browser eigentlich auch nach oben Springen (und ansonsten kann man die IDs z.B. auch auf Überschriften setzen)
 
  • Gefällt mir
Reaktionen: Lawnmower
HTML5 stellt den "#top" Anker bereit, um an den Beginn des Dokumentes zu verweisen. Da muss man nichts extra definieren.
 
• Klasse zuweisen und definieren, etwa .visible="none"?

• IDs als Ziel - und mit was springe ich ich das Ziel an (Sysntax)?

• #top - ist also nur in Benutzung für die Nach-Oben-Links, ein Anker oben ist damit nicht notwendig?

CN8
 
Für das erste wäre es “Display = none”. Entweder im style Attribut in den html Tags angeben, oder für die klasse die du definierst im css angeben
 
OK, da wüsste ich was zu tun ist.
Mein Bauch meint dazu, dass man einem Webprogrammierer so eine Krücke eigentlich gar nicht zumuten darf, als Browserhersteller…
→ nach #top musste ich bei Google intensiv suchen, erster einfacher Treffer führte 100 Top-Hashtags bei Instagram…
Die ID als Sprungziel und die nötige Absprungrampe würden mich aus Prinzip interessieren.

CN8
 
Meine Seite mit Anchor-Tags funktionert und ist leidlich alt. Ich weiß schon wie das geht…

Die Frage war warum Chrome leere Anker dennoch so darstellt als stände etwas im Tag drin.

CN8
 
Ist doch eigentlich ganz egal, man macht es heute ja nicht mehr so. Gib <body> eine ID zum Anspringen und das Problem ist gelöst. Das ist sinnvoller als irgendwelche CSS-Versteckspielchen.
 
Und welche Syntax springt eine ID an? Bitte ein Beispiel!
CN8
 
…hat man mir damals nur nicht als Option beigebracht. Habe nach den Hunseis von Jesterfox herumprobiert. Die ID habe ich BODY verordnet (was mir im Grunde nicht so ganz passt, Konzeptionell.

Es kommt mir aber so vor, als ob Chrome sehr eigensinnig ist… Ich verwende aus bestimmten Gründen in CSS ein Padding (einfach, rundum) für den BODY und der Sprung nach oben geht nicht gsnz rauf sondern lässt das Padding oben stehen (ich kann weiter hchscrollen)
Aber das muss ich auf morgen vertagen. Und auch den #top Test.

CN8
 
Hmtja…
<a href="no">Nach oben</a>
funktioniert nicht (<body id="no"> ›nach oben‹).
<a href="diesedatei.htm#no">Nach oben</a>
indes schon. Das entspricht nur nicht den Erläuterungen bei Heise (in en gros ja meinem alten Code entsprachen)… Ich hatte es natürlich so probiert.

CN8
 
Da steht für einen Anker
HTML: 
<h3 id="Ankername">Überschrift</h3>
und um dorthin zu springen
HTML: 
<a href="#Ankername">Link</a>

Optional dann noch für einen Link auf ein anderes Dokument mit Anker
HTML: 
<a href="dokument.html#Ankername">Link</a>

Also id="irgendwas" einem Element zuweisen und dann mit <a href="#irgendwas">zu irgendwas</a> dorthin springen.

Sollte da jetzt noch irgendwas nicht funktionieren, erstelle doch bitte ein Beispiel und verlinke es.
 
Zuletzt bearbeitet:
Und wieder mal bin ich über mangelhaft klare Dokumentation gestolpert!
Es muss <a href="#Ankername">Link</a> heißen und nicht <a href="Ankername">Link</a>, dass da das # hin muss wird nicht herausgestellt.
Also, es funktioniert ohne Angabe der Datei selbst.

Der Link indes mit #top ist interessant. Während alle anderen das o.g. Padding ignorieren passiert das bei #top nicht, es geht wirklich nach Topp.

Damit habe ich die Qual der Wahl; wobei #top aus optischen Gründen am besten ausfällt, da ich wirlich bis ganz oben möchte und nicht nur dahin wo der Anker platziert ist. (Hier eben ganz oben.)

Danke für die Anregungen, und, dass ich aus mehreren Lösungen wählen konnte.
Die Sturheit von Chrome und dem leeren Anker bleibt…

CN8
 
Bei allen Chromiums (Chrome, Edge, Opera) war die Zeile <a name="Oben"></a> (mit nichts zwischen den ><) eine Standardzeile hoch. War durch Entfernen einfach zu beweisen.
CN8
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz