Differences

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:15]
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:&laquo; zur&uuml;ck &laquo;}</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:&raquo; n&auml;chste &raquo;}</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 ==== 
-**Artikeltemplate** "list_float01.tmpl" 
<code html> <code html>
[SPACE]<!-- space //-->[/SPACE] [SPACE]<!-- space //-->[/SPACE]
Line 156: 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; 
} }
deutsch/phpwcms-system/artikel/vorlagen/artikel-liste/paginieren-und-float.1261754122.txt.gz · Last modified: 2018/06/03 18:06 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0