Style überschreiben

[Jan Herold]

Hallo,

ich habe ein Projekt auf mozdev.org. Für die dort gehosteten Seiten gibt es ein zentrales Stylesheet, dass ein einheitliches Layout garantieren soll. In diesem ist für Listen folgendes definiert:

#main-content ul {
  list-style-type: square;
  list-style-image: url(http://www.mozdev.org/sharedimages/bullet.gif);
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
}

Die Eigenschaft padding-left: 0; hat zur Folge, dass auch verschachtelte Listen, egal welcher Tiefe, immer linksbündig angeordnet werden.

Ich möchte aber gern, dass verschachtelte Listen eingerückt werden.

Ich habe probiert:
Klasse definiert:

ul.indented {padding-left: 30;}

und dann im HTML:

<ul>
 <li>Ebene 1
  <ul class="indented">
   <li>
   Ebene 2
   </li>
  </ul>
 </li>
</ul>

außerdem:

<ul>
 <li>Ebene 1
  <ul style="padding-left: 30;"> (auch padding-left: 30 !important; probiert)
   <li>
   Ebene 2
   </li>
  </ul>
 </li>
</ul>

Leider ohne Erfolg. Wieso drängelt sich der Style aus der zentralen Datei immer vor?

Danke und Grüße,

Jan

[Gunnar Bittersmann]

@@Jan Herold:

Wieso drängelt sich der Style aus der zentralen Datei immer vor?

Wegen der <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität der Selektoren>.

Live long and prosper,
Gunnar

[Jan Herold]

Wegen der <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität der Selektoren>.

Live long and prosper,
Gunnar

Danke für die Antwort. Der in der zentralen Datei definierte Selektor #main-content ul hat den Wert 0101. Ich muss also einen höheren konstruieren. Dies habe ich getan mit

#main-content ul.intended {
list-style-type: square;
list-style-image: url(http://www.mozdev.org/sharedimages/bullet.gif);
list-style-position: inside;
padding-left: 30;
margin-left: 0;
}

dieser hat dann den Wert 0111, ist also höher als 0101.

<div id="main-content">
 <ul>
  <li>Ebene 1
   <ul class="indented">
    <li>
    Ebene 2
    </li>
   </ul>
  </li>
 </ul>
</div>

Nur, geholfen hat es leider immer noch nicht...

Grüße,

Jan

[Elya]

Hallo Jan,

#main-content ul.intended {

<ul class="indented">

Nur, geholfen hat es leider immer noch nicht...

aber doch nicht etwa wegen des Vertippers?

Gruß aus Köln-Ehrenfeld,

Elya

[Jan Herold]

Hallo Jan,

#main-content ul.intended {

<ul class="indented">

Nur, geholfen hat es leider immer noch nicht...

aber doch nicht etwa wegen des Vertippers?

Gruß aus Köln-Ehrenfeld,

Elya

Hallo,

ups, aber das war es leider auch nicht (schade, wäre so schön gewesen). In der CSS- und HTML-Datei ist alles ok.

Grüße,

Jan

[Engin]

Hi Jan,

Vermeide Bitte TOFU, das macht dein Post unübersichtlich, lass nur drin, worauf du antworten möchtest.

#main-content ul.intended {
<ul class="indented">
aber doch nicht etwa wegen des Vertippers?
ups, aber das war es leider auch nicht (schade, wäre so schön gewesen). In der CSS- und HTML-Datei ist alles ok.

Der vertipper ist ja korrigiert, aber wie oben schon angemerkt auch hier,

  
#main-content ul.intended {  
padding-left: 30;  
}

30 von was? Du hast es mit der 30 wa?    :-)

Grüße aus H im R,
Engin

[Engin]

Hi Jan,

#main-content ul {
  list-style-type: square;
  list-style-image: url(http://www.mozdev.org/sharedimages/bullet.gif);
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
}
Die Eigenschaft padding-left: 0; hat zur Folge, dass auch verschachtelte Listen, egal welcher Tiefe, immer linksbündig angeordnet werden.

Wie hast du die einzelnen li definiert?

<ul>
<li>Ebene 1
  <ul style="padding-left: 30;"> (auch padding-left: 30 !important; probiert)
   <li>
   Ebene 2
   </li>
  </ul>
</li>
</ul>

Leider ohne Erfolg. Wieso drängelt sich der Style aus der zentralen Datei immer vor?

Du kannst auch ohne Klasse die tiefer liegenden <li>s ansprechen,

#main-content ul li ul li{

Das natürlich nur, wenn in diesem Fall #main-content ein <div> ist, das ein <ul> enthält.

Also ~~~html <div id="main-content">
<ul>
 <li>
  <ul>
   <li></li>
  </ul>
 </li>
</ul>
</div>

  
Da brauchst du nicht mal ne Klasse für.  
  
Grüße aus H im R,  
Engin  

-- 
[Von wegen "Geld wächst nicht auf Bäumen"!](http://nimmet.de/nimmet-dateien/GeldAufBaum)  
  
![](http://nimmet.de/nimmet-bilder/valigator.gif)[Der Valligator](http://old.atomic-eggs.com/old_forum/messages/237.html#a1)  
  
["Computer sagt Nein"](http://www.comedycentral.de/index.php/Video/Detail/vid/541168/playerMode/fullscreen)

[Jan Herold]

Hallo Engin,

Wie hast du die einzelnen li definiert?

Gar nicht ...

Du kannst auch ohne Klasse die tiefer liegenden <li>s ansprechen,

#main-content ul li ul li{

Das natürlich nur, wenn in diesem Fall #main-content ein <div> ist, das ein <ul> enthält.

Ja, es ist so.

Leider kann die zentrale Formatdatei nicht geändert werden. Ich muss also was mit einem eigenen Stylesheet darübersetzen.

Hmm.

Grüße,

Jan

[Engin]

Hi Jan,

Wie hast du die einzelnen li definiert?
Gar nicht ...

Die sollten aber auch in irgendeiner Form definiert sein, die müssen doch irgendwelche margins oder paddings haben.

Leider kann die zentrale Formatdatei nicht geändert werden. Ich muss also was mit einem eigenen Stylesheet darübersetzen.

Was ich grade übersehen hatt,

<ul>  
 <li>Ebene 1  
  <ul style="padding-left: 30;"> (auch padding-left: 30 !important; probiert)  

30 von was? Luftsprünge, Saltos, Dosen...

Ansich müsste es auch mit der Klasse für die <ul> funktionieren, es sei denn, du verschweigst uns etwas.  :)

Grüße aus H im R,
Engin

[Jan Herold]

Hi Engin,

Wie hast du die einzelnen li definiert?
Gar nicht ...

Die sollten aber auch in irgendeiner Form definiert sein, die müssen doch irgendwelche margins oder paddings haben.

So, haben sie jetzt.

Was ich grade übersehen hatt,

<ul>

<li>Ebene 1
  <ul style="padding-left: 30;"> (auch padding-left: 30 !important; probiert)

>   
> 30 von was? Luftsprünge, Saltos, Dosen...  
  
Darauf habe ich nicht geachtet, denn bei mir lokal funktioniert es ja. Ich habe mir extra alle referenzierten Stylesheets runtergeladen und bei mir eingebunden - es geht, so wie es soll.  
  
Erst wenn ich die Dateien auf den Server schiebe, ist die Einrückung weg.  
  
Das Angeben vom Maßeinheiten hat auch nicht geholfen :-(  
  

> Ansich müsste es auch mit der Klasse für die <ul> funktionieren, es sei denn, du verschweigst uns etwas.  :)  
  
Na wenn ich das wüßte, dass ist ja das Problem. Irgenetwas übersehe ich hier bestimmt! Nur was?  
  
Grüße,  
  
Jan

[Engin]

Hi Jan,

Darauf habe ich nicht geachtet, denn bei mir lokal funktioniert es ja. Ich habe mir extra alle referenzierten Stylesheets runtergeladen und bei mir eingebunden - es geht, so wie es soll.
Erst wenn ich die Dateien auf den Server schiebe, ist die Einrückung weg.

Es geht ja sicherlich um die Seite, die unter deinem Namen eingeblendet wird,

da wird doch alles richtig eingerückt oder was ist das Ziel?

Gelb sind margin und Pink? sind padding.

Grüße aus H im R,
Engin

[Jan Herold]

Hi Engin,

Es geht ja sicherlich um die Seite, die unter deinem Namen eingeblendet wird,

Ja.

da wird doch alles richtig eingerückt oder was ist das Ziel?

Ja, jetzt schon. Weiter oben im Thread habe ich schon die Lösung gepostet.

Danke nochmal.

Jan

[Engin]

Hi Jan,

Ja, jetzt schon. Weiter oben im Thread habe ich schon die Lösung gepostet.

Den Post hatte ich erst nach dem Senden meines Posts gesehen.

Aber wo ich schon mal hier bin,

du kannst das was du hast auch ohne Klassen realisieren,

  
#main-content-no-nav ul li ul ,  
#main-content ul li ul {  
...  
}  

  
<ul>  
   <li>  
      <ul>  
         <li></li>  
      </ul>  
  </li>  
</ul>

Ist Natürlich nur auf Freiwilliger Basis. :)

Ich Persönlich finde es schöner, grade bei Listen und verschachtelung kann man sich nahezu alle
Klassen sparen[1].

Grüße aus H im R,
Engin
[1] Es sei denn man möchte was wirklich ausgefallenes umsetzen

[Jan Herold]

Hi an alle,

ich habe es gelöst. Es waren doch die fehlenden Einheiten. Die haben bei mir lokal nichts ausgemacht, aber auf dem Server gab es damit Probleme.

Stylesheet:

#main-content-no-nav ul.indented,
#main-content ul.indented {
list-style-type: square;
list-style-image: url(http://www.mozdev.org/sharedimages/bullet.gif);
list-style-position: inside;
padding-left: 20pt;
margin-left: 20pt;
}

HTML:
<ul>
 <li>Ebene 1
  <ul class="indented">
   <li>
   Ebene 2
   </li>
  </ul>
 </li>
</ul>

Danke an alle für die Mühen.

Grüße,

Jan