✔ list-style-type greift nicht

outsidaa · 22. Oktober 2008

Hi,

ich versuche bei einer Liste den Style Type zu entfernen.

Es handelt sich um die Seite

http://adam.dubielecki.de

Auf der rechten Seite im Menü sind die Überschriften Categories und Latest Entries zu sehen. Das Categories hat leider einen Bullet Point davor. Diesen versuche ich da wegzubekommen.

ich habe in den style.css folgendes geschrieben

Code:

#sidebar ul#sidebar {
    list-style-type: none;
}

Es funktioniert aber nicht. Was mache ich falsch?

Info: Das Categorie ist ein Widget und das Latest Entries nicht.

Gruß

Adam

Maik · 22. Oktober 2008

Hi,

eine ID muß im HTML-Dokument eindeutig sein, darf darin also nicht mehrmals vergeben werden.

Ansonsten nimm mal das li-Element im Selektor auf:

Code:

#sidebar ul#sidebar li { /* doppelten ID-Bezeichner umbenennen */
    list-style-type: none;
}

mfg Maik

outsidaa · 22. Oktober 2008

Hmm, geht immer noch nicht.

Das ist die ganze style.css

Code:

/*  
Theme Name: Elixir Orange
Theme URI: http://www.whalesalad.com
Description: A temporary theme to exist between Moscow and Fusion.
Version: 1.2
Author: Michael Whalen
Author URI: http://www.whalesalad.com/
*/

* { margin: 0; padding: 0; list-style: none; }

body {
    background: url(img/bg.png) top center repeat-y;
    color: #FFF;
    font-family: "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif;;
}

#upperBar {
    height: 20px;
    background: #ff8c01;
}

#wrapper {
    width: 700px;
    margin: 0 auto;
}                       

#content {
    float: left;
    width: 430px;
    margin-top: 20px;
}

    #content .notice {
        border-top: 2px solid #FDDC9A;
        border-bottom: 2px solid #FDDC9A;
        background: #FFF3CE;
        color: #996633;
        padding: 5px 7px;
        font-size: 12px;
        margin-bottom: 20px;
    }

    #content .post {
        margin-bottom: 40px;
    }
    
    #content .post h2 a {
        color: #FFF;
        text-decoration: none;
        padding: 3px 0;
    }

    #content .post h2 a:hover {
        color: #D5F3FF;
    }
    
    #content .post h3 {
        font-size: 12px;
        font-weight: normal;
        color: #999;
        margin-bottom: 10px;
    }
    
    #content .post h3 a {
        color: #999;
    }              
    
    #content .post h3 a:hover {
        text-decoration: none;
    }
    
    #content .post img {
        max-width: 426px;
        margin: 10px auto;
        display: block;
        text-align: center;
    }     
    
    #content .post a img {
        border: 2px solid #000;
    }
        
    #content .post ul {
        margin-left: 20px !important;
    }
    
    #content .post ul li {
        list-style-type: disc !important;
    }
    
    #content p,
    #content .post ul li {
        font: normal 12px/20px Verdana, Helvetica, Sans-serif;
        margin-bottom: 1.5em;
    }
    
        #content blockquote {
            margin-left: 10px;
            border-left: 3px solid #333;
            padding-left: 10px;
        }
    
    #content p a {
        color: #ff8c01;
    }
    
    #content p a:hover {
        text-decoration: none;
    } 
    
    #content small {
        margin: 0 auto;
        text-align: center;
        display: block;
        border-top: 3px solid #333;
        border-bottom: 1px solid #333;
        font-size: 11px;
        color: #999;
    }
    
    #content ol.commentlist {
        margin-top: 10px;
    }
    
    #content ol.commentlist li {
        border-top: 1px solid #333;
        margin-bottom: 10px;
    } 
    
        #content ol.commentlist li .commentMeta {
            width: 120px;
            float: left;
            margin-top: 5px;
        } 
        
            #content ol.commentlist li .commentMeta span {
                display: block;
            }
            
            #content ol.commentlist li .commentMeta span.author,
            #content ol.commentlist li .commentMeta span.author a {
                color: #CCC;    
                text-decoration: none;
                margin-bottom: 5px;
            }                     
            
            #content ol.commentlist li .commentMeta span.date a {
                color: #666;
                text-decoration: none;
                font-size: 11px;
            }

            #content ol.commentlist li .commentMeta span.moderate a {
                color: #ff8c01;
            }
        
        #content ol.commentlist li .commentText {
            width: 290px;
            float: right;
            padding: 5px;
            font-size: 12px;
        }
    
    #content h3 {
        color: #ff8c01;
        margin-bottom: 10px;
    }
    
    #content #commentform input {
        padding: 5px;
        font-family: Arial, Helvetica, Sans-serif;
    }
    
    #content #commentform textarea {
        width: 410px;
        padding: 10px;
        font-family: Arial, Helvetica, Sans-serif;
    }
    
    #content .nextprevious {
        height: 40px;
        display: block;
    } 
    
    #content .nextprevious a {
        color: #CCC;
    }               
    
    #content .nextprevious .left {
        float: left;
    }              
    
    #content .nextprevious .right {
        float: right;
    }
    
    #content .adBrite {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #333;
    }

