CSS für pagination: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K
(Neue Code-Variante)
Zeile 3: Zeile 3:
 
[[Category:CSS HOWTOS]]
 
[[Category:CSS HOWTOS]]
 
[[Datei:Css-pagination.png]]
 
[[Datei: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.
+
Diese Beispiele zeigen die Formatierung einer Pagination mit einem Trenner zwischen den Nummern. In diesem Fall ein · ("·"). Der schwierige Teil ist wahrscheinlich das Ansprechen der ersten Nummer.
 +
=Variante 1: Trenner auf den Ankern und SPANs=
 
<source lang="css">
 
<source lang="css">
 +
/* ... Pagination - anchors ...
 +
-------------------------------------------------------------------------------------------------*/
 
.pagination ul,
 
.pagination ul,
 
.pagination li {
 
.pagination li {
Zeile 45: Zeile 48:
 
   display: none;
 
   display: none;
 
}
 
}
 +
/* ... Pagination - anchors ... END
 +
-------------------------------------------------------------------------------------------------*/
 +
</source>
 +
=Variante 2: Trenner auf den Listenpunkten=
 +
<source lang="css">
 +
/* ... Pagination - list points ...
 +
-------------------------------------------------------------------------------------------------*/
 +
.pagination ul,
 +
.pagination li {
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style: none;
 +
}
 +
.pagination li {
 +
  float: left;
 +
  position: relative;
 +
  padding-left: 5px; /* Platz für Trenner */
 +
}
 +
/* alle Items */
 +
.pagination a,
 +
.pagination span {
 +
  display: block;
 +
  padding: 5px;
 +
}
 +
/* alle Nummern */
 +
.pagination li:before {
 +
  content: "·"; /* &middot; */
 +
  position: absolute;
 +
  left: 0;
 +
  top: .25em;
 +
}
 +
/* Keine Nummer und erste Nummer wieder zurücksetzen */
 +
.pagination li[class],
 +
.pagination li[class] + li,
 +
.pagination li:first-child {
 +
  padding-left: 0;
 +
}
 +
.pagination li[class]:before,
 +
.pagination li[class] + li:before,
 +
.pagination li:first-child:before {
 +
  display: none;
 +
}
 +
/* ... Pagination - list points ... END
 +
-------------------------------------------------------------------------------------------------*/
 
</source>
 
</source>
 
Siehe auch https://github.com/contao/core/issues/6082
 
Siehe auch https://github.com/contao/core/issues/6082
  
 
--[[Benutzer:Andreas|Andreas Burg]] 14:54, 15. Apr. 2014 (CEST)
 
--[[Benutzer:Andreas|Andreas Burg]] 14:54, 15. Apr. 2014 (CEST)

Version vom 15. April 2014, 23:00 Uhr

betrifft
Contao Version Alle Versionen
Css-pagination.png

Diese Beispiele zeigen die Formatierung einer Pagination mit einem Trenner zwischen den Nummern. In diesem Fall ein &middot; ("·"). Der schwierige Teil ist wahrscheinlich das Ansprechen der ersten Nummer.

Variante 1: Trenner auf den Ankern und SPANs

/* ... Pagination - anchors ... 
-------------------------------------------------------------------------------------------------*/
.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: "·"; /* &middot; */
  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;
}
/* ... Pagination - anchors ... END
-------------------------------------------------------------------------------------------------*/

Variante 2: Trenner auf den Listenpunkten

/* ... Pagination - list points ...
-------------------------------------------------------------------------------------------------*/
.pagination ul,
.pagination li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination li {
  float: left;
  position: relative;
  padding-left: 5px; /* Platz für Trenner */
}
/* alle Items */
.pagination a,
.pagination span {
  display: block;
  padding: 5px;
}
/* alle Nummern */
.pagination li:before {
  content: "·"; /* &middot; */
  position: absolute;
  left: 0;
  top: .25em;
}
/* Keine Nummer und erste Nummer wieder zurücksetzen */
.pagination li[class],
.pagination li[class] + li,
.pagination li:first-child {
  padding-left: 0;
}
.pagination li[class]:before,
.pagination li[class] + li:before,
.pagination li:first-child:before {
  display: none;
}
/* ... Pagination - list points ... END
-------------------------------------------------------------------------------------------------*/

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

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

Von „https://de.contaowiki.org/index.php?title=CSS_für_pagination&oldid=8016“
Ansichten
Meine Werkzeuge

Contao Community Documentation

Ich brauch nen Bier, es ist zwar noch nicht nach 4, aber es ist nach Oli.

Yanick Witschi
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge