h2::before Problem: Kreis überlappt Menu

[julieann]

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]

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

Grüße

 

[julieann]

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]

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]

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]

@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]

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]

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]

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

Welche Schrift verwendest du denn?

 

[julieann]

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

Welche Schrift verwendest du denn?

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.