h2::before Problem: Kreis überlappt Menu

[tombe]

Wenn es der gleiche "Kreis" ist, dann sagt die Windows Zeichentabelle bei Schriftart Arial dazu "ALT + 0149" !?

Oder wie man hier unter "B" nachlesen kann "•" als Aufzählungszeichen.

 

[julieann]

Wenn es der gleiche "Kreis" ist, dann sagt die Windows Zeichentabelle bei Schriftart Arial dazu "ALT + 0149" !?

Oder wie man hier unter "B" nachlesen kann "•" als Aufzählungszeichen.

Ja, das stimmt. Ich kriege mit ALT 0149 jetzt auch den Punkt in den CSS Code hinein.
Die Bildschirmausgabe im Browser allerdings geht trotzdem nicht. Dort erscheint lediglich ein Ersatzsymbol mit Fragezeichen drin.
Weiß da jemand Rat?

 

[tombe]

Und was ist mit dem Link bzw. dem "•".

Wenn du das Zeichen mit ALT + 0149 eingibst, dann wird es nur bei Arial korrekt angezeigt, bei einer anderen Schriftart steht es für ein oder auch kein anderes Zeichen!

NACHTRAG: So geht es bei mir

h2:before {
    content:"\2022";
    color: #d22;
}

Einzig das Leerzeichen wird nicht akzeptiert, das muss man dann wohl bei der Überschrift selber eingeben!?

 

[hela]

font-family: Futura hv bt, Arial, Helvetica, sans-serif;

Ich habe es mit deinem Code schon versucht gehabt, funktioniert aber leider nicht.
Mir zeigt er da einfach nur u25CF an im Browser statt des Zeichens.

Dann versuch es mal mit CSS-Escapes:

h2::before {
    content: "\0025CF  "; /* Backslash + 6stelliger Unicode + 2 Leerzeichen */
    color: #d22;
}

 

[julieann]

Und was ist mit dem Link bzw. dem "•".

Wenn du das Zeichen mit ALT + 0149 eingibst, dann wird es nur bei Arial korrekt angezeigt, bei einer anderen Schriftart steht es für ein oder auch kein anderes Zeichen!

NACHTRAG: So geht es bei mir

h2:before {
    content:"\2022";
    color: #d22;
}

Einzig das Leerzeichen wird nicht akzeptiert, das muss man dann wohl bei der Überschrift selber eingeben!?

Bei mir funktioniert es jetzt! Danke nochmals.
Ich habe jetzt folgenden Code verwendet:

         h2::before {
                 font-size: 2em;
                 position: relative;
                 top: 0.18em;
                 margin: 0 0.2em 0 0;
                 content: "\2022";    /* Unicode: ? und Leerzeichen */
                 color: #d22;
         }

Habe die Schriftgröße erhöht, damit der Punkt größer wird.
Dann musste ich noch die Position korrigieren, damit er auch mittig vor der Schrift sitzt.
Und zum Schluss habe ich noch den Abstand zur Überschrift mit margin eingefügt. Ist besser, als immer ein Leerzeichen einzufügen in den Überschriften, find ich.

Alles in allem ist der Code damit natürlich trotzdem etwas länger. Aber gefällt mir trotzdem!

 

[Jan-Frederik Stieler]

Hi,
also das Slash vor den Zeichen sagt eigentlich das es sich um ASCII handelt und nicht das reingeschrieben direkt ausgegeben werden soll.
Du kannst ja mal versuchen danach das Entity für das Leerzeichen mit einzugeben (&nbsp.

Grüße

PS: jetzt hab ich den text zu spät abgesendet. Da sind mir ein paar Meldungen dazwischen gekommen.