UL Liste mit CSS formatieren

**danielk** · 30.01.2010, 16:38

Hallo!

in der folgenden Aufzählung versuche ich vergebens den UL-Befehl über meine style.css anzusprechen. Leider wird immer eine Formatierung aus der Standard html.css Datei genommen, die mit einem linken Padding von 40px voreingestellt ist.

Wie muss ich die Formatdefinition schreiben, dass die Einstellungen wirksam werden?

HTML-Code:

<div class="mod_article qualitaet block" id="qualitaetsmerkmale">

<div class="ce_list block">

<ul>
  <li class="first">Punkt 1</li>

  <li>Punkt 2</li>
  <li>Punkt 3</li>
  <li>Punkt 4</li>
  <li class="last">Punkt 5</li>
</ul>

</div>

</div>

Gruß Daniel

**planepix** · 30.01.2010, 16:49

Hallo Daniel,

versuch es einmal so:

Code:

#qualitaetsmerkmale .ce_list ul
{
margin:0;
padding:0
list-style-type:none;
}

Wenn Du einen Selektor überschreiben willst, kannst Du auch ein !important anfügen.

Code:

#main .ce_list ul
{
margin:0;
padding:0 !important;
list-style-type:none;
}

Hier werden dann alle Listen-uls in der Hauptspalte ohne Abstand angezeigt.

**danielk** · 30.01.2010, 17:03

Hi, ich habe beide Varianten ausprobiert. Leider ohne Ergebnis.

Nur zum Verständnis, dass es nicht ein doofer Fehler meinerseits ist.

Code:

#qualitaetsmerkmale .ce_list ul

schreibe ich in die Spalte Selektor.

und

Code:

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

in die Spalte "Eigener Code".

Falls ich das richtig gemacht habe, sind beide Varianten ohne Ergebnis.

Gruß Daniel

**Sarvo** · 30.01.2010, 17:09

hast du denn deine style.css in dein layout eingebunden ?

**danielk** · 30.01.2010, 17:11

Zitat von Sarvo

hast du denn deine style.css in dein layout eingebunden ?

Ja. Grundsätzlich werden Eingaben auch übernommen.

***alex*** · 30.01.2010, 17:14

Hallo Daniel,

hast Du mal einen Link zu der Seite ?

**danielk** · 30.01.2010, 17:17

Zitat von alex

Hallo Daniel,

hast Du mal einen Link zu der Seite ?

Hallo Alex, leider ist es nur eine lokale Installation. Gruß Daniel

**Sarvo** · 30.01.2010, 17:21

und warum nimmst du das ul padding von deiner html.css nicht raus ?

Versuch es doch mal generell rauszunehmen und dann dort wo du es brauchst zu aktivieren

**danielk** · 30.01.2010, 17:35

Zitat von Sarvo

und warum nimmst du das ul padding von deiner html.css nicht raus ?

Weil die HTML.css garnicht Bestandteil meines Projekts ist ;-) Kann es sein dass diese CSS Datei vom Browser (z. B. Firefox) kommt?

Firebug gibt folgendes aus:

Code:

ul, menu, dir {
display:block;
list-style-type:disc;
margin-bottom:1em;
margin-left:0;
margin-right:0;
margin-top:1em;
padding-left-ltr-source:logical;
padding-right-rtl-source:logical;
padding-start-value:40px;
}

Wenn ich mit dem Firebug über dieses Forum gehe, wird mir u. a. auch die html.css (System) angezeigt.

Um eins vorweg zu nehmen. Im Internet Explorer sieht das Design gleich aus.

**danielk** · 30.01.2010, 17:49

Habe jetzt auch mal das Reset-Stylesheet von https://contao.org/herunterladen.html integriert. Hat leider aber auch keine Änderung bewirkt.

**Sarvo** · 30.01.2010, 19:35

wenn diese html.css bei dir im seitenlayout eingebunden ist, dann werf sie doch raus, wenn du sie nicht benutzt.

Ansonsten, haut Typolight keine Paddingwerte für ul in deine Seite, da brauchst du dir keine sorgen machen.

Poste doch mal deine Stylesheets die du in dein Layout eingebunden hast. Dann kann man dir besser helfen.

**whitestone** · 31.01.2010, 21:29

hallo

schau dir mal diesen thread an

https://community.contao.org/de/showthread.php?t=3814

bei mir hat s funktioniert

**danielk** · 01.02.2010, 13:44

Zitat von Sarvo

wenn diese html.css bei dir im seitenlayout eingebunden ist, dann werf sie doch raus, wenn du sie nicht benutzt.

Habe ich nicht.

Zitat von Sarvo

Poste doch mal deine Stylesheets die du in dein Layout eingebunden hast. Dann kann man dir besser helfen.

Das ist das Stylesheet was ich eingebunden habe, sonst nichts.

style.css

Code:

/* Style sheet style */
body{background:url("tl_files/dipos/fondo.jpg") center top no-repeat;background-attachment: fixed;}
#wrapper{background-color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#000000;line-height:1.5;}
.mod_flash{height:159px;float:left;background:url("tl_files/dipos/fon_header.jpg") left top no-repeat;}
.headerrechtsoben{height:159px;float:right;background:#3DC463 url("tl_files/dipos/fondo_top_der.jpg") right bottom no-repeat;}
.mod_navigation.subnav{width:208px;float:left;font-family:Verdana, Geneva, sans-serif;font-weight:bold;font-size:11px;color:#2F5154;}
.mod_navigation.subnav li{position:relative;margin-left:-33px;padding-top:10px;padding-bottom:25px;padding-left:12px;background-image:url("tl_files/dipos/fon_boton.jpg");background-repeat:no-repeat;font-family:Verdana, Geneva, sans-serif;font-weight:bold;font-size:11px;color:#ff0000;list-style-type:none;text-decoration: none;}
.mod_navigation.subnav a:link,a:visited{font-family:Verdana, Geneva, sans-serif;font-weight:bold;font-size:11px;color:#2F5154;text-decoration: none;}
.mod_navigation.subnav a:hover{font-family:Verdana, Geneva, sans-serif;font-weight:bold;font-size:11px;color:#2F5154;text-decoration: underline;}
#main .centerimage{width:370px;float:left;}
.separador{width:100%;background:url("tl_files/dipos/separador.jpg") left top repeat-x;}
.mod_article{width:550px;clear:left;padding-right:10px;padding-left:10px;}
.qualitaet{margin-top:-1150px;background-image:url("tl_files/dipos/fondo_der.jpg");background-repeat:repeat-y;}
#main .ce_list ul{{margin:0;padding:0 !important;list-style-type:none;}}
.qualitaet .ce_list{width:205px;font-family:Verdana, Geneva, sans-serif;font-size:11px;color:#666666;list-style-image:url("tl_files/dipos/vineta.jpg");}
#right .verpackungrechts{width:222px;float:left;}
#right .grauerbalken{width:222px;height:1200px;background-image:url("tl_files/dipos/fondo_der.jpg");background-repeat:repeat-y;}
#footer{background-image:url("tl_files/dipos/footer.jpg");background-repeat:no-repeat;}

Gruß Daniel

**xtra** · 01.02.2010, 18:17

Zitat von danielk

Nur zum Verständnis, dass es nicht ein doofer Fehler meinerseits ist.

Code:

#qualitaetsmerkmale .ce_list ul

schreibe ich in die Spalte Selektor.

Ja

Zitat von danielk

und

Code:

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

in die Spalte "Eigener Code".

Nein.
Da schreibst du den Code ohne die {} rein, die {} erzeugt dir TYPOlight von alleine.

Code:

margin:0;
padding:0
list-style-type:none;

Dann sollte es klappen.

**Thomas** · 02.02.2010, 08:23

Ich hake hier mal ein!

Denn diese html.css kommt von Firefox und wird (leider) vom aktuellen Update des Firebugs mit eingebunden.

Diese html.css kommt also vom System, steht auch im Firebug.
Diese Datei ist normaler Weise dafür zuständig, unformatierte Seiten wenigstens ein wenig zu formatieren.

Leider führt das genau zu diesen angesprochenen Problemen, bei der Entwicklung.

Bei mir werden teilweise Seiten, im Firefox, überhaupt nicht formatiert ausgegeben, was mich, tschuldigung, ziemlich ankotzt.

Bis jetzt habe ich leider noch keine Lösung dafür gefunden.

***lucina*** · 02.02.2010, 09:30

Code:

margin:0;
padding:0;
list-style-type:none;

Da fehlte ein Semikolon (just for the case ...).
Carolina.

**danielk** · 02.02.2010, 11:18

Zitat von Thomas

Ich hake hier mal ein!

Denn diese html.css kommt von Firefox und wird (leider) vom aktuellen Update des Firebugs mit eingebunden.

Gut zu wissen das es zumindest kein "hausgemachtes" Problem ist. Wenn das viele andere Nutzer des Firebug nur ansatzweise so stört wie mich, dann sollte das Bug im Bug bald behoben werden.

**Thomas** · 02.02.2010, 19:28

Wird es wohl!
Dummer Weise habe ich die ältere Firebug Version nicht archiviert und ein schlichtes Update gemacht.
Ärgert mich jetzt schon wieder.

Vielleicht könnte sie Jemand zur Verfügung stellen!?

Es macht mit diesem Umstand zur Zeit einfach keinen Spaß, da Fehler auftreten, die es eigentlich garnicht geben sollte.

Nachtrag:
Firebug scheint neuerdings Probleme damit zu haben, gewisse CSS-Anweisungen richtig an zu zeigen.

Ein kleines Workarround habe ich dafür!

Scheinbar verlangt Firebug im Moment die genaue Spezifikation und das direkte Ansprechen von Klassen und IDs.

Beispiel:
Bisher war es möglich:

Code:

.ce_table {
Anweisung
}

zu schreiben.

Ekliger Weise setzt Firebug das scheinbar nicht immer um!

Man kann das umgehen, indem man den DIV, oder was auch immer, direkt anspricht:

Code:

div.ce_table {
Anweisung
}

Komischer Weise zeigt sich das fehlerhafte Verhalten des FB nicht immer.

**xtra** · 02.02.2010, 21:46

Zitat von Thomas

Wird es wohl!
Dummer Weise habe ich die ältere Firebug Version nicht archiviert und ein schlichtes Update gemacht.
Ärgert mich jetzt schon wieder.
Vielleicht könnte sie Jemand zur Verfügung stellen!?

Aber sicher doch, das machen die Jungs von Mozilla von ganz alleine:
3.5 Win
3.5 Linux
3.5 OS X