Bullet-Grafiken in <ul>

**Jens Pielawa** · 22.02.2010, 11:57

Hallo an alle,

ich habe ein kleines CSS-Problem: ich spreche meine Navigationsliste ganz gezielt im CSS an mit

Code:

#left .mod_navigation ul {
	list-style: none; }

dann sollte man doch auch erwarten, dass nur dort eine Bulletgrafik nicht genommen wird.
Wenn ich dann aber eine Listung anspreche und hier z. B. eine Bullet-Grafik einsetzen möchte

Code:

#ce_list block ul, ol, li {
      	list-style-image:url("tl-daten/navi/bullet.gif"); }

erscheint die global, also auch in der Navigation (egal übrigens, ob ce_list oder normale <ul>). Man sollte doch meinen, dass sich verschiedene Klassen auch verschieden verhalten, oder? Also, mein Anliegen: wie style ich eine Auflistung am besten, ohne dass andere Listen betroffen werden? Ist es richtig, dafür den Artikeltyp "Aufzählung" zu nehmen, und habe ich diese dann im CSS richtig angesprochen?

**JanoschSkuplik** · 22.02.2010, 12:04

Zitat von Jens Pielawa

Code:

#ce_list block ul, ol, li {
      	list-style-image:url("tl-daten/navi/bullet.gif"); }

Hallo Jens,
hiermit sprichst du alle li's an. Versuchs mal mit

Code:

.ce_list ul, .ce_list ol{
      	list-style-image:url("tl-daten/navi/bullet.gif"); }

Dann müsste es eigentlich klappen.

Gruß Janosch

**Jens Pielawa** · 22.02.2010, 13:29

Hallo Janosch,
ja das hat geholfen, vielen Dank. Ich habe eine Zitrone als Bullet, und das sieht in der Navigation zusätzlich reichlich dämlich aus...

Nur noch eine kurze CSS-Frage: kann es sein, dass sich in einer <ul> die Fontgrößen in em irgendwie multiplizieren bzw. vererben? Ich habe im <body> font-size:100.01% und in <p> font-size:0.81em;
Wenn ich in der <ul> nun font-size: 1em setze, erscheint sie größer als <p>, setze ich font-size: 0.81em (wie im <p>), wird sie minimiert (offenbar 0,81 x 0,81). Wo ist denn hier der goldene Mittelweg, um <ul>-Schriftgrößen auf die gleiche Höhe zu bekommen?

**JanoschSkuplik** · 22.02.2010, 13:39

Hallo Jens,

hast du da vllt. mal ein html-Code-Bespiel von dir, bei dem das auftritt.

Es ist nämlich so, dass sich die font-size vererbt, d.h. wenn du deiner ul 0.8em zuweist und innerhalb dieser einen Absatz hast (der ja ebenfalls 0.8em hat), so wird dieser im Endeffekt 0.64em groß).

Gruß Janosch

**Jens Pielawa** · 22.02.2010, 13:47

Aktuelles Online-Gebastel (auf einer Homepage, der man eh noch nicht die Tür einrennt, Navi ist auch noch nicht astrein durch) unter http://www.sender-zitrone.de/verein-ziele.htm.

Edit: ich habe es jetzt herausgefunden.
Ich habe <ul> und <li> getrennt (sowohl für die <div id="liste"> als auch für .ce_list:

Code:

#liste ul,#liste ol{margin:0 0 0 0.1em;padding-left:20px;list-style-position: outside;}
#liste li{margin:0 0 1.13em 0;font-size:0.81em;color:#365c40;line-height:1.44em;list-style-image:url("tl-daten/navi/bullet.gif");list-style-position: outside;}
.ce_list ul,.ce_list ol{margin:0 0 0 0.1em;padding-left:20px;list-style-position: outside;}
.ce_list li{margin:0 0 1.13em 0;font-size:0.81em;color:#365c40;line-height:1.44em;list-style-image:url("tl-daten/navi/bullet.gif");list-style-position: outside;}

Das heißt, nur die <li> kümmert sich um die Schriftart-Formatierung, und dann passt hier auch font-size:0.81em; wie beim <p>, ohne dass es weiter skaliert wird.

**JanoschSkuplik** · 22.02.2010, 13:57

Dein Problem dort in der List ist, dass du in deiner 1. css-Anweisung sowohl der ul, als auch den einzelnen li's eine font-size von 0.91em zuweist.

Versuch doch mal die font-size aus den Anweisung raus zu bekommen und dann nur den li's zuzuordnen.