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

[Misanthrop]

Hallo liebe Forumer,

folgende Ausgangssituation:

<div id="skiptop" aria-labelledby="skiptop-label" class="top-link" >
    <ul id="skiptop-label" class="anker_link">
        <li><a href="#skip-to-top"><span><br/>skip to top</span></a></li>
    </ul>
</div>

.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 <br/> erzwungen habe.

Wie aber löst man das richtig mit CSS?

Könnt ihr mir da bitte helfen?

Grüße der Misanthrop

 

[AndreasB]

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

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

 

[Misanthrop]

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 id="main-content">

#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

 

[tk1234]

src: local('Font Awesome 5 Pro');

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

NOPE, NICHTS von dem hat auch eine kleinste WIRKUNG.

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.

 

[Misanthrop]

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

 

[tk1234]

Ich möchte einen Link nicht öffentlich posten, darf ich Dir den in einer PN schicken?

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.

 

[Misanthrop]

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.

Testseite-V9a.html

Grüße der Mianthrop

 

[tk1234]

Verstehe ich zwar. Wir hätten aber hier im Thread weiter diskutieren können.

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.

Muss sagen das CSS noch nicht richtig "aufgeräumt" / geordnet , muss es noch zusammenfassen.

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?

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

Ich verstehe das Problem nicht: alle Optionen die Andreas in #2 gepostet hat (nicht <br/> sondern nur <br>, 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.

 

[Misanthrop]

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

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

<article>
        !!  Die Blogeintäge in dem Artikel gehören thematisch zusammen  !!
    <section>
        Blogeintrag 1
       <p></p> ( ... )
    </section>
    <section>
        Blogeintrag 2
       <p></p> ( ... )
    </section>
    <section>
        Blogeintrag 3
       <p></p> ( ... )
    </section>
    ( ... )
</article>

<article>
    !!  Die Blogeintäge in dem Artikel gehören thematisch zusammen !!
    <section>
        Blogeintrag 1
       <p></p> ( ... )
    </section>
    <section>
        Blogeintrag 2
       <p></p> ( ... )
    </section>
    <section>
        Blogeintrag 3
       <p></p> ( ... )
    </section>
    ( ... )
</article>

 

[tk1234]

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

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