:nth-of-typ Zählung auf Null setzen

ChOpSueY! · #1 (**permalink**) 08.10.2014, 00:20

Hallo Gemeinde,
ich stehe vor einem tricky Problem und weiß nicht wie ich es lösen kann - und ich befürchte auch das es vielleicht gar nicht zu lösen ist.

Hier mein Testcase

Ich möchte Produkte nebeneinander darstellen. In der großen Ansicht sollen es 3 Produkte pro Zeile sein.

Nun arbeite ich ja mit 30% Breite für die Produktboxen und folglich einem margin von 5% nach rechts.

Mit der Klasse :nth-of-type möchte ich jetzt jeweils das letzte Produkt in einer Reihe mit margin-right: 0; belegen, damit alles schön bündig ist.

Ich habe das wie im Testcase zu sehen mit festen Nummern gemacht. Nun habe ich aber folgendes Problem:

Ich möchte auf meiner Seite die Produkte unterteilen. Nach einer handvoll Produkten kommt die zweite H2-Überschrift mit der ich ja clearen muss.

Wenn jetzt die letzte Reihe des ersten Blocks nicht mit 3 Produkten aufgefüllt ist stimmen natürlich die Nummern nicht mehr und die Reihenfolge auch nicht mehr. Dann erhält wie im Testcase zu sehen eben das 9. Element den margin-right:0 und es geht nicht mehr auf.

Also entweder frage ich mich jetzt ob man den Zähler nach der zweiten H2 wieder auf 0 setzen kann, oder ob es irgendwie anders möglich ist.

Ich hoffe auf Eure Hilfe.

Gruß
ChOp

cloned · #2 (**permalink**) 08.10.2014, 07:53

Du verwendest die falsche Semantik für den Aufbau deiner Seite. Du hast eine Liste von Produkten. Was ist das HTML Element für eine Liste? Richtig, eine Liste. Was verwendest du? Fälschlicherweise divs. Verwende die richtigen Elemente, dann hast du auch keine Probleme damit.
Btw, du kannst dein Vorhaben auch mit flexbox realisieren.

etux · #3 (**permalink**) 08.10.2014, 08:07

Zitat:

Zitat von ChOpSueY!

... oder ob es irgendwie anders möglich ist.

Ja, beispielsweise als Blocksatz formatieren:

HTML-Code:

#wrapper {
	width: 1200px;
	margin: 0 auto;
	text-align: justify;
}
#wrapper:after {
	content: '';
	display: inline-block;
	padding-left: 100%;
}
#wrapper h2 {
	display: inline-block;
	width: 100%;
}
#wrapper .angebote_wrap {
	display: inline-block;
	width: 30%;
	min-height: 200px;
	margin-bottom: 3%;
	text-align: left;
	background: #ccc;
}

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Var_Dump problem	PHP-Freak	Serveradministration und serverseitige Scripte	6	04.09.2013 12:29
Wordpress zerhakt meine HTML Code	gabischatz	Offtopic	11	01.04.2013 13:54
#1064 Error - Konflikt zwischen zwei Datenbank versionen?	pRe	Serveradministration und serverseitige Scripte	8	11.02.2007 12:41
Problem mit Dastellung in IE7 und FF	ConiKost	CSS	1	05.07.2006 12:59
Abstand von Links in einer Box auf Null setzen	strunck	CSS	2	11.05.2004 09:48