CSS für pagination: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(Neue Seite)
 
K
 
(3 dazwischenliegende Versionen von einem Benutzer werden nicht angezeigt)
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 32: Zeile 35:
 
   left: 0;
 
   left: 0;
 
}
 
}
−
/* erste Nummer wieder zurück setzen */
+
/* erste Nummer wieder zurücksetzen */
 
.pagination li[class] + li a.link,
 
.pagination li[class] + li a.link,
 
.pagination li:first-child a.link,
 
.pagination li:first-child a.link,
Zeile 45: Zeile 48:
 
   display: none;
 
   display: none;
 
}
 
}
 +
/* ... Pagination - anchors ... END
 +
-------------------------------------------------------------------------------------------------*/
 
</source>
 
</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 Listenpunkte */
 +
.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>
 +
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)

Aktuelle Version vom 16. April 2014, 01:04 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 Listenpunkte */
.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=8017“
Ansichten
Meine Werkzeuge

Contao Community Documentation

irgendwie ist das Leben nicht fair...ich mache eine Webseite über Toilettenreinigung und Martin stellt Fotos für eine Schönheitswebseite frei...

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge