nicht angemeldet
Problem mit Ausrichtung von Listenelementen
Gunnar Bittersmann
Matthias ApselHallo,
ich möchte eine Liste mit beliebiger Anzahl an Listenelementen so formatieren, dass immer drei Elemente nebeneinander dargestellt werden und ab jedem vierten Element eine neue "Zeile" angefangen wird.
Hierbei habe ich folgende Vorgaben:
- Gesamte Breite der Liste: 579px
- Abstand zwischen jedem zweiten und dritten Element: 12px;
- Jedes dritte Element hat rechts keinen Abstand, damit es sich am rechten Rand der Liste anordnet
- Breite jeden Listenelements: 185px
- Ab dem vierten Element hat jedes Element einen oberen Abstand von 12px
Wenn ich nun eine Reihe zusammen zähle, dann komme ich genau auf 579px (185px + 12px + 185px + 12px + 185px), so dass mein Vorhaben, immer drei Listenelemente nebeneinander darzustellen, erfüllt wären.
Hier der css-Code ("margin" und "padding" habe ich vorher bereits global auf jeweils "0px" gesetzt):
ul.Sortiment
{
list-style: none;
width: 579px !important;
}
ul.Sortiment li
{
background: #048;
color: white;
float: left;
margin: 12px 12px 0px 0px;
text-align: center;
vertical-align: top;
width: 185px !important;
}
ul.Sortiment li:first-child,
ul.Sortiment li:first-child + li,
ul.Sortiment li:first-child + li + li
{
margin-top: 0px;
}
ul.Sortiment li:nth-child (3n)
{
margin-right: 0px;
}
Der html-Code:
<body>
<ul class="Sortiment">
<li>Artikel 1</li>
<li>Artikel 2</li>
<li>Artikel 3</li>
<li>Artikel 4</li>
<li>Artikel 5</li>
</ul>
</body>
Das gewünschte Ergebnis wäre:
+-----------+ +-----------+ +-----------+
| Artikel 1 | | Artikel 2 | | Artikel 3 |
+-----------+ +-----------+ +-----------+
+-----------+ +-----------+
| Artikel 4 | | Artikel 5 |
+-----------+ +-----------+
Die tatsächliche Ausgabe im Browser ist aber:
+-----------+ +-----------+
| Artikel 1 | | Artikel 2 |
+-----------+ +-----------+
+-----------+
| Artikel 3 |
+-----------+
+-----------+
| Artikel 4 |
+-----------+
+-----------+
| Artikel 5 |
+-----------+
Was habe ich falsch gemacht?
Vielen Dank für eure Hilfe und Gruß,
Enrico
-
@@Enrico:
nuqneH
Hierbei habe ich folgende Vorgaben:
- Gesamte Breite der Liste: 579px
Unsinnige Vorgabe. Viele Viewports sind schmaler, Tendenz steigend.
Was habe ich falsch gemacht?
Die Eigenart deines Boxmodells nicht beachtet.
Auf nth-child und das Nullen von margin-top für die ersten 3 Items könntest du auch verzichten:
.Sortiment { margin: -6px } .Sortiment > li { margin: 6px }Haben alle li denn diselbe Höhe? Ansonsten wäre ein clearendes Wort zu sprechen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hallo Gunnar,
danke für Deine Antwort.
.Sortiment { margin: -6px }
.Sortiment > li { margin: 6px }
Ok, damit sind jetzt schon mal jeweils zwei Listenelemente zueinander ausgerichtet und bündig. Gemäß der [Seite](http://files.peterkroener.de/test/box-sizing.html) und Deiner Antwort habe ich den css-Code wie folgt geändert: ~~~css ul.Sortiment { list-style: none; margin: -6px; width: 579px; } ul.Sortiment > li { background: #048; color: white; float: left; margin: 6px; text-align: center; vertical-align: top; width: 185px; } ul.Sortiment, ul.Sortiment > li { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; }Haben alle li denn dieselbe Höhe?
Die Listenelemente werden Grafiken enthalten, die unterschiedlich groß sind.
Ich werde hier später über PHP die Grafiken skalieren (maximale Breite ergibt eine bestimmte Höhe) und über JavaScript die Listenelemente einer Zeile an die Höhe des höchsten Listenelement anpassen lassen.
Damit hätte ich Zeilen, die immer den gleichen Abstand haben und pro Zeile gleich hohe Listenelemente.
Könnte ein spannendes Unterfangen werden ;-)
Leider bekomme ich aber immer noch nicht jeweils drei Listenelemente in einer Zeile ausgerichtet.
Gruß,
Enrico-
Om nah hoo pez nyeetz, Enrico!
ul.Sortiment
{
width: 579px;
}ul.Sortiment > li
{
margin: 6px;
width: 185px;
}197 \* 3 > 579 Matthias -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Tablett und Tablette](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=T#tablett). -
Hallo Matthias,
197 * 3 > 579
danke für Deine Anregung.
Du hast natürlich vollkommen recht.
Bei jedem dritten Listenelement muss also der Abstand weg:ul.Sortiment > li:nth-child (3n) { margin-right: 0px; }Gleiches Ergebnis.
Ich habe mit dem Boxsizing jetzt ja festgelegt - ich hoffe es zumindest - dass die Liste insgesamt 579px und die einzelnen Listenelemente 185px breit sein und das dritte keinen Abstand haben sollen. Der Abstand ist durch -6px mit jeweils rechts und links 6px die gewünschten 12px, also komme ich wieder auf die 579px.
Gruß,
Enrico-
Mann, Mann, Mann, jetzt habe ich zumindest schon mal den Grund gefunden, warum ich aktuell nur zwei Listenelemente nebeneinander angezeigt bekomme:
Ich habe genau 12px Differenz zur vorgegebenen Breite 579px, d.h. würde ich die Liste auf 591px Breite setzen, dann würde es klappen.
Aber ich brauche ja genau 579px...
Jetzt muss ich nur noch bei einem Listenelement "irgendwie" 12px "abziehen"...
Gruß,
Enrico
-
-
-
@@Enrico:
nuqneH
»» ul.Sortiment, > ul.Sortiment > li > { > box-sizing: border-box; > -moz-box-sizing: border-box; > -webkit-box-sizing: border-box; > -ms-box-sizing: border-box; > }box-sizing wird vererbt, d.h. 'ul.Sortiment > li' kannst du dir sparen.
Die präfixfreie Eigenschaft sollte immr als letztes stehen, damit sie die Eigenschaften mit Präfix überschreibt.
-ms-box-sizing hat es nie gegeben. [caniuse.com]
und über JavaScript die Listenelemente einer Zeile an die Höhe des höchsten Listenelement anpassen lassen.
Nein, warum? Ich hatte doch auf 'clear' verwiesen. Das wendest du auf jedes 3. Item an. Und da kommt dann wieder :nth-child ins Spiel.
Und in https://forum.selfhtml.org/?t=215086&m=1472545 ff. hab ich gezeigt, wie man solch eine Liste responsive für verschiedene Viewportbreiten macht.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-