Differences

This shows you the differences between two versions of the page.

--- english:templates:big-john-piefecta:2-cols-fixed-width-variable-height-v1 [2010/01/10 09:30]
Knut Heermann (flip-flop)
+++ english:templates:big-john-piefecta:2-cols-fixed-width-variable-height-v1 [2018/06/03 18:09] (current)
@@ Line 14: / Line 14: @@
 **Update:** -- \\
-Based on: [[http://www.brunildo.org/test/twocols0.html|2 columns layout (fixed widths)]] Based on Big John's Piefecta
+Based on: [[http://www.brunildo.org/test/twocols0.html|2 columns layout (fixed widths)]] (by Big John's Piefecta)
@@ Line 20: / Line 20: @@
   * Content is to be located in the source text as the first
+  * Any column may be longest.
   * Each column can be filled with a full field background
   * Header is to stand at the top margin of the Viewport
-  * he page should be displayed horizontally centered
+  * The page should be displayed horizontally centered. All the columns are floated.
   * Left and Main should stand side by side visually
-  * Footer soll unten im Viewport stehen.
   * CSS code should be conformal!
@@ Line 32: / Line 32: @@
+~~UP~~
-===== page layout =====
+===== Page layout =====
 {{:deutsch:templates:fixed_3_cols_layout_big_john_be2_1.gif|}}
-\\
+~~UP~~
 ===== Template =====
@@ Line 44: / Line 45: @@
 {{:deutsch:templates:big-john-piefecta:fixed_2_cols_layout_big_john_be_1.gif|}}
+~~UP~~
 ==== <HTML> head: ====
@@ Line 102: / Line 104: @@
 ===== CSS =====
+{{ :deutsch:templates:big-john-piefecta:2-cols-fixed-width-variable-height-v1_s.gif|}}
+{{:deutsch:templates:big-john-piefecta:2-cols-fixed-width-variable-height-v1.gif| }}
 ==== Template: ====
@@ Line 235: / Line 240: @@
 ==== Navigation (optional) ====
 **File:** template/inc_css/nav_list_ul.css
-Have a look to [[english:navigation:nav_list_ul_parameters]].
+{{:deutsch:templates:big-john-piefecta:nav_list_ul_article.zip|NAV_LIST_UL + Article (>=r387)}}
-<code css |h nav_list_ul.css|h>
-/* ======================================================================
-   >= V1.30   CSS for an vertical menu
-   <div class="nav-list-ul">{ NAV_LIST_UL:F,0,,act_path,active }</div>
-   Level 0 - 3;
-.03.07 flip-flop (KH)
-========================================================================= */
-.nav-list-ul {
-   margin: 0;
-   padding: 0;
-   border: 0;
-   text-decoration: none;
-   /* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
-   font: normal normal 11px/19px Verdana, Geneva, Arial, Helvetica, sans-serif;
-   width: 210px;  /* ++ Width of Menu Items // Breite der Navigation*/
-/*   float:left; */
-}
-.nav-list-ul em { font-style: normal; }
-.nav-list-ul ul {
-   margin: 0;
-   padding: 0;
-   border: 0;
-   list-style-type: none;
-   width: 210px;  /* ++ Width of Menu Items // Breite der Navigation */
-}
-.nav-list-ul ul li { position: relative; }
-/* ==== Styles for Menu Items =================================== */
-/* ==== LEVEL X ================================================= */
-/* ====  simple link <a> // einfacher Link <a> ==== */
-.nav-list-ul ul li a,
-.nav-list-ul ul li a:link,
-.nav-list-ul ul li a:visited,
-.nav-list-ul ul li a:active {
-   display: block;
-   text-decoration: none;
-   text-transform: none;
-   color: #FFFFFF;           /* ++ Text color // Textfarbe */
-   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
-   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
-   background: #81909F url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
-   /* ++ Text adjust e.g. upper gap and left gap 25px */
-   /* ++ Text justieren 1px oben und 25px von links */
-   padding: 1px 0 0 25px;
-   /* ++ bottom line if you want */
-   /* ++ Untere Linie wenn gewuenscht */
-   border-bottom: 1px solid #ccc; /* IE6 Bug */
-   /* ++ Den "white-space" Fehler im IE7 vermeiden */
-   /* ++ Killing the "white-space" bug in IE7 */
-   \width: 210px;  /* IE5x Opera <= 5 */
-   widt\h: 185px;  /* = (Width of Menu Items) - (padding-right + padding-left) */
-}
-/* ====  Aktiv, wenn ein Sublevel vorhanden ist // active point if there is a sub_level ==== */
-.nav-list-ul ul li.sub_ul_true a,
-.nav-list-ul ul li.sub_ul_true a:link,
-.nav-list-ul ul li.sub_ul_true a:visited,
-.nav-list-ul ul li.sub_ul_true a:active {
-   color: White;
-   font-weight: normal;
-   background: #839AAF url(../../img/article/navi1_sub_true.gif) 10px 1px no-repeat;
-}
-/* ====  Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */
-.nav-list-ul ul li.act_path a,
-.nav-list-ul ul li.act_path a:link,
-.nav-list-ul ul li.act_path a:visited,
-.nav-list-ul ul li.act_path a:active {
-   color: White;
-   font-weight: bold;
-   background: #63819F url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
-}
-/* ====  Elternebene, wenn der Schalter gesetzt // Parent, if switch is set ==== */
-.nav-list-ul ul li.sub_parent a,
-.nav-list-ul ul li.sub_parent a:link,
-.nav-list-ul ul li.sub_parent a:visited,
-.nav-list-ul ul li.sub_parent a:active {
-   color: White;
-   font-weight: normal;
-   background: #81909F url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
-}
-/* ====  active link <a> // aktiver Link <a> ==== */
-.nav-list-ul ul li.active a,
-.nav-list-ul ul li.active a:link,
-.nav-list-ul ul li.active a:visited,
-.nav-list-ul ul li.active a:active {
-   color: White;
-   font-weight: bold;
-   background: #63819F url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
-}
-/* ====  hover: Maus über Link <a> // hover link <a> ==== */
-.nav-list-ul ul li a:hover {
-   color: White;
-/*   text-decoration: underline; */
-   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
-}
-.nav-list-ul ul li.sub_no a:hover {
-   color: White;
-   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
-}
-.nav-list-ul ul li.sub_ul a:hover {
-   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
-}
-/* ====  hover: Wenn Sublevel vorhanden <a> // hover: "if there is a sub_level" <a> ==== */
-.nav-list-ul ul li.sub_ul_true a:hover {
-   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
-}
-/* ====  hover: Parent Link <a> // hover: "Only for the parent link" <a> ==== */
-.nav-list-ul ul li.sub_parent a:hover {
-   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
-}
-/* ====  hover: Der aktive Link <a> // hover: "Only for the active link" <a> ==== */
-.nav-list-ul ul li.active a:hover {
-   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
-}
-/* ==== LEVEL X+1 =============================================== */
-.nav-list-ul ul ul li.sub_no a,
-.nav-list-ul ul ul li.sub_no a:link,
-.nav-list-ul ul ul li.sub_no a:visited,
-.nav-list-ul ul ul li.sub_no a:active,
-.nav-list-ul ul ul li.sub_ul a,
-.nav-list-ul ul ul li.sub_ul a:link,
-.nav-list-ul ul ul li.sub_ul a:visited,
-.nav-list-ul ul ul li.sub_ul a:active {
-   display: block;
-   text-decoration: none;
-   text-transform: none;
-   font-weight: normal;
-   color: #FFFFFF;
-   background: #8E9FAF url(../../img/article/navi1_norm.gif) 25px 1px no-repeat;
-   padding: 1px 0 0 40px;
-   border-bottom: 1px solid #ccc; /* IE6 Bug */
-   \width: 210px;  /* IE5x Opera <= 5 */
-   widt\h: 170px;  /* = (Width of Menu Items) - (padding-right + left) */
-}
-/* article navi */
+Have  a look too: [[english:navigation:nav_list_ul_parameters]].
-.nav-list-ul ul ul li.asub_no a,
-.nav-list-ul ul ul li.asub_no a:link,
-.nav-list-ul ul ul li.asub_no a:visited,
-.nav-list-ul ul ul li.asub_no a:active,
-.nav-list-ul ul ul li.asub_ul a,
-.nav-list-ul ul ul li.asub_ul a:link,
-.nav-list-ul ul ul li.asub_ul a:visited,
-.nav-list-ul ul ul li.asub_ul a:active {
-   display: block;
-   text-decoration: none;
-   text-transform: none;
-   font-weight: normal;
-   color: #FFFFFF;
-   background: #8E9FAF url(../../img/article/navi1_anorm.gif) 25px 1px no-repeat;
-   padding: 1px 0 0 40px;
-   border-bottom: 1px solid #ccc; /* IE6 Bug */
-   \width: 210px;  /* IE5x Opera <= 5 */
-   widt\h: 170px;  /* = (Width of Menu Items) - (padding-right + left) */
-}
-/* state for the active point if there is a sub_level */
-.nav-list-ul ul ul li.sub_ul_true a,
-.nav-list-ul ul ul li.sub_ul_true a:link,
-.nav-list-ul ul ul li.sub_ul_true a:visited,
-.nav-list-ul ul ul li.sub_ul_true a:active {
-   color: White;
-   font-weight: normal;
-   background: #839AAF url(../../img/article/navi1_sub_true.gif) 25px 1px no-repeat;
-}
-/* state for the active path (link tracing) */
-.nav-list-ul ul ul li.act_path a,
-.nav-list-ul ul ul li.act_path a:link,
-.nav-list-ul ul ul li.act_path a:visited,
-.nav-list-ul ul ul li.act_path a:active {
-   color: White;
-   font-weight: bold;
-   background: #6D8EAF url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
-}
-/* state for the active link */
-.nav-list-ul ul ul li.active a,
-.nav-list-ul ul ul li.active a:link,
-.nav-list-ul ul ul li.active a:visited,
-.nav-list-ul ul ul li.active a:active {
-   color: White;
-   font-weight: bold;
-   background: #6D8EAF url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
-}
-.nav-list-ul ul ul li a:hover {
-   color: White;
-/*   text-decoration: underline; */
-   background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
-}
-.nav-list-ul ul ul li.sub_no a:hover {
-   color: White;
-   background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
-}
-.nav-list-ul ul ul li.asub_no a:hover {
-   color: White;
-   background: #6B828F url(../../img/article/navi1_ahov.gif) 25px 1px no-repeat;
-}
-.nav-list-ul ul ul li.sub_ul a:hover {
-   background: #6B828F url(../../img/article/navi1_act_hov.gif) 25px 1px no-repeat;
-}
-/* Only for "if there is a sub_level" */
-.nav-list-ul ul ul li.sub_ul_true a:hover {
-   background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
-}
-/* Only for the active link */
-.nav-list-ul ul ul li.active a:hover {
-   background: #6B828F url(../../img/article/navi1_act_hov.gif) 25px 1px no-repeat;
-}
-/* ==== LEVEL X+2 =============================================== */
-.nav-list-ul ul ul ul li.sub_no a,
-.nav-list-ul ul ul ul li.sub_no a:link,
-.nav-list-ul ul ul ul li.sub_no a:visited,
-.nav-list-ul ul ul ul li.sub_no a:active,
-.nav-list-ul ul ul ul li.sub_ul a,
-.nav-list-ul ul ul ul li.sub_ul a:link,
-.nav-list-ul ul ul ul li.sub_ul a:visited,
-.nav-list-ul ul ul ul li.sub_ul a:active  {
-   display: block;
-   text-decoration: none;
-   text-transform: none;
-   font-weight: normal;
-   color: #FFFFFF;
-   background: #83A1BF url(../../img/article/navi1_norm.gif) 40px 1px no-repeat;
-   padding: 1px 0 0 55px;
-   border-bottom: 1px solid #ccc; /* IE6 Bug */
-   \width: 210px;  /* IE5x Opera <= 5 */
-   widt\h: 155px;  /* = (Width of Menu Items) - (padding-right + left) */
-}
-/* state for the active point if there is a sub_level */
-.nav-list-ul ul ul ul li.sub_ul_true a,
-.nav-list-ul ul ul ul li.sub_ul_true a:link,
-.nav-list-ul ul ul ul li.sub_ul_true a:visited,
-.nav-list-ul ul ul ul li.sub_ul_true a:active {
-   color: White;
-   font-weight: normal;
-   background: #83A1BF url(../../img/article/navi1_sub_true.gif) 40px 1px no-repeat;
-}
-/* state for the active path (link tracing) */
-.nav-list-ul ul ul ul li.act_path a,
-.nav-list-ul ul ul ul li.act_path a:link,
-.nav-list-ul ul ul ul li.act_path a:visited,
-.nav-list-ul ul ul ul li.act_path a:active {
-   color: White;
-   font-weight: bold;
-   background: #83A1BF url(../../img/article/navi1_act.gif) 40px 1px no-repeat;
-}
-/* state for the active link */
-.nav-list-ul ul ul ul li.active a,
-.nav-list-ul ul ul ul li.active a:link,
-.nav-list-ul ul ul ul li.active a:visited,
-.nav-list-ul ul ul ul li.active a:active {
-   color: White;
-   font-weight: bold;
-   background: #83A1BF url(../../img/article/navi1_act.gif) 40px 1px no-repeat;
-}
-.nav-list-ul ul ul ul li a:hover {
-   color: White;
-/*   text-decoration: underline; */
-   background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
-}
-.nav-list-ul ul ul ul li.sub_no a:hover {
-   color: White;
-   background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
-}
-.nav-list-ul ul ul ul li.sub_ul a:hover {
-   background: #6D879F url(../../img/article/navi1_act_hov.gif) 40px 1px no-repeat;
-}
-/* Only for "if there is a sub_level" */
-.nav-list-ul ul ul ul li.sub_ul_true a:hover {
-   background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
-}
-/* Only for the active link */
-.nav-list-ul ul ul ul li.active a:hover {
-   background: #6D879F url(../../img/article/navi1_act_hov.gif) 40px 1px no-repeat;
-}
-/* ======================================================================
-   >= V1.4.4 r387   CSS for a article navigation menu
-   <div class="nlu_navi1">{ NAV_LIST_UL:FA,0,,act_path,active }</div>
-   Level 0 - 3;
-.12.09 flip-flop (KH)
-========================================================================= */
-.nav-list-ul ul li.asub_no a,
-.nav-list-ul ul li.asub_no a:link,
-.nav-list-ul ul li.asub_no a:visited,
-.nav-list-ul ul li.asub_no a:active {
-   display: block;
-   text-decoration: none;
-   text-transform: none;
-   font-weight: normal;
-   color: #FFFFFF;
-   background: #83A1BF url(../../img/article/navi1_anorm.gif) 10px 1px no-repeat;
-   padding: 1px 0 0 25px;
-   border-bottom: 1px solid #ccc; /* IE6 Bug */
-   \width: 210px;  /* IE5x Opera <= 5 */
-   widt\h: 185px;  /* = (Width of Menu Items) - (padding-right + left) */
-}
-.nav-list-ul ul ul li.asub_no a,
-.nav-list-ul ul ul li.asub_no a:link,
-.nav-list-ul ul ul li.asub_no a:visited,
-.nav-list-ul ul ul li.asub_no a:active {
-   display: block;
-   text-decoration: none;
-   text-transform: none;
-   font-weight: normal;
-   color: #FFFFFF;
-   background: #83A1BF url(../../img/article/navi1_anorm.gif) 25px 1px no-repeat;
-   padding: 1px 0 0 40px;
-   border-bottom: 1px solid #ccc; /* IE6 Bug */
-   \width: 210px;  /* IE5x Opera <= 5 */
-   widt\h: 170px;  /* = (Width of Menu Items) - (padding-right + left) */
-}
-.nav-list-ul ul ul ul li.asub_no a,
-.nav-list-ul ul ul ul li.asub_no a:link,
-.nav-list-ul ul ul ul li.asub_no a:visited {
-   display: block;
-   text-decoration: none;
-   text-transform: none;
-   font-weight: normal;
-   color: #FFFFFF;
-   background: #83A1BF url(../../img/article/navi1_anorm.gif) 40px 1px no-repeat;
-   padding: 1px 0 0 55px;
-   border-bottom: 1px solid #ccc; /* IE6 Bug */
-   \width: 210px;  /* IE5x Opera <= 5 */
-   widt\h: 155px;  /* = (Width of Menu Items) - (padding-right + left) */
-}
-/* state for the active link */
-.nav-list-ul ul li.asub_no.active a,
-.nav-list-ul ul li.asub_no.active a:link,
-.nav-list-ul ul li.asub_no.active a:visited,
-.nav-list-ul ul li.asub_no.active a:active {
-   color: White;
-   font-weight: bold;
-   background: #83A1BF url(../../img/article/navi1_aact.gif) 10px 1px no-repeat;
-}
-/* state for the active link */
-.nav-list-ul ul ul li.asub_no.active a,
-.nav-list-ul ul ul li.asub_no.active a:link,
-.nav-list-ul ul ul li.asub_no.active a:visited,
-.nav-list-ul ul ul li.asub_no.active a:active {
-   color: White;
-   font-weight: bold;
-   background: #83A1BF url(../../img/article/navi1_aact.gif) 25px 1px no-repeat;
-}
-/* state for the active link */
-.nav-list-ul ul ul ul li.asub_no.active a,
-.nav-list-ul ul ul ul li.asub_no.active a:link,
-.nav-list-ul ul ul ul li.asub_no.active a:visited,
-.nav-list-ul ul ul ul li.asub_no.active a:active {
-   color: White;
-   font-weight: bold;
-   background: #83A1BF url(../../img/article/navi1_aact.gif) 40px 1px no-repeat;
-}
-.nav-list-ul ul li.asub_no a:hover {
-   color: White;
-   background: #6D879F url(../../img/article/navi1_ahov.gif) 10px 1px no-repeat;
-}
-.nav-list-ul ul ul  li.asub_no a:hover {
-   color: White;
-   background: #6D879F url(../../img/article/navi1_ahov.gif) 25px 1px no-repeat;
-}
-.nav-list-ul ul ul ul li.asub_no a:hover {
-   color: White;
-   background: #6D879F url(../../img/article/navi1_ahov.gif) 40px 1px no-repeat;
-}
-/* ===END=== Article navigation  */
-/* Nur Home darstellen */
-/* .nav-list-ul ul li.sub_ul {display: none;} */
-/*==== END LEVEL X ============================================= */
-/* Holly Hack. IE Requirement \*/
-* html .nav-list-ul ul li { float: left; height: 1%; }
-* html .nav-list-ul ul li a { height: 1%; }
-/* ==== End  nav-list-ul ========================================= */
-</code>

english/templates/big-john-piefecta/2-cols-fixed-width-variable-height-v1.1263112205.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show page Old revisions