Hintergrundfarbe von nur einem Listeneintrag entfernen

mephisto2k

Hallo,

ich habe eine Liste welche in einer einer global definierten Box liegt. Jetzt möchte ich das ein Listenpunkt dieser Liste, anders als alle anderen NICHT mit einer Hintergrundfarbe versehen ist. Versucht habe ich diesen Eintrag mit einer Klasse zu definieren, allerdings hatte dies keine Auswirkung. Egal ob ich eine andere Hintergrundfarbe definiere oder diese mittels 'transparent' auszublenden versuche.

Hat jemand eine Idee was ich tun könnte?

Folgend der HTML Code

Code

<div id="content_list" >                                                                        
                                <ul>
                                    <li><h4>Tag 1 - Samstag, 24 Juli 2010</h4></li><!-- um die Hintergrundfarbe dieses Listenpunktes geht es mir -->
                                </ul>
                                <ul>
                                    <div class="content_wrapper">
                                        <li><a href="zin_amphi_2010.html">ZIN (Gewinner New Talents)</a></li>
                                        <li><a href="din_a_tod_amphi_2010.html">DIN [A] TOD</a></li>
                                        <li><a href="endofgreen_amphi_2010.html">End of Green</a></li>
                                        <li><a href="ashb_heights_amphi_2010.html">Ashbury Heights</a></li>
                                        <li><a href="welle_erdball_amphi_2010.html">Welle:Erdball</a></li>
                                        <li><a href="blutengel_amphi_2010.html">Blutengel</a></li>
                                        <li><a href="anne_clark_amphi_2010.html">Anne Clark</a></li>
                                        <li><a href="and_one_amphi_2010.html">And One</a></li>
                                        <li><a href="impressionen01_amphi_2010.html">- Impressionen -</a></li>
                                    </div>
                                </ul>
</div>

Alles anzeigen

Im Detail geht um die erste unsortierte Liste, bzw. um den Listeneintrag.

Und hier der CSS Code

Code

#content_list ul {
    margin-bottom: 1.8em;    
}


.content_wrapper {
    -moz-box-shadow: 5px 5px 5px #a0a0a0; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 5px 5px 5px #a0a0a0;
    border-radius: 5px;         
}


#content_list li h4 {
    margin: -1% -4% 5% 5%; /*top right bottom left*/
    -moz-box-shadow: 5px 5px 5px #494949; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 5px 5px 5px #494949;
    border-radius: 5px;  
    line-height: 2em;
    border: 1px solid white;
    background: #999;
    font-size: 1.3em;    
    min-height: 2em;
    min-width: 50%;
    color: white;
    float: right;
}

#content_list ul li {
    background: #666;    
}

Alles anzeigen

Mir ist klar das ich mit dem untersten Eintrag des CSS Codes die Hintergrundfarbe Global für alle in der Box aufgeführten Listeneinträge setze, daher suche ich eine Art gebräuchlich Ausnahme Regelung...

MfG
mephisto2k

Dodo

Zitat von mephisto2k

Versucht habe ich diesen Eintrag mit einer Klasse zu definieren, allerdings hatte dies keine Auswirkung.

Das ist die gebräuchliche Methode. Die funktioniert, wenn sie richtig gemacht wird.
Wie hast du es denn versucht?

mephisto2k

Mein kläglicher Versuch sieht wie folgt aus

HTML

Code

<ul>
    <li class="no_bg"><h4>Tag 1 - Samstag, 24 Juli 2010</h4></li>
</ul>

CSS

Code

.no_bg {
    background-color: transparent;
}

Den CSS Code habe im Anschluss es im ersten Beitrags geposteten Codes eingetragen und ist somit die letzte Bedingung in dieser CSS Sparte.

Dodo

Zitat von mephisto2k
Mein kläglicher Versuch sieht wie folgt aus

HTML
Code
<ul>
    <li class="no_bg"><h4>Tag 1 - Samstag, 24 Juli 2010</h4></li>
</ul>
CSS
Code
.no_bg {
    background-color: transparent;
}
Den CSS Code habe im Anschluss es im ersten Beitrags geposteten Codes eingetragen und ist somit die letzte Bedingung in dieser CSS Sparte.

Versuchs mal damit

Code

#content_list li.no_bg h4 {
    background-color: transparent;
}

threadi

Du setzt
a) die Hintergrundfarbe in Zusammenhang mit einer ID, also per

Code

#content_list li h4 {

definiert (das hat vor einer puren Klassen-Definition vorrang), und

b) die Hintergrundfarbe an das h4 gehangen, nicht an das <li>.

Wenn Du also deiner Klassen-Definition vorrang gewähren willst, dann sag entweder, dass diese innerhalb der selben ID liegt, also

Code

#content_list li.no_bg h4 { background-color: transparent; }

oder mache diese Angabe "wichtig" und häng sie aber an das <h4>:

Code

.no_bg [COLOR='red']h4[/COLOR] {
    background-color: transparent[COLOR='red'] !important[/COLOR];
}

sejuma

Beachte ferner:

ul darf nur li enthalten.
Bisher:

Code

<ul>
                                    <div class="content_wrapper">
                                        <li><a href="zin_amphi_2010.html">ZIN (Gewinner New Talents)</a></li>

Deshalb besser:

Code

<ul class="content_wrapper">
                                 <li><a href="zin_amphi_2010.html">ZIN (Gewinner New Talents)</a></li>

mephisto2k

Vielen vielen Dank

ich habe den HTML Quellcode jetzt wie folgt geändert

Code

<div id="content_list" >                                                                        
    <ul>
        <li class="no_bg"><h4>Tag 1 - Samstag, 24 Juli 2010</h4></li>
    </ul>
    <ul class="content_wrapper">
            <li><a href="zin_amphi_2010.html">ZIN (Gewinner New Talents)</a></li>
            <li><a href="din_a_tod_amphi_2010.html">DIN [A] TOD</a></li>
            <li><a href="endofgreen_amphi_2010.html">End of Green</a></li>
            <li><a href="ashb_heights_amphi_2010.html">Ashbury Heights</a></li>
            <li><a href="welle_erdball_amphi_2010.html">Welle:Erdball</a></li>
            <li><a href="blutengel_amphi_2010.html">Blutengel</a></li>
            <li><a href="anne_clark_amphi_2010.html">Anne Clark</a></li>
            <li><a href="and_one_amphi_2010.html">And One</a></li>
            <li><a href="impressionen01_amphi_2010.html">- Impressionen -</a></li>
    </ul>
</div>

Alles anzeigen

Und die CSS Zeile sieht wie folgt aus

Code

#content_list li.no_bg {
    background-color: transparent;
}

Die 'h4' ergänzung habe ich entfernt da ich nicht den Hintergrund der Überschrift wegnehmen wollte sondern den der des Listeneintrages, bzw. den Hintergrund der Listenzeile selbst.

Jetzt ist auch alles XHTML 1.0 Strict valide --> siehe hier

Also nochmal vielen Dank!

MfG
mephisto2k

Tags