spezialisieren Farbe für ein single-link -

Ich versuche, erstellen Sie eine css-Menü-Leiste, die hat alle der graue text mit Ausnahme von einem einzigen link, aber jeder Versuch den ich gemacht habe, entweder produziert alle Grau oder alle grünen link-text.

Wenn Sie unten schauen, EcoSolutions sollte grün sein und der rest Grau

Habe ich meinen letzten Versuch.... hoffentlich kann jemand ein Ende setzen, meinen Wahnsinn 😀

Dank

<ul id='Navigation' class='MenuBar'>
    <li><a href="../index.php">Home</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../simplify.php">Simplify</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../ecosolutions.php"class="green">EcoSolutions</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../contact_us.php">Contact</a>
        <img src='images/separator.jpg'/></li>          
    <li><a href="../partners.php">Partners</a>
        <img src='images/separator.jpg'/></li>
    <li><a href="../services.php">Services</a>
        <img src='images/transSeparator.png'/></li>
</ul>


/****  MenuBar STYLES ****/

.MenuBar
{
    width: 916px;
    padding: 0px 0px 0px 50px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    color: #888;
}
.MenuBar ul
{
    list-style-type: none;
    font-size: .9em;
    cursor: default;
    font-weight: bold;
    padding: 10px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    font-family:Verdana, Geneva, sans-serif;
    color: #888;
}

.MenuBar ul li img
{
    padding: 0px 0px 0px 0px;
    margin: 0px 25px 0px 25px;
    vertical-align: middle;
}

.MenuBar li
{
    list-style-type: none;
    font-size: .9em;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    float: left;
    height: 37px;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    top: auto;
    bottom: auto;
    font-family:Verdana, Geneva, sans-serif;
    color: #888;
}

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}
.MenuBar  ul li a:link, a:visited, a:active 
{
    display: inline;
    cursor: pointer;
    color: #888;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

.MenuBar  ul li a:hover 
{
    display: inline;
    color: #FF0000;
    padding: 0px;
    margin: 0px;
}

Zuerst müssen Sie fügen Sie ein Leerzeichen zwischen dem schließenden tag des "href" - und das Stichwort class. Zweitens könnten Sie bitte formatieren Sie die Stile als code, um Sie leichter lesbar.

InformationsquelleAutor dmschenk | 2010-02-25

css

2

Als Wels stillschweigend, Ihre CSS-Selektoren für die links falsch sind. Müssen Sie die Klasse in eine zusammengesetzte Selektor.

Müssen Sie ändern Sie den Stil auf die nicht-grünen-links, zu, etwa so:
```
.MenuBar ul li a:link, 
.MenuBar ul li a:visited, 
.MenuBar ul li a:active {
    /* styles here */
}
```
Das problem ist, dass diese Selektoren beziehen sich auf den grünen link, und mehr spezifisch, Sie werden überschreiben die grüne link-Selektoren wie wurde geschrieben von Wels. Das muss geändert werden, um mindestens so genau wie die regelmäßigen link-Selektoren.
```
.MenuBar ul li a.green:link, 
.MenuBar ul li a.green:visited, 
.MenuBar ul li a.green:active {
    /* styles here */
}
```
Hoffe, das hilft!
- Vielen Dank an alle!! Ich habe es durch so viel!! Es funktioniert wie ein Charme. eigentlich alle Antworten arbeiten.
InformationsquelleAutor Scott Cranfill

Versuchen Sie, diese

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

zu diesem

a.green:link, a.green:visited, a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

InformationsquelleAutor Catfish

0

Siehe mein Kommentar ... aber
```
.MenuBar ul li a.green { color: green; } 
```
funktionieren sollte.

InformationsquelleAutor AxelEckenberger

Um es zusammenzufassen, ändern Sie diese

<li><a href="../ecosolutions.php"class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

zu diesem (beachten Sie das Leerzeichen zwischen href="" und class="")

<li><a href="../ecosolutions.php" class="green">EcoSolutions</a><img src='images/separator.jpg'/></li>

dann in der css ändern (was Sie derzeit im Grunde bedeutet, dass Sie innerhalb eines anderen Elements mit der grünen Klasse wie die ist nicht das, was Ihre HTML-sagt 😉 )

.green a:link, a:visited, a:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

zu diesem

a.green:link, a.green:visited, a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

Können Sie auch mehr direkte und setzen

.MenuBar ul li a.green:link, .MenuBar ul li a.green:visited, .MenuBar ul li a.green:active 
{
    display: inline;
    color: #94cf01;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

Hoffe, das hilft

InformationsquelleAutor Karinne

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.