#sidebar {
    width: 232px;
    float: right;
} 

    #sidebar #upperBox {
        background: url(img/upperBox_bg.jpg) top left no-repeat;
        padding: 5px 20px 10px 20px;
        margin-bottom: 10px;
        text-align: center;
    }
    
    #sidebar #upperBox h1 {
        margin-bottom: 5px;
        font: normal 30px Arial, Helvetica, Sans-serif;
        letter-spacing: -1px;
    }
    
    #sidebar #upperBox h1 a {
        color: #FFF;
        text-decoration: none;
    }                
    
    #sidebar #upperBox a img {
        display: block;
        margin: 0 auto;
        border: none;
    }
    
    #sidebar #upperBox hr {
        border: none;
        border-top: 1px solid #b15518;
        border-bottom: 1px solid #f2ae80;
    }
    
    #sidebar #upperBox p {
        margin: 5px 0;
        font-size: 10px;
        text-align: center;
    }
    
    #sidebar #upperBox input {
        height: 18px;
        padding: 5px 5px 5px 25px;
        background: url(img/upperBox_search.png) top left no-repeat;
        border: 0;
        width: 160px;
        color: #f2ae80;
        margin-top: 5px;
    }
    
    #sidebar #upperBox input:focus {
        color: #FFF;
    }
    
    #sidebar h2 {
        font-weight: normal;
        font-size: 16px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    
    #sidebar a img {
        border: none;
    }
    
    #sidebar ul {
        margin-bottom: 20px;
    }
    
    #sidebar ul li {
        font-size: 11px;
        background: url(img/bullet.png) 0 5px no-repeat;
        padding: 0 10px;
        margin: 0 0 5px 5px;
    }
    
    #sidebar ul li a {
        color: #999;
        text-decoration: none;
    }
    
    #sidebar ul li span {
        color: #666;
        margin-left: 5px;
    }
    
    #sidebar ul li a:hover {
        color: #CCC;
    }
    
    #sidebar ul#nav {
        margin: 10px 0 20px 0;
    }
    
    #sidebar ul#nav li {
        margin: 0;
        padding: 0;
    }
        
    #sidebar ul#nav li a {
        display: block;
        height: 17px;
        padding: 7px 10px;
        background: url(img/nav_off.png) 0 0 no-repeat;
        margin-bottom: 5px;
        text-decoration: none;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: bold;
        color: #999;
    }

    
    #sidebar ul#nav li a:hover {
        background: url(img/nav_off.png) 0 -31px no-repeat;
    }        
    
    #sidebar ul#nav li a.active {
        background: url(img/nav_on.png) 0 0 no-repeat;
        color: #FFF;
    }

#sidebar #footer {
    border-top: 3px solid #444;
    border-bottom: 1px solid #444;
    padding: 7px 0;
    font-size: 11px;
}

    #sidebar #footer p {
        margin-bottom: 5px;
        color: #999;
    }
    
    #sidebar #footer a {
        color: #999;
    }
    
    #sidebar #footer a:hover {
        text-decoration: none;
        color: #CCC;
    }

.clearfix {
    clear: both;
}    
#sidebar ul#sidebar li {
    list-style-type: none;
}

Ich habe da echt keine Idee mehr.

connexo · 22. Oktober 2008

Du verwendest invalides XHTML, wie mein Vorredner dir schon zu erklären versuchte.

Die <ul> hat bei Dir die id sidebar, der die Liste umgebende <div> aber auch. Das geht nicht. Jede id kann nur einmal pro XHTML-Dokument vergeben werden.

Funktionieren müsste aber:

CSS:

div#sidebar ul {
  list-style-type: none;
}

Das wirkt sich dann aber auf alle (ungeordneten) Listen unterhalb des div#sidebar aus, sofern sie nicht explizit anders gestylt werden.

