Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Pseudo Element und Abstände?“

Liv3pl4y

Noch nicht viel geschrieben

Guten Tag,

nach mehreren Versuchen und mangels Erfahrung mit Pseudo Elementen, sowie der Internet-Recherche (vielleicht auch einfach nicht mit dem passenden Suchbegriff) suche ich hier bei euch nun für mein Problem Hilfe.

Ich bin gerade dabei eine Art Tab-Menü zu realisieren. Soweit so gut, allerdings würde ich gerne mittels Webfont (FontAwesome) und dem Pseudo Element ::before Icons vor die Menüeinträge setzen. Das an sich ist auch kein Problem, allerdings liegt das Problem in dem unregelmäßigen Abstand zum Menüeintrag. Ich würde gerne einen gleichmäßigen Abstand bewirken, ohne das die Inline-Elemente (Menüeinträge) individuell verschoben werden. Sondern entgegengesetzt ein gleichmäßiger Abstand entsteht.

Unter folgenden Link kann man das Tabmenü (WIP) aufrufen:
 

lachender_engel

Aktives Mitglied

Das ist schon alles richtig, wie es ist.
Denn die verwendeten Symbole sind nur unterschiedlich breit. Der Abstand vom Symbol zum Text ist immer gleich. In Word wäre die Lösung "Tabulatoren" zu verwenden. In HTML gibt es so etwas aber nicht ;-)
Daher musst Du Symbole gleicher Breite verwenden oder diese als Grafiken, ebenfalls mit der selben Breite, platzieren.
 

Liv3pl4y

Noch nicht viel geschrieben

Ich verstehe nur nicht, wieso die alle unterschiedlich groß sind. Denn eigentlich:

CSS:
.site-nav *::before {
    font-family: 'FontAwesome';
    font-size:16px;
    color:#DFDFDF;
    position:relative;
    right: 10px;
}

... definiere ich hier für die Webfonts eine Schriftgröße von 16px. Berücksichtigt die Schriftgröße nicht die Breite des Symbols bei einem Webfont?
 

lachender_engel

Aktives Mitglied

Ich schreibe nicht sie (die Zeichen) sind unterschiedlich groß sondern unterschiedlich breit. Das hat was mit der Laufweite eines jeden Zeichens zu tun.
Was Du definierst ist die Zeichenhöhe. Die Zeichenbreite ergibt sich aus dem jeweiligen Zeichen.
Ein i ist auch weniger breit als ein X. Wenn Du z.B. XkX schreibst ist das k genau zwischen den x-en. Genau so kannst Du XiX schreiben, und zwischen den Buchstaben ist kein freier Raum, ob wohl das i schmaler ist als das k.
Daher kenne ich für einen solchen Fall nur die Lösung Grafiken mit einer identischen Breite zu verwenden.
 

Myhar

Hat es drauf

@lachender_engel Die Lösung, Grafiken mit identischer Breite zu verwenden ist veraltet*, heutzutage ist die von @Liv3pl4y verwendete Variante die bessere (*svg-Grafiken wären "noch besser", außer man muss noch IE8 unterstützen)
Eine einfache Lösung für das Problem ist, die Icons nicht relativ sondern absolut hinzupositionieren. Dann wird der Text nicht beeinflusst und die Icons sind auch immer gleich positioniert. Auch kann man dann zusätzlich noch eine Breite definieren (display:block nicht vergessen) und das Icon mittels text-align:center in die Mitte des so erzeugten Blocks setzen.
Aber: Warum werden lauter px-Werte verwendet, hier ist es doch besser, mit relativen Werten (em, %) zu arbeiten?
 

lachender_engel

Aktives Mitglied

Eine einfache Lösung für das Problem ist, die Icons nicht relativ sondern absolut hinzupositionieren. Dann wird der Text nicht beeinflusst und die Icons sind auch immer gleich positioniert.
Nach meinem Verständnis ergibt sich trotzdem ein Problem, wenn die Icon unterschiedliche Breite aufweisen, oder ist das nicht mehr so?!
Dann sind sie alle rechtsbündig, oder?! Aber vielleicht ist das auch gewünscht?!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben