2017-01-16 2 views
0
Anzeige

Auf this site, wenn ich prüfen "Was wir tun", ich sehe den HTML-Code:CSS: Inhalt nicht

<a title="What we do – Mad Hat Media" href="http://test.doig.com.au/MHM/services/" class="sf-with-ul">What We Do<span class="sf-sub-indicator"> »</span></a> 

mit CSS-Code:

.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator { 
    background: none; 
    content: '&raquo;'; 
    color: #622C82; 
} 

ich nicht sehen kann warum diecontent: '&raquo;' nicht anzeigt. Das CSS-Element hat eine Breite und eine Farbe.

Was fehlt, sind die Dropdown-Indikatoren (durch die grünen Pfeile auf dem Bildschirm angezeigt unten gedreht)

enter image description here

Hilfe geschätzt.

+0

Stellen Sie sicher, dass Sie den UTF-8-Zeichensatz verwenden. –

+3

'content' ist ein Attribut für Pseudoelemente' :: after' und ':: before', nicht für einfache css-Selektoren – Banzay

Antwort

1

ich denke, man einen Blick auf diese Klasse

.menu li a .sf-sub-indicator, 
.menu li li a .sf-sub-indicator, 
.menu li li li a .sf-sub-indicator { 
    background: url(images/arrow-down.png) no-repeat; 
    height: 16px; 
    position: absolute; 
    right: 5px; 
    text-indent: -9999px; 
    top: 13px; 
    width: 16px; 
} 

die haben sollte Text-Einrückung Eigenschaft verursacht die >> AWOL. Entfernen Sie das und Sie sind ein bisschen festgelegt. Möglicherweise müssen Sie jedoch andere Klassen umschalten.

Was die Drop-down-Indikatoren, sind sie sehr präsent, nur die In diesem Sinne background:none

entfernen, wird content Eigenschaft in der Regel zu ::before und ::after Pseudoelement gesetzt. Werfen Sie einen Blick in this mdn link.

+0

Danke. Am Ende habe ich den Standard-Dropdownpfeil ersetzt, der mit '.menu li a .sf-sub-indicator, .men li li a, .sf-sub-indicator, .men li li li a .sf-sub-indicator { Hintergrund: URL (Bilder/arrow-right2.png) keine Wiederholung; } ' – Steve

+0

so .. ist das Problem jetzt gelöst? ! – semuzaboi

1

Wie ich in Ihren Code-Selektoren .menu li a .sf-sub-indicator sehen kann, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator fast gleich aussehen.

Wie auch immer, wenn Sie implementieren möchten content Attribut, es ist besser, etwas zu schreiben wie:

.sf-sub-indicator::after { 
    background: none; 
    content: '&raquo;'; 
    color: #622C82; 
} 

http://imgur.com/a/hw1kb

+0

Danke Banzay. Ich habe diese Änderung vorgenommen, und der Inhalt erscheint im HTML-Code, aber er wird nicht visuell angezeigt (http://test.doig.com.au/MHM/). – Steve

+0

dies funktioniert: '.menu li a .sf-sub-indikator :: nach, .men li li a .sf-sub-indikator, .men li li li a .sf-sub-indikator { hintergrund: keine; Inhalt: '»'; Farbe: # 622C82; } ' – Banzay

+0

Es scheint nicht in Chrome zu funktionieren. – Steve

0

Hintergrundbild ist für diesen Bereich eingestellt. Erneut prüfen: