Wo kommt .clearfix her?

jester · 25. Juli 2011 18:21

Kaum ein Problem gelöst, taucht schon das nächste wieder auf.

Zusätzlich zum Ausklappmenü möchte ich links einen Bereich mit der Unternavigation haben. Soweit kein Problem, nur die Formatierung will nicht gelingen.

Wenn ich im Stylesheet die Links für die Navigation im Sidebar definieren will, so klappt das nur bedingt:

Hier klicken, um den Code zum Kopieren zu markieren

#sidebar  {     
width: 200px; 
height:407px;     
float: left;     
background: #dedede url(uploads/images/grauegrafik.jpg) top right no-repeat;     
padding: 0px;     
margin-top: 20px;     
font-family: Arial, sans-serif;     
font-size: 14px;         
list-style-type: none;         
color: #000000; 
}

font-family wird akzeptiert, font-size auch, aber list-style-type ebenso wenig wie color.

Wenn ich mir mit Hilfe des WebDeveloperToolbars "Style Informationen anzeigen" lasse, sehe ich, dass da die Klasse .clearfix angewendet wird:

Hier klicken, um den Code zum Kopieren zu markieren

html > body > div #container > div #sidebar > ul .clearfix > li

Ich habe die aber nie irgendwo definiert. Wo kommt die her, wie kann ich die ändern?

Besten Dank!

Andynium · 25. Juli 2011 19:07

Hattest du in deinem "anderen" Thread nicht von den Muster-Templates gesprochen?

Und da gibt es eine CSS-Klasse .clearfix ...

mike-r · 25. Juli 2011 20:51

Wenn ich im Stylesheet die Links für die Navigation im Sidebar definieren will, so klappt das nur bedingt:
[...]
font-family wird akzeptiert, font-size auch, aber list-style-type ebenso wenig wie color.

list-style-type kann schlecht funktionieren, weil Deine Links keins haben.
Die Color wird sicher irgendwo nochmal extra gesetzt sein, und genau dort, wo Du es haben willst; an "a:link".
Oder redest Du von den Listenpunkten? Welches Element hat die ID #sidebar? Die Listenpunkte sicherlich nicht (wäre auch Quatsch).

Wahrscheinlich möchtest Du #sidebar ul oder #sidebar li oder #sidebar (li) a mit Deinen Eigenschaften versehen.

Btw: Height für Elemente zu vergeben sorgt mit grosser Sicherheit dafür, dass unter bestimmten Bedingungen die Seite zerschossen wird. Text-zoom, minimale Schriftgrösse, Mobile Browser wären da ein paar Beispiele.
Wenn es Dir auf die Hintergrundgrafik ankommt, wäre es besser diese so zu bauen, dass sie immer stimmig ist, bspw. indem man in eine bestimmte reine Farbe auslaufen lässt.
Kompliziertere Sachen wie runde Ecken etc. lassen sich via http://www.andreas-kalt.de/webdesign/tu … unde-ecken totschlagen.

Des weiteren sollte man Schriftgrössen nicht in Pixeln angeben. (Eigentlich sollte man Schriftgrössen überhaupt nicht angeben, da die Browservorgaben i.d.R. schon stimmig genug sind). Besser sind relative Schriftgrössen wie em, % oder gar keine Angabe der Einheit.

Beitrag geändert von mike-r (25. Juli 2011 20:54)

jester · 25. Juli 2011 20:59

cyberman schrieb:

Hattest du in deinem "anderen" Thread nicht von den Muster-Templates gesprochen?
Und da gibt es eine CSS-Klasse .clearfix ...

Jo, aber ich finde sie nicht ...

Im minimal-menu.tpl gibt es eine Klasse .currentpage - die ich auch nicht formatiert bekomme und die witzigerweise auch nicht angezeigt wird. Das verwendete Menü-Template ist aber minimal-menu.tpl. Und das hinterlässt mich jetzt in dieser Sache immer noch ratlos.

Ich gehe übermorgen frisch an das Thema ran - wahrscheinlich habe ich heute einfach schon zu lange daran gearbeitet und verstehe die einfachsten Sachen nicht mehr.

Beitrag geändert von jester (25. Juli 2011 21:10)

jester · 25. Juli 2011 21:08

@ mike-r

list-style-type kann schlecht funktionieren, weil Deine Links keins haben.

Oh Mann, klar. Irgendwann ist man wirklich vernagelt!

Wahrscheinlich möchtest Du #sidebar ul oder #sidebar li oder #sidebar (li) a mit Deinen Eigenschaften versehen.

Und genau das habe ich inzwischen auch schon gemacht.

Height für Elemente zu vergeben sorgt mit grosser Sicherheit dafür, dass unter bestimmten Bedingungen die Seite zerschossen wird. Text-zoom, minimale Schriftgrösse, Mobile Browser wären da ein paar Beispiele. Wenn es Dir auf die Hintergrundgrafik ankommt, wäre es besser diese so zu bauen, dass sie immer stimmig ist, bspw. indem man in eine bestimmte reine Farbe auslaufen lässt.

Da hast Du natürlich Recht, aber das war nicht die Anforderung des Kunden. Die Anforderung war, eine bestimmte Grafik genau so wie im vorherigen Layout eingebaut zu bekommen. Und der Wunsch des Kunden ist mir da Befehl ... Darum auch kein Auslaufen in eine Farbe oder so. Ganz herzlichen Dank zu dem Link mit den runden Ecken - der wird sicher mal hilfreich sein und ist schon gebookmarked!

Des weiteren sollte man Schriftgrössen nicht in Pixeln angeben. (Eigentlich sollte man Schriftgrössen überhaupt nicht angeben, da die Browservorgaben i.d.R. schon stimmig genug sind). Besser sind relative Schriftgrössen wie em, % oder gar keine Angabe der Einheit.

Auch da hast Du natürlich Recht. Nachdem das Layout steht, ändere ich das in der Regel zu em um. Beim "Bauen" finde ich die fixen Pixelangaben aber "zuverlässiger".

Danke!

jester · 25. Juli 2011 21:17

Manchmal tut etwas Abstand doch gut. Das Problem war nicht .clearfix, sondern .currentpage. Und wenn man dann noch vor lauter Coden nicht sieht, dass man zur Formatierung der Links in der Sidebar statt eines Punkts einen Doppelpunkt geschrieben hat, kann es auch nicht gehen ...

Falscher Code:

Hier klicken, um den Code zum Kopieren zu markieren

#sidebar a:currentpage 
{
     color: #9e1527;
        font-size:110%;
        text-decoration: none; 
}

Richtiger Code:

Hier klicken, um den Code zum Kopieren zu markieren

#sidebar a.currentpage 
{
     color: #9e1527;
        font-size:110%;
        text-decoration: none; 
}

Danke für Eure Hilfe, die mich auf die richtigen Fährten gesetzt hat!

Forum für CMS/made simple

#1 25. Juli 2011 18:21

Wo kommt .clearfix her?

#2 25. Juli 2011 19:07

Re: Wo kommt .clearfix her?

#3 25. Juli 2011 20:51

Re: Wo kommt .clearfix her?

#4 25. Juli 2011 20:59

Re: Wo kommt .clearfix her?

#5 25. Juli 2011 21:08

Re: Wo kommt .clearfix her?

#6 25. Juli 2011 21:17

Re: Wo kommt .clearfix her?

Fußzeile des Forums