CSS für pagination

Aus Contao Community Documentation

betrifft
Contao Version Alle Versionen
Css-pagination.png

Dieses Beispiel zeigt die Formatierung einer Pagination mit einem Trenner zwischen den Nummern. In diesem Fall ein · "·". Der schwierige Teil ist wahrscheinlich das Ansprechen der ersten Nummer.

.pagination ul,
.pagination li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination li {
  float: left;
}
/* alle Items */
.pagination a,
.pagination span {
  display: block;
  padding: 5px;
}
/* alle Nummern */
.pagination a.link,
.pagination span {
  padding-left: 10px;
  position: relative;
}
.pagination a.link:before,
.pagination span:before {
  content: "·"; /* · */
  position: absolute;
  left: 0;
}
/* erste Nummer wieder zurücksetzen */
.pagination li[class] + li a.link,
.pagination li:first-child a.link,
.pagination li[class] + li span,
.pagination li:first-child span {
  padding-left: 5px;
}
.pagination li[class] + li a.link:before,
.pagination li:first-child a.link:before,
.pagination li[class] + li span:before,
.pagination li:first-child span:before {
  display: none;
}

Siehe auch https://github.com/contao/core/issues/6082

--Andreas Burg 14:54, 15. Apr. 2014 (CEST)

Ansichten
Meine Werkzeuge

Contao Community Documentation

ich werde mir ein Aquarium kaufen...mit lauter Blowfishen..und die nenne ich dann bcrypt, sha1 und md5.

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge