NAVIGATION
[[NAV_ROW (CSS)]]
Differences
This shows you the differences between two versions of the page.
|
deutsch:navigationen:nav-row [2010/04/25 15:45] 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 132: | Line 132: | ||
| <code css|h nav-row-horiz02 |h> | <code css|h nav-row-horiz02 |h> | ||
| - | /* ====== nav-row-horiz02 ===================================== */ | + | /* ====== nav-row-horiz02 ======================================== */ |
| /* Wrapper around all // Umschlieszer gesamt */ | /* Wrapper around all // Umschlieszer gesamt */ | ||
| Line 159: | Line 159: | ||
| color: #fff; | color: #fff; | ||
| /* font-weight:bold; */ | /* font-weight:bold; */ | ||
| - | padding: 2px 6px 3px 6px; | + | padding: 2px 6px 3px 6px; /* dist01-top = 2 */ |
| - | margin-top: 65px; | + | margin-top: 65px; /* dist02-top = 65 */ |
| } | } | ||
| Line 174: | Line 174: | ||
| .nav-row-horiz02 .aktiv a:visited { | .nav-row-horiz02 .aktiv a:visited { | ||
| background: #FF6F00; | background: #FF6F00; | ||
| - | padding-top: 67px; | + | padding-top: 67px; /* dist01-top + dist02-top: 2 + 65 = 67 */ |
| margin: 0; | margin: 0; | ||
| position: relative; /* IE6 */ | position: relative; /* IE6 */ | ||
| Line 183: | Line 183: | ||
| .nav-row-horiz02 .aktiv a:hover { | .nav-row-horiz02 .aktiv a:hover { | ||
| background: #C7A317; | background: #C7A317; | ||
| - | padding-top: 67px; | + | padding-top: 67px; /* dist01-top + dist02-top: 2 + 65 = 67 */ |
| margin: 0; | margin: 0; | ||
| color: #fff; /* IE6 */ | color: #fff; /* IE6 */ | ||
| Line 190: | Line 190: | ||
| /* ==== End nav-row-horiz02 ===================================== */ | /* ==== End nav-row-horiz02 ===================================== */ | ||
| - | |||
| </code> | </code> | ||
| \\ | \\ | ||
| + | |||
| Line 202: | 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 254: | 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 268: | 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 317: | Line 391: | ||
| color: #fff; /* IE6 */ | color: #fff; /* IE6 */ | ||
| } | } | ||
| - | /* ==== End nav-row-vert01 ===================================== */ | + | /* ==== End nav-row-vert01 ====================================== */ |
| </code> | </code> | ||
| \\ | \\ | ||
