NAVIGATION
This shows you the differences between two versions of the page.
deutsch:templates:big-john-piefecta:2-spalten-feste-breite-variable-hoehe-v1 [2010/01/07 13:29] Knut Heermann (flip-flop) |
deutsch:templates:big-john-piefecta:2-spalten-feste-breite-variable-hoehe-v1 [2018/06/03 18:08] (current) |
||
---|---|---|---|
Line 14: | Line 14: | ||
**Update:** -- \\ | **Update:** -- \\ | ||
- | Basierend auf: [[http://www.brunildo.org/test/twocols.html|2 columns layout (fixed widths)]] Based on Big John's Piefecta/Bruno Fassimo | + | Basierend auf: [[http://www.brunildo.org/test/twocols0.html|2 columns layout (fixed widths)]] Based on Big John's Piefecta |
Line 20: | Line 20: | ||
* Content soll im Quelltext als erstes stehen | * Content soll im Quelltext als erstes stehen | ||
+ | * Jede Spalte kann am längsten sein | ||
* Jede Spalte kann mit einem vollflächigen Hintergrund gefüllt werden | * Jede Spalte kann mit einem vollflächigen Hintergrund gefüllt werden | ||
* Header soll am obersten Rand des Viewport stehen | * Header soll am obersten Rand des Viewport stehen | ||
* Die Seite soll horizontal zentriert ausgegeben werden | * Die Seite soll horizontal zentriert ausgegeben werden | ||
* Left und Main sollen optisch nebeneinander stehen | * Left und Main sollen optisch nebeneinander stehen | ||
- | * Footer soll unten im Viewport stehen. | ||
* CSS-Code soll konform sein! | * CSS-Code soll konform sein! | ||
Gewählt wurde hier eine feste Breite von 990px, so dass 1024 x YYY bedient werden kann. | Gewählt wurde hier eine feste Breite von 990px, so dass 1024 x YYY bedient werden kann. | ||
- | {{:deutsch:templates:big-john-piefecta:fixed_2_cols_layout_brunildo_fe_1.gif|fixed 2 cols layout by Bruno Fassino}} | + | {{:deutsch:templates:big-john-piefecta:fixed_2_cols_layout_big_john_fe_1.gif?600|fixed 2 cols layout by Big John}} |
+ | ~~UP~~ | ||
===== Seitenlayout ===== | ===== Seitenlayout ===== | ||
Line 38: | Line 38: | ||
- | \\ | + | ~~UP~~ |
===== Vorlage ===== | ===== Vorlage ===== | ||
- | {{:deutsch:templates:big-john-piefecta:fixed_2_cols_layout_brunildo_be_1.gif|}} | + | {{:deutsch:templates:big-john-piefecta:fixed_2_cols_layout_big_john_be_1.gif|}} |
+ | ~~UP~~ | ||
==== <HTML> Kopf: ==== | ==== <HTML> Kopf: ==== | ||
Line 51: | Line 52: | ||
<code html|h header/ Vorlage |h> | <code html|h header/ Vorlage |h> | ||
<!--[if lt IE 8]><style> | <!--[if lt IE 8]><style> | ||
- | .outer0, .wide, h2 { | + | .outer, .wide, h2 { |
_height: 0; | _height: 0; | ||
zoom: 1; | zoom: 1; | ||
Line 71: | Line 72: | ||
<div class="wrapper"> | <div class="wrapper"> | ||
- | <div class="outer1"><div class="outer0"> | + | <div class="outer"> |
<div class="center"><div class="incenter"> | <div class="center"><div class="incenter"> | ||
Line 84: | Line 85: | ||
</div></div> <!-- end left div --> | </div></div> <!-- end left div --> | ||
- | <br class="clear" /> | + | <br class="clear" /> |
- | </div></div> <!-- end outer div --> | + | </div> <!-- end outer div --> |
<div class="top"><div class="intop"> | <div class="top"><div class="intop"> | ||
- | <h1>Fixed 2 cols layout</h1> | + | <h1>Fixed 2 cols layout (Big John)</h1> |
{HEADER} | {HEADER} | ||
</div></div> | </div></div> | ||
Line 102: | Line 103: | ||
===== CSS ===== | ===== 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: ==== | ==== Template: ==== | ||
- | **Datei:** template/inc_css/fixed_2_cols_layout_brunildo.css | + | **Datei:** template/inc_css/fixed_2_cols_layout_big_john.css |
- | Width 990px (210px - 580px - 200px) | + | Width 940px (210px - 730px) |
- | <code css |h fixed_2_cols_layout_brunildo.css|h> | + | <code css |h fixed_2_cols_layout_big_john.css|h> |
/*********************************************** | /*********************************************** | ||
* Fixed 2 cols layout | * Fixed 2 cols layout | ||
- | * http://www.brunildo.org/test/twocols.html | + | * http://www.brunildo.org/test/twocols0.html |
* Patched version by KH (flip-flop) 06.01.2010 | * Patched version by KH (flip-flop) 06.01.2010 | ||
* Width 940px (210px - 730px) | * Width 940px (210px - 730px) | ||
Line 162: | Line 168: | ||
w\idth: 940px; /* 750px; /* C + L + 1 */ | w\idth: 940px; /* 750px; /* C + L + 1 */ | ||
text-align: left; | text-align: left; | ||
- | background-color: #cce; /* L */ | + | background-color: #cce; |
border: 1px solid #000; | border: 1px solid #000; | ||
} | } | ||
- | .outer1 { | + | .outer { |
margin-left: 210px; /* 200px; /* L */ | margin-left: 210px; /* 200px; /* L */ | ||
- | background-color: #e5e5e5; /* C */ | ||
border-left: 1px solid #000; | border-left: 1px solid #000; | ||
- | } | + | background-color: #e5e5e5; /* Main */ |
- | .outer0 { | + | |
- | position: relative; | + | |
- | margin-left: -211px; /*-201px; */ | + | |
} | } | ||
.center { | .center { | ||
float: right; | float: right; | ||
- | width: 729px; /* 549px; /* C */ | + | width: 100%; |
+ | margin-left: -1px; | ||
} | } | ||
.left { | .left { | ||
float: left; | float: left; | ||
+ | position: relative; | ||
width: 210px; /* 200px; /* L */ | width: 210px; /* 200px; /* L */ | ||
- | margin-right: 1px; | + | margin-left: -211px; /* -201px; /* -L-1 */ |
+ | margin-right: 2px; | ||
} | } | ||
Line 198: | Line 203: | ||
} | } | ||
.bottom { | .bottom { | ||
+ | border-top: 1px solid #000; | ||
height: 40px; /* KH Footer height */ | height: 40px; /* KH Footer height */ | ||
background-color: #ecf; /* +KH */ | background-color: #ecf; /* +KH */ | ||
Line 204: | Line 210: | ||
padding: 5px; | padding: 5px; | ||
} | } | ||
- | .outer1, .outer2 { | + | .outer { |
position: relative; | position: relative; | ||
margin-top: 70px; /* +KH (place holder header) */ | margin-top: 70px; /* +KH (place holder header) */ | ||
} | } | ||
.wrapper { | .wrapper { | ||
- | position: relative; /* +KH (content first) */ | + | position: relative; /* +KH (content first) */ |
} | } | ||
- | .incenter { | + | .incenter { /* +KH */ |
- | padding: 10px 10px 10px 10px; | + | padding: 10px 0 10px 10px; |
} | } | ||
+ | |||
/* ------------------------ */ | /* ------------------------ */ | ||
Line 224: | Line 231: | ||
/**/ | /**/ | ||
- | .outer0 { | + | /* |
- | word-wrap: break-word; | + | .outer { |
+ | word-wrap: break-word; | ||
} | } | ||
+ | */ | ||
</code> | </code> | ||
Line 235: | Line 244: | ||
**Datei:** template/inc_css/nav_list_ul.css | **Datei:** template/inc_css/nav_list_ul.css | ||
- | Siehe auch [[deutsch:templates:deutsch:navigationen:nav_list_ul_parameter]]. | + | {{: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; | ||
- | 26.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 */ | ||
- | .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; | ||
- | 28.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> | ||
+ | Siehe auch [[deutsch:navigationen:nav_list_ul_parameter]]. |