NAVIGATION
[[NAV_ROW (CSS)]]
Differences
This shows you the differences between two versions of the page.
|
deutsch:navigationen:nav-row [2010/04/26 09:13] Knut Heermann (flip-flop) |
deutsch:navigationen:nav-row [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 6: | Line 6: | ||
| An dieser Stelle zeige ich ein kleines CSS-Beispiel für den Navigations-Tag {NAV_ROW}. \\ | An dieser Stelle zeige ich ein kleines CSS-Beispiel für den Navigations-Tag {NAV_ROW}. \\ | ||
| - | Für einfache eindimensionale Navigationen ohne Unterebenen ist es nicht notwendig auf NAV_LIST_UL zurückzugreifen. Die NAV_ROW reicht hierzu völlig aus. | + | Für einfache eindimensionale Navigationen ohne Unterebenen ist es nicht notwendig auf die [[deutsch/navigationen/nav_list_ul]] zurückzugreifen. Die [[http://www.phpwcms-docu.de/navigations_tags_.phtml|NAV_ROW]] reicht hierzu völlig aus. |
| * **Horizontale Einzeilennavigation** | * **Horizontale Einzeilennavigation** | ||
| Line 120: | Line 120: | ||
| position: relative; /* IE6 */ | position: relative; /* IE6 */ | ||
| } | } | ||
| - | /* ==== End nav-row-horiz01 ====================================== */ | + | /* ==== End nav-row-horiz01 ===================================== */ |
| </code> | </code> | ||
| Line 192: | Line 192: | ||
| </code> | </code> | ||
| \\ | \\ | ||
| + | |||
| Line 201: | Line 202: | ||
| <code css|h nav-row-horiz03 |h> | <code css|h nav-row-horiz03 |h> | ||
| - | /* ====== nav-row-horiz03 ===================================== */ | + | /* ====== nav-row-horiz03 ======================================== */ |
| /* Wrapper around all // Umschlieszer gesamt */ | /* Wrapper around all // Umschlieszer gesamt */ | ||
| Line 253: | Line 254: | ||
| } | } | ||
| - | /* ==== End nav-row-horiz03 ====================================== */ | + | /* ==== End nav-row-horiz03 ===================================== */ |
| + | </code> | ||
| + | \\ | ||
| + | |||
| + | |||
| + | ===== CSS: Horizontal 04 ===== | ||
| + | |||
| + | {{:deutsch:navigationen:nav_row04_horizontal_img_1.gif|}} | ||
| + | |||
| + | Datei: **template/inc_css/nav_row_horiz04.css** | ||
| + | |||
| + | <code css|h nav-row-horiz04 |h> | ||
| + | /* ====== nav-row-horiz04 ======================================== */ | ||
| + | |||
| + | /* Wrapper around all // Umschlieszer gesamt */ | ||
| + | .nav-row-horiz-wrap { | ||
| + | background: #FFFFFF; | ||
| + | border: 1px solid #888; | ||
| + | height: 30px; | ||
| + | width: 540px; | ||
| + | margin: 0 0 0 320px; | ||
| + | padding: 6px 6px 0 6px; | ||
| + | } | ||
| + | |||
| + | .nav-row-horiz04 { | ||
| + | padding:0; | ||
| + | margin:0; | ||
| + | } | ||
| + | * html .nav-row-horiz04 { /* only IE6 */ | ||
| + | position: absolute; | ||
| + | } | ||
| + | |||
| + | /* Spacer // Zwischenraum */ | ||
| + | .nav-row-horiz04 .space { | ||
| + | float: left; | ||
| + | width: 1px; | ||
| + | height:10px; | ||
| + | } | ||
| + | |||
| + | /* Formatting a-tag // Formatierung des a-tags */ | ||
| + | .nav-row-horiz04 a, | ||
| + | .nav-row-horiz04 a:visited { | ||
| + | float: left; | ||
| + | border: 1px solid #888; | ||
| + | text-decoration:none; | ||
| + | font-size:14px; | ||
| + | color: #fff; | ||
| + | /* font-weight:bold; */ | ||
| + | padding: 2px 6px 3px 6px; | ||
| + | } | ||
| + | |||
| + | /* Formatting normal status a-tag // Formatierung normaler Status a-tags */ | ||
| + | .nav-row-horiz04 .normal a, | ||
| + | .nav-row-horiz04 .normal a:visited { | ||
| + | background: #808080; | ||
| + | text-decoration:none; | ||
| + | } | ||
| + | |||
| + | /* Formatting active status a-tag // Formatierung aktiver Status a-tags */ | ||
| + | .nav-row-horiz04 .aktiv a, | ||
| + | .nav-row-horiz04 .aktiv a:visited { | ||
| + | background: #FF6F00; | ||
| + | padding-bottom: 27px; | ||
| + | position: relative; /* IE6 */ | ||
| + | } | ||
| + | |||
| + | /* Formatting hover status a-tag // Formatierung hover Status a-tags */ | ||
| + | .nav-row-horiz04 .normal a:hover, | ||
| + | .nav-row-horiz04 .aktiv a:hover { | ||
| + | background: #C7A317; | ||
| + | padding-bottom: 27px; | ||
| + | color: #fff; /* IE6 */ | ||
| + | position: relative; /* IE6 */ | ||
| + | } | ||
| + | /* ==== End nav-row-horiz04 ===================================== */ | ||
| </code> | </code> | ||
| Line 267: | Line 342: | ||
| <code css|h nav-row-vert01 |h> | <code css|h nav-row-vert01 |h> | ||
| - | /* ====== nav-row-vert01 ==================================== */ | + | /* ====== nav-row-vert01 ========================================= */ |
| /* Wrapper around all // Umschlieszer gesamt */ | /* Wrapper around all // Umschlieszer gesamt */ | ||
| Line 316: | Line 391: | ||
| color: #fff; /* IE6 */ | color: #fff; /* IE6 */ | ||
| } | } | ||
| - | /* ==== End nav-row-vert01 ===================================== */ | + | /* ==== End nav-row-vert01 ====================================== */ |
| </code> | </code> | ||
| \\ | \\ | ||
