NAVIGATION
This shows you the differences between two versions of the page.
deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:paginieren-und-float [2009/12/25 16:16] Knut Heermann (flip-flop) |
deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:paginieren-und-float [2018/06/03 18:08] (current) |
||
---|---|---|---|
Line 14: | Line 14: | ||
**Update:** -- \\ | **Update:** -- \\ | ||
- | **Tag:** ##**--**## | + | **Tag:** -- |
Line 24: | Line 24: | ||
- | **Bedingung:** | + | **Bedingung:** -- |
+ | \\ | ||
---- | ---- | ||
---- | ---- | ||
+ | \\ | ||
+ | ===== Paginieren ===== | ||
- | ===== Frontend: ===== | + | |
+ | |||
+ | |||
+ | ==== Frontend: ==== | ||
Line 37: | Line 43: | ||
**Frontendausgabe 02:** Spiel mit Parametern //siehe conf.template_default.inc.php (Little play)// \\ | **Frontendausgabe 02:** Spiel mit Parametern //siehe conf.template_default.inc.php (Little play)// \\ | ||
{{:deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:article_float_and_pagination_fe_01_1.gif|}} | {{:deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:article_float_and_pagination_fe_01_1.gif|}} | ||
+ | |||
+ | |||
+ | ==== Backend: ==== | ||
**ARTIKEL** \\ | **ARTIKEL** \\ | ||
Line 51: | Line 60: | ||
Diese Navigation wird in der Datei **/config/phpwcms/conf.template_default.inc.php** konfiguriert: | Diese Navigation wird in der Datei **/config/phpwcms/conf.template_default.inc.php** konfiguriert: | ||
- | ===== config ===== | + | ==== Beispiel Nr. 1 ==== |
+ | === Code === | ||
<code php|h conf.template_default.inc.php> | <code php|h conf.template_default.inc.php> | ||
Line 68: | Line 77: | ||
\\ | \\ | ||
- | ==== CSS ==== | + | === CSS === |
<code css|h article pagination |h> | <code css|h article pagination |h> | ||
Line 100: | Line 109: | ||
\\ | \\ | ||
- | ===== Artikel float ===== | + | ==== Beispiel Nr. 2 ==== |
- | Dateiname: **list_float01.tmpl** \\ | + | - mit **{NAVI:123, .....** |
- | Verzeichnis: ** /template/inc_cntpart/articlesummary/list/ ** | + | |
+ | {{:deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:article_float_and_pagination_fe_03_1.gif|}} | ||
- | **Annahme:** Der umschließenden Container hat eine Breite von 700px. \\ | + | |
+ | === Code === | ||
+ | |||
+ | <code php|h conf.template_default.inc.php> | ||
+ | $template_default['article_paginate_navi'] = ' | ||
+ | <div class="article_paginate_navi"><div class="apn_prev">{PREV:« zurück «}</div><div class="apn_mid">Seite # von ##</div><div class="apn_navi">- {NAVI:123, - |<span style="color:#555">|</span>} -</div><div class="apn_next">{NEXT:» nächste »}</div></div><br class="clear" />'; // | ||
+ | |||
+ | $template_default['article_paginate_show'] = 'rt{ART_PAGI_NAV} top bottom'; // top bottom rt{RT} where should the navi be shown - possible values: top and/or bottom and/or rt:{RT} | ||
+ | |||
+ | </code> | ||
+ | \\ | ||
+ | Der sebstkreierte Tag **{ART_PAGI_NAV}** ist ein Ersetzer für die Paginierungs-Navi. | ||
+ | Der Tag kann irgendwo in der Vorlage platzieren werden, an der die Paginierungs-Navi stehen soll. | ||
+ | |||
+ | \\ | ||
+ | |||
+ | === CSS === | ||
+ | |||
+ | <code css|h css article pagination |h> | ||
+ | /* --------- article pagination ----------- */ | ||
+ | |||
+ | .article_paginate_navi { | ||
+ | font-family: verdana, arial, sans-serif; | ||
+ | font-size: 11px; | ||
+ | background: #fff url(../../picture/navi02/article_navi.jpg) no-repeat left top ; | ||
+ | color: #444; | ||
+ | margin: 21px 0 0 0; | ||
+ | padding: 3px 15px 0 15px; | ||
+ | height: 20px; | ||
+ | } | ||
+ | .article_paginate_navi a { | ||
+ | color: #1E3F82; | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .article_paginate_navi a:hover { | ||
+ | color: #D74600; | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .apn_prev { | ||
+ | float: left; | ||
+ | color: #555; | ||
+ | margin: 0; | ||
+ | padding: 0 20px 0 0; | ||
+ | } | ||
+ | .apn_mid { | ||
+ | float: left; | ||
+ | color: #888; | ||
+ | margin: 0; | ||
+ | padding: 0 0px 0 30px; | ||
+ | } | ||
+ | .apn_navi { | ||
+ | float: left; | ||
+ | color: #D74600; | ||
+ | margin: 0; | ||
+ | padding: 0 0 0 60px; | ||
+ | } | ||
+ | .apn_next { | ||
+ | float: right; | ||
+ | color: #555; | ||
+ | margin: 0; | ||
+ | padding: 0 0px 0 20px; | ||
+ | } | ||
+ | |||
+ | </code> | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | |||
+ | ===== Artikel float ===== | ||
+ | |||
+ | |||
+ | **Annahme:** Der den Content umschließende Container hat eine Breite von 700px. \\ | ||
Die Container für jeden Artikel haben eine Breite von 300px. Mit ##float: left;## reihen wir nun diese Container aneinander, bis das Breitenmaß des umschließenden Containers erreicht ist. | Die Container für jeden Artikel haben eine Breite von 300px. Mit ##float: left;## reihen wir nun diese Container aneinander, bis das Breitenmaß des umschließenden Containers erreicht ist. | ||
* 300px + 5px + 300px + 5px = 610px | * 300px + 5px + 300px + 5px = 610px | ||
* 700px - 610px = 90px | * 700px - 610px = 90px | ||
- | * Es passt also kein dritter Artikel-Container in den umschließenden Container (700px). Somit wird der dritte Artikel-Container (und alle folgenden) in der nächsten Reihe dargestellt. | + | * Es passt also kein dritter Artikel-Container //(300px + 5px)// in den umschließenden Container //(700px)//. Somit wird der dritte Artikel-Container (und alle folgenden) in den nächsten Zeilen dargestellt. |
+ | |||
+ | |||
+ | {{:deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:article_float_and_pagination_fe_02_1.gif|}} | ||
+ | |||
+ | //(Siehe auch Bilder oben "Frontendausgabe")//. | ||
+ | |||
+ | \\ | ||
+ | Dateiname: **list_float01.tmpl** \\ | ||
+ | Verzeichnis: ** /template/inc_cntpart/articlesummary/list/ ** | ||
+ | |||
==== Template ==== | ==== Template ==== | ||
Line 158: | Line 253: | ||
.phpwcmsArticleListImageCaption { | .phpwcmsArticleListImageCaption { | ||
padding-top: 5px; | padding-top: 5px; | ||
- | } | ||
- | |||
- | .phpwcmsArticleListEntry-float { | ||
- | float: left; | ||
- | width: 288px; | ||
- | height: 170px; | ||
- | border: 1px solid #ccc; | ||
- | background: #eee; | ||
- | padding-left: 10px; | ||
- | margin: 0 5px 5px 0; | ||
} | } | ||