Untertitelung eines <a> - Tags mit Button in der nächsten Zeile

Hallo liebe Forumer,

folgende Ausgangssituation:

[CODE=html]


[/CODE]

.anker_link a::before { content: '\f357'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 3rem; }

Wie ihr hier seht habe ich dem a - Tag einen Fontawesome-Button zugeteilt, zusätzlich soll dort noch stehen : „skip to top“
Dieses „skip to top“ soll allerdings in der nächsten Zeile also darunter stehen, NICHT daneben.
Der Validator „meckert“ weil ich ich das mit einem ruden
erzwungen habe.

Wie aber löst man das richtig mit CSS?

Könnt ihr mir da bitte helfen?

Grüße der Misanthrop

Also bei mir meckert der Validator nicht wegen dem [ICODE]
[/ICODE] Er gibt nur den Hinweis, dass der Trailing slash Keinen Effekt hat.
Den kannst du auch einfach entfernen.

Wenn du das ohne das [ICODE]
[/ICODE] lösen möchtest, gibt es viele Möglichkeiten.
du könntest deinem [ICODE]::before[/ICODE] element zum Beispiel [ICODE]display: block[/ICODE] verpassen.
Oder auch dem Anchor ein [ICODE]display: grid[/ICODE].

NOPE, muss wohl mal das Cache leeren und FF neu starten.

Keine Ahnung, villeicht weil dieser „Nach-OBEN-Button“ sich schon innerhalb einer GRID-AREA befindet.
Also konkreter : Ich habe folgendes:

#main-content {
grid-area: main-content;
}

.top-link {
grid-area: main-content / main-nav;
place-self: end center;
}

Ganz oben befindet sich noch eine andere Hauptnavigation, das ist aber jetzt egal , ganz unten dann eben dieser Button der sich auf keinster Weise beeinflussen lässt, selbst mit display: block NICHT.

Was kann ich tun?

Gruß Missanthrop

Das ist an der Stelle falsch, eine src-Eigenschaft gibt es nicht, das gehört in einen @font-face-Block.

Kein Grund hier rum zu schreien. Poste doch mal den kompletten bzw. auf das wesentliche gekürzten Code (nicht nur so kurze Fetzen davon) so dass sich das Problem nachvollziehen lässt - am besten irgendwo eine Testseite online stellen (kann auch ein jsfiddle o.ä. sein) damit man sich das direkt anschauen kann.

Hallo TK, ich wollte nicht, wenn andere/Du es als „schreien“ interpretieren können. Tut mir Leid.
Ich möchte einen Link nicht öffentlich posten, darf ich Dir den in einer PN schicken?

Grüße der Misanthrop

Nein. Das ist ein öffentliches Forum, privater Support ist nicht. Aber wie gesagt, es muss keine Seite von dir sein, ein Link zu einem jsfiddle o.ä. ist auch völlig ok.

Verstehe ich zwar. Wir hätten aber hier im Thread weiter diskutieren können.
Eventuelle Korrekturen. Dann kann man auch aus dem CSS / html „zitieren“ um die Lösung des Problems zu veranschaulichen. Öffentlich für alle.
Ein völlig privates Helfen hätte ich nicht beabsichtigt.

Also gut, egal.
Muss sagen das CSS noch nicht richtig „aufgeräumt“ / geordnet , muss es noch zusammenfassen.

Der skip - to - top Button um den es hier geht, ist momentan noch ganz unten, über dem Impressum.

[SIZE=5]Testseite-V9a.html[/SIZE]

Grüße der Mianthrop

Das bringt dritten aber nichts wenn sie die Seite über die gesprochen wird garnicht kennen … Ich verstehe aber auch das Problem nicht, Links zu der Seite hast du an anderer Stelle doch auch schon gepostet.

Das ist jetzt eher weniger das Problem, die relevanten Teile zeigen die Entwicklertools ja direkt an. Um die Korrektur der Fehler im CSS solltest du dich aber kümmern - und wofür sind die ganzen font-family-Angaben? Warum nicht einfach eine für body?

Ich verstehe das Problem nicht: alle Optionen die Andreas in #2 gepostet hat (nicht
sondern nur
, dann gibt es keine Meldung vom Validator, ein display:block für ::before oder ein display:grid für a) funktionieren völlig problemlos. Und nein, dass es da bereits ein display:grid gibt macht nichts, die dürfen auch verschachtelt sein.

Okay, Cache gelöscht und Firefox neu gestartet. Daran lag es. Sorry.

Ist es eigentlich so richtig wie ich article und section verwende?

[CODE=html]
!! Die Blogeintäge in dem Artikel gehören thematisch zusammen !!

Blogeintrag 1

( … )


Blogeintrag 2

( … )


Blogeintrag 3

( … )

( … )

!! Die Blogeintäge in dem Artikel gehören thematisch zusammen !! Blogeintrag 1

( ... ) Blogeintrag 2

( ... ) Blogeintrag 3

( ... ) ( ... ) [/CODE]

Siehe https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung#article_oder_section.3F - demzufolge wohl ja, aber mach keine Wissenschaft daraus.