Du solltest aber in jedem Fall dringend die id in der Liste abändern, z.B. in id="sidebar-list".

Dann wäre das korrekte CSS:

CSS:

div#sidebar ul#sidebar-list {
  list-style-type: none;
}

Das li würde ich nicht dahinter schreiben, da list-style-type nun einmal eine Eigenschaft von ul bzw. ol ist, nicht von li.

P.S.: Mittels

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

gibst Du an, dass Deine Dokumente in englischer Sprache verfasst sind. Änder das mal auf:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

Maik · 22. Oktober 2008

outsidaa hat gesagt.:
Hmm, geht immer noch nicht.

Kann auch nicht, da du das Bullet-Zeichen hier als Hintergrundbild definierst, da nützt dann list-style-type:none auch herzlich wenig.

Code:

    #sidebar ul li {
        font-size: 11px;
        background: url(img/bullet.png) 0 5px no-repeat;
        padding: 0 10px;
        margin: 0 0 5px 5px;
    }

Ergo mußt du diese Regel spezifizieren, damit sie nicht für die Listeneinträge der ersten Listen- bzw. Menüebene gilt. Und da die ID #sidebar nur einmal im Dokumentenbaum enthalten sein darf, taufe ich hier den ID-Bezeichner der Liste auf #sidebarMenu um, und übergeb zusätzlich der nachfolgenden Liste, die sich ebenfalls innerhalb des DIVs #sidebar befindet, und für die die CSS-Regel bzgl. des grafischen "Bullets" wohl weiterhin gelten soll, die ID #latestEntries, um den Selektor wie folgt zu formulieren:

Code:

#sidebar #sidebarMenu ul li, #sidebar #latestEntries li {
                font-size: 11px;
                background: url(img/bullet.png) 0 5px no-repeat;
                padding: 0 10px;
                margin: 0 0 5px 5px;
        }

Code:

<div id="sidebar">
        ...
        <ul id="sidebarmenu"> ... </ul>
        <ul id="latestEntries"> ... </ul>
</div>

Im übrigen wären alle hier gezeigten CSS-Regeln eigentlich überhaupt nicht erforderlich, da du zu Beginn des Stylesheets mit dem Universalselektor * für alle im (X)HTML-Dokument enthaltenden Elemente schon die folgende Regeln festgelegt hast:

Code:

* { margin: 0; padding: 0; list-style: none; }

und um diese an einer bestimmten Stelle im Markup aufzuheben, bedienst du dich hier sogar der !important-Regel:

Code:

    #content .post ul li {
        list-style-type: disc !important;
    }

mfg Maik

outsidaa · 22. Oktober 2008

Besten Dank Jungs! Der Laden läuft!

Maik · 22. Oktober 2008

Hatten wir dich heute nicht dreimal darauf aufmerksam gemacht, dass eine ID nur einmal enthalten sein darf?

Code:

<h2>Latest Entries</h2>
<ul id="latestEntries">
	...
</ul>

		
<h2>Friends</h2>
<ul id="latestEntries">
	...
</ul>

Line 175, Column 9: ID "latestEntries" already defined.

<ul id="latestEntries">

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Quelle: http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Entweder nennst du die doppelt vorhandene ID der zweiten Liste um (z.B. #friends), oder du wandelst die ID #latestEntries in den Klassenbezeichner .latestEntries um (<ul class="latestEntries">), denn dieser darf unbegrenzt vergeben werden. Das ist auch der kleine, aber entscheidende Unterschied zwischen einem ID- und Klassenbezeichner.

Wofür du dich auch entscheidest, beides muß für die Funktionalität in meinem vorgeschlagenen Selektor berücksichtigt werden.

Code:

#sidebar #sidebarMenu ul li, 
#sidebar #latestEntries li, 
#sidebar #friends li {
                font-size: 11px;
                background: url(img/bullet.png) 0 5px no-repeat;
                padding: 0 10px;
                margin: 0 0 5px 5px;
        }

Code:

#sidebar #sidebarMenu ul li, 
#sidebar .latestEntries li {
                font-size: 11px;
                background: url(img/bullet.png) 0 5px no-repeat;
                padding: 0 10px;
                margin: 0 0 5px 5px;
        }

mfg Maik

✔ list-style-type greift nicht

outsidaa

Mitglied

Maik

outsidaa

Mitglied

connexo

Grünschnabel

Maik

outsidaa

Mitglied

Maik

Neue Beiträge