# h2::before Problem: Kreis überlappt Menu



## julieann (26. Juli 2013)

Hallo, Leute!

Ich lasse vor den <h2> Überschriften einen Kreis einblenden. (siehe "Bild1.jpg")
Wenn ich nun aber das Menu aufrufe und dieses aufgeklappt wird (dabei ragt es über die Überschriften hinaus), wird dieser Kreis immer noch angezeigt, er überlappt sozusagen das Menu.
(siehe "Bild2.jpg")

Mit diesem Code blende ich die Kreise ein:


```
h2::before {
         content:"";
         display: inline-block;
         position: relative;
          top: -4px;
          left: 0;
          width: 10px;
          height: 10px;
          margin: 0 5px 0 0;
          background: #de2922;
          -webkit-border-radius: 50px;
           -moz-border-radius: 50px;
          border-radius: 50px;
         }
```

Kann mir jemand weiterhelfen?
Danke schonmal im Voraus!


----------



## Jan-Frederik Stieler (26. Juli 2013)

Hallo,
von welchem Browser ist die Rede und gibt es eventuell eine laufende Version der Webseite?

Grüße


----------



## julieann (26. Juli 2013)

Also, ich habe hier mal eine Testversion hochgeladen:
http://www.oecocolor.de/LEG/index.html

Ich habe es mir in Chrome angesehen und im FireFox und im IE (5, die neuste Version muss ich da erst nochmal runterladen).
Das Problem tritt überall gleichermaßen auf.


----------



## Jan-Frederik Stieler (26. Juli 2013)

Hi,
die relative Positionierung scheint das Problem zu sein.
Arbeite mal bei deinen Dropdowns mit Z-Index, dann müsste das Problem Geschichte sein.
Grüße


----------



## hela (28. Juli 2013)

Hallo,

versuch mal in der Datei _MENU.CSS_ statt

```
h2::before {
	content:"";
	display: inline-block;
	position: relative;
	top: -4px;
	left: 0;
	width: 10px;
	height: 10px;
	margin: 0 5px 0 0;
	background: #de2922;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}
```
einfach nur folgendes einzusetzen:

```
h2::before {
	content: "? ";	/* Unicode: ? und Leerzeichen */
	color: #d22;
}
```


----------



## julieann (29. Juli 2013)

@Jan-Frederik Stieler:
Vielen Dank für den Tipp! Das habe ich doch glatt übersehen.
So funktioniert es.

@hela:
Das teste ich gleich mal!
Vielen Dank vorab.

edit:
Dazu bräuchte ich nochmal Hilfe.
Wie bekomme ich das Unicode Zeichen in das CSS File?
Habe eben schon rumprobiert und auch ein bisschen gegoogelt, aber ich krieg es irgendwie noch nicht hin.
Kannst du mir da noch weiterhelfen?


----------



## Jan-Frederik Stieler (29. Juli 2013)

Hi,
kopier doch einfach das Zeichen hier raus und füge es in dein CSS ein.
Das andere wäre unter Windows die Zeichentabelle oder unter OS X die Zeichenübersicht zu verwenden und das Zeichen dort rauszusuchen.

Grüße


----------



## julieann (29. Juli 2013)

Jan-Frederik Stieler hat gesagt.:


> Hi,
> kopier doch einfach das Zeichen hier raus und füge es in dein CSS ein.
> Das andere wäre unter Windows die Zeichentabelle oder unter OS X die Zeichenübersicht zu verwenden und das Zeichen dort rauszusuchen.
> 
> Grüße



Das habe ich natürlich versucht 
Aber beim Kopieren zeigt mir der Editor nur ein "?" an statt des Punktes.
Und der Unicode ist als HTML Code angegeben. Ich habe in einer Tabelle nachgesehen, dass der Sourcecode wohl "\u25CF" lautet, aber ich weiß leider nicht, wie ich das in meiner CSS Datei eingeben muss.


----------



## Jan-Frederik Stieler (29. Juli 2013)

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

Welche Schrift verwendest du denn?


----------



## julieann (29. Juli 2013)

Jan-Frederik Stieler hat gesagt.:


> ```
> h2::before {
> content: "\u25CF ";
> color: #d22;
> ...




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.


----------



## tombe (29. Juli 2013)

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 "&bull;" als Aufzählungszeichen.


----------



## julieann (29. Juli 2013)

tombe hat gesagt.:


> 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 (29. Juli 2013)

Und was ist mit dem Link bzw. dem "&bull;".

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 (29. Juli 2013)

julieann hat gesagt.:


> 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 (29. Juli 2013)

tombe hat gesagt.:


> 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!
> 
> ...



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 (29. Juli 2013)

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.


----------

