Sturmverliebt - nth-child(3n)

[MrMurphy]

Hallo Sturmverliebt

bei CSS-Angaben musst du auch auf die Reihenfolge der Eingabe achten. Spätere Angaben sollen vorherige überschreiben.

Wenn du schreibst

  
figure:nth-child(3n){  
    position: relative;  
    width: 310px;  
    height: 200px;  
        float:left;  
        margin:0 0px 20px 0  
}  
  
figure {  
    position: relative;  
    width: 310px;  
    height: 200px;  
        float:left;  
        margin:0 7px 20px 0  
}  
  

werden die Angaben vom "figure:nth-child(3n)" durch das "figure" überschrieben. (Bei den margin fehlen auch die abschließenden Semikolon)

Deshalb solltest du die beiden tauschen. Der Übersichtlichkeit und späteren Pflege wegen solltest du beim nth-child auch nur die Änderungen eintragen. Also

  
  
figure {  
    position: relative;  
    width: 310px;  
    height: 200px;  
    float:left;  
    margin:0 7px 20px 0;  
}  
  
figure:nth-child(3n){  
    margin-right: 0;  
}  
  

margin-right, weil du bei "margin:0 0 20px 0;" immer erst den Ursprungszustand suchen und vergleichen müssest, welche Änderungen überhaupt erreicht werden sollen. In längeren CSS-Dateien stehen die Angaben nicht immer direkt übereinander.

Gruss

MrMurphy

[MudGuard]

Hi,

bei CSS-Angaben musst du auch auf die Reihenfolge der Eingabe achten. Spätere Angaben sollen vorherige überschreiben.

Bei gleicher specificity ja.
Sonst nein.

figure:nth-child(3n)
und
figure

haben unterschiedliche specificity.

figure hat keine id, keine Klasse, 1 Element, also specificity 0_0_1.
figure:nth-child(3n) hat keine id, 1 Pseudo-Klasse, 1 Element, also specificity 0_1_1.

(Bei den margin fehlen auch die abschließenden Semikolon)

nein. Vor der schließenden } ist das Semikolon nicht nötig.

Deshalb solltest du die beiden tauschen.

Das ändert aber nichts, da die specificity den Vorrang regelt.

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

(Bei den margin fehlen auch die abschließenden Semikolon)

nein. Vor der schließenden } ist das Semikolon nicht nötig.

Es ist aber besser, es trotzdem zu setzten. Sonst fehlt es, wenn danach noch Deklarationen hinzukommen.

(Bei Einzeilern wie
figure:nth-child(3n) { margin-right: 0 }
kann man das Semikolon auch weglassen.)

Qapla'

[MrMurphy]

Hallo

Bei gleicher specificity ja.
Sonst nein.

Stimmt. Da habe ich wohl beim Nachbau von Sturmverliebts Angaben bei mir einen Fehler eingebaut.

Beispiele an Hand von background-color

ohne nth-child:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_17_sturmverliebt_01_nth_child.html

nth-child vor:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_17_sturmverliebt_02_nth_child.html

nth-child nach:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_17_sturmverliebt_03_nth_child.html

Mit Sturmverliebts Angaben und background-color zur Unterscheidung:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_17_sturmverliebt_04_nth_child.html

Wenn margin-left nicht greift muss das Problem also an einer Stelle liegen, die Sturmverliebt uns leider vorenthält.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy:

nuqneH

Wenn margin-left nicht greift muss das Problem also an einer Stelle liegen, die Sturmverliebt uns leider vorenthält.

Dass margin-left durchaus greift, und zwar genau an der angegebenen Stelle, hatte ich auch schon angemerkt. Und zwar in dem eben nochmal verlinkten Posting.

Lesen ist nicht deine Stärke?

Qapla'

[Sturmverliebt]

Hallo,

Mit Sturmverliebts Angaben und background-color zur Unterscheidung:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_17_sturmverliebt_04_nth_child.html

Wenn margin-left nicht greift muss das Problem also an einer Stelle liegen, die Sturmverliebt uns leider vorenthält.

Ich habe euch nichts vorenthalten, wie gestern Abend in dem Online Beispiel zu sehen war. Es ging ja auch nicht um margin-left sondern darum, dass ich rechts zu viel Abstand hatte :)

[Gunnar Bittersmann]

@@MrMurphy:

nuqneH

(Bei den margin fehlen auch die abschließenden Semikolon)

BTW, der Plural ist Semikolons oder Semikola.

Und warum machst du einen neuen Thread auf anstatt im alten zu antworten?

Dann wäre dir vielleicht auch nicht entgangen, dass ich das

Der Übersichtlichkeit und späteren Pflege wegen solltest du beim nth-child auch nur die Änderungen eintragen. Also

schon sagte.

Qapla'

[MudGuard]

Hi,

BTW, der Plural ist Semikolons oder Semikola.

Ich greife mal der nächsten Rechtschreib-Deform [sic!] vor: Semikolonnen ;-)

cu,
Andreas

[Sturmverliebt]

Guten Morgen MrMurphy,

Deshalb solltest du die beiden tauschen. Der Übersichtlichkeit und späteren Pflege wegen solltest du beim nth-child auch nur die Änderungen eintragen. Also

figure {
    position: relative;
    width: 310px;
    height: 200px;
    float:left;
    margin:0 7px 20px 0;
}

figure:nth-child(3n){
    margin-right: 0;
}

>   
> margin-right, weil du bei "margin:0 0 20px 0;" immer erst den Ursprungszustand suchen und vergleichen müssest, welche Änderungen überhaupt erreicht werden sollen. In längeren CSS-Dateien stehen die Angaben nicht immer direkt übereinander.  
  
danke dir für deine ausführliche Erklärung ich werde dieses bei mir gleich ändern. Heute Nacht habe ich erstmal alle WErte von px in em geändert. Dabei ist mir aufgefallen wenn ich beim Border 1px in 0.06em schreibe, dann wird dieser mir nicht mehr angezeigt, muss also mit dem Wert etwas weiter nach oben. Ist das ein Fehler vom Browser oder kann eine EM Angabe nicht so gering sein?

[MrMurphy]

Hallo,

das Online-Beispiel ist mir bei dem Kuddelmuddel durch die Lappen gegangen. Ich habe den neuen Thread auch eröffnet, weil ich das befürchtet habe und die Hilfe für dich untergegangen ist.

was meinst du mit "rechts zu viel Abstand"?

jsfiddle ist leider auch nicht viel besser als sich den Quelltext selbst zusammenzuschustern, aber zumindest habe ich jetzt die mir fehlenden Informationen.

Ich gehe mal davon aus, das in jeder Reihe drei Bilder stehen sollen.

Das umgebende hat die Breite 935px.

Die Figure-Elemente haben die Breite 310px

und zusätzlich einen rechten Rand von 7px,

das macht pro figure-Element 317px

und bei 3 figure-Elementen 951px

minus rechter Rand für das dritte figure-Element 7px

macht 946px.

Die in den 935px unterzubringen erscheint mir recht schwierig.

Tip: Wenn du bei nth-child prüfen willst ob die angestrebten Elemente belegt werden solltest du zusätzlich immer eine poppige Hintergrundfarbe vergeben. Kost nix und wenn alles funktioniert kannst du die wieder löschen, hilft aber viel.

Ist das ein Fehler vom Browser oder kann eine EM Angabe nicht so gering sein?

Nein, die kann nicht so gering sein. Hier sind px angesagt.

Statt em sollte im übrigen heutzutage rem verwendet werden. Das verbindet die Vorteile vom festen px und den flexiblen em bzw. %, ohne deren Nachteile zu haben.

Aktuell sind folgende Einheiten sinnvoll:

Für Schriftgrößen rem.

Für padding, margin und ähnliche rem oder %, wobei nur eine Nachkommastelle zulässig ist. Wobei % nicht immer zulässig ist. Wenn das mal nicht funktionieren sollte einfach probehalber durch rem ersetzen, grade bei margin-top und margin-bottom.

Für Bildergrößen, media-queries, border, border-radius und ähnliches weiterhin px.

em ist heutzutage überflüssig geworden.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy:

nuqneH

das Online-Beispiel ist mir bei dem Kuddelmuddel durch die Lappen gegangen. Ich habe den neuen Thread auch eröffnet, weil ich das befürchtet habe und die Hilfe für dich untergegangen ist.

Mit der Eröffnung eines neuen Threads hast du das Kuddelmuddel verursacht.

Ist das ein Fehler vom Browser oder kann eine EM Angabe nicht so gering sein?

Nein, die kann nicht so gering sein.

Sagt wer?

Für wobei nur eine Nachkommastelle zulässig ist.

Sagt wer? Vielleicht solltest du dir mal die CSS-Spec zu Gemüte führen, bevor du hier weiterhin so einen Unsinn erzählst.

em ist heutzutage überflüssig geworden.

Auch das ist Quatsch. em ist immer noch vorzüglich geeignet, um Größen im jeweiligen Kontext anzugeben. sub, sup und rt sind Kandidaten für Schriftgrößen in em.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Ist das ein Fehler vom Browser oder kann eine EM Angabe nicht so gering sein?

Nein, die kann nicht so gering sein.

Sagt wer?

Es werden ggf. Mindestschriftgrößen berücksichtigt.

Matthias

[Sturmverliebt]

Hallo,

Nein, die kann nicht so gering sein.

Sagt wer?

Für wobei nur eine Nachkommastelle zulässig ist.

Sagt wer? Vielleicht solltest du dir mal die CSS-Spec zu Gemüte führen, bevor du hier weiterhin so einen Unsinn erzählst.

Ich nutze diese Seite http://calculator.tobani.com/convert/px-to-em um meine px Angaben in em umzurechnen. Dabei stelle ich die Nachkomma auf 2 ein.

[Gunnar Bittersmann]

@@Sturmverliebt:

nuqneH

Ich nutze diese Seite http://calculator.tobani.com/convert/px-to-em um meine px Angaben in em umzurechnen.

Du meinst rem.

Ich nutze dafür Sass:

@function rem($px)  
{  
	$base-fontsize: 16px;  
	@return $px/$base-fontsize * 1rem;  
}

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Ich nutze dafür Sass:

@function rem($px)

{
$base-fontsize: 16px;
@return $px/$base-fontsize * 1rem;
}

  
syntaktisch korrekt? Wie wird zwischen Minus und Bindestrich unterschieden?  
  
Auf px komplett zu verzichten, wäre auch keine ganz schlechte Lösung.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Geste und Gestein](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=G#geste).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Sturmverliebt]

Hallo,

was ist nicht ganz verstehe. Es wird immer wieder gesagt / geschrieben man sollte auf PX verzichten die sind nicht mehr Zeitgemäß. In jedem Tutorial das ich mir anschauen oder auch lese (ob es auf Youtube, Video2brain oder Galileo – Press) ist werden PX verwendet.

Auch hier im Forum wird z.B. gesagt nimm nth-child um etwas zu stylen der andere sagt wieder das ist totaler Quatsch usw. Gibt es ein Mittelding? Ich sag mir einfach ob ich eine Klasse mehr oder weniger im Quelltext stehen habe oder eine Angabe in PX / EM / REM oder % ist doch für den User und auch die Suchmaschine ganz egal?

[MrMurphy]

Hallo,

wie du deine Seiten erstellst ist im Endeffekt vollkommen dir überlassen.

Auch hier im Forum wird z.B. gesagt nimm nth-child um etwas zu stylen der andere sagt wieder das ist totaler Quatsch

Auch hier im Forum (wie in jedem anderen Forum) gibt es User, die mit der Entwicklung nicht mithalten können.

was ist nicht ganz verstehe. Es wird immer wieder gesagt / geschrieben man sollte auf PX verzichten die sind nicht mehr Zeitgemäß.

Du musst dich entscheiden, wie du deine Seite erstellen willst. Für bestimmte Elemente sind Pixel durchaus noch zeitgemäß. Im Gegensatz zu em, das überflüssig geworden ist. Es kann aber natürlich trotzdem noch benutzt werden. Du darfst dich halt nur nicht wundern oder gar ärgern, wenn Lösungen mit rem besser umzusetzen sind. Dabei geht es jetzt nicht grade um die Schriftgröße von Absätzen. Aber auch deine Seite aufwändiger werden.

Wenn du sie später einfacher "pflegen" und erweitern willst, wenn sie auf aktuellen und zukünftigen Ausgabegeräten vernünftig angezeigt werden soll, ist es schlicht sinnvoll, aktuelles HTML / CSS zu verwenden. Auch viele Probleme sind damit leichter zu lösen bzw. treten erst gar nicht auf.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy:

nuqneH

Auch hier im Forum wird z.B. gesagt nimm nth-child um etwas zu stylen der andere sagt wieder das ist totaler Quatsch

Auch hier im Forum (wie in jedem anderen Forum) gibt es User, die mit der Entwicklung nicht mithalten können.

Dem ist wohl so. Mir ist nur der Zusammenhang mit dem von Sturmverliebt Gesagten nicht klar.

Im Gegensatz zu em, das überflüssig geworden ist.

Der Unsinn wird durch Wiederholung nicht richtiger.

Qapla'

[Gunnar Bittersmann]

@@Sturmverliebt:

nuqneH

was ist nicht ganz verstehe. Es wird immer wieder gesagt / geschrieben man sollte auf PX verzichten die sind nicht mehr Zeitgemäß. In jedem Tutorial das ich mir anschauen oder auch lese (ob es auf Youtube, Video2brain oder Galileo – Press) ist werden PX verwendet.

Du kuckst ComputerBildTV? ;-)

Auch hier im Forum wird z.B. gesagt nimm nth-child um etwas zu stylen der andere sagt wieder das ist totaler Quatsch

Wer sagt denn sowas? (Ich nicht.)

oder eine Angabe in PX / EM / REM oder % ist doch für den User und auch die Suchmaschine ganz egal?

Beim Vergrößern/Verkleinern im Browser könnte es schon einen Unterschied machen, ob Dinge in px oder em/rem vermaßt sind.

Skalierbar ist, alles in Bezug zur (Basis-)Schriftgröße anzugeben. Außer dünne Linien (border-width).

Qapla'

[Sturmverliebt]

Hallo,

was ist nicht ganz verstehe. Es wird immer wieder gesagt / geschrieben man sollte auf PX verzichten die sind nicht mehr Zeitgemäß. In jedem Tutorial das ich mir anschauen oder auch lese (ob es auf Youtube, Video2brain oder Galileo – Press) ist werden PX verwendet.

Du kuckst ComputerBildTV? ;-)

auf welche der drei Anbieter ist diese Frage bezogen oder gar auf alle drei? ;)

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Skalierbar ist, alles in Bezug zur (Basis-)Schriftgröße anzugeben. Außer dünne Linien (border-width).

Das sollte mit „thin“ in Verbindung mit box-sizing auch kein Problem darstellen.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

syntaktisch korrekt? Wie wird zwischen Minus und Bindestrich unterschieden?

Minus wäre $a -$b.

Auf px komplett zu verzichten, wäre auch keine ganz schlechte Lösung.

Das tut man mit der Funktion doch. Man kippt die Pixelwerte rein (die einem der Designer aus Photoshop ausmisst), im CSS stehen die Werte in rem.

Für alte Browser kann man die Pixelwerte auch lassen:

$ua: standard !default; // für IE 8 wird $ua: ie8; gesetzt  
  
@function rem($px)  
{  
  $base-fontsize: 16px;  
  
  @if $ua = standard  
  {  
    @return $px/$base-fontsize * 1rem;  
  }  
  @else  
  {  
    @return $px;  
  }  
}

Qapla'