Eigene horinzontale Navigation

[rtist]

Hallo. Ich versuche zum ersten Mal mit CSS eine Seite zu basteln und stehe gerade vor einem Problem, dass ich nach nun 2 Tagen rumprobieren nicht gelößt habe. Ich hoffe, die Frage ist schwer genug um hier nicht alle zu langweilen... also:

auf dieser Seite:
http://coachhaus.de/index.php?veranstaltungen

habe ich eine horizontale Navigation gebaut und im CSS das hier angegeben:

Code: Select all

#navigation {
    padding: 9px;
	height: 20px;
	
	margin-bottom: 0px;
	margin-top: 90px;
	border: 0px;
	background-color: #F5F5F5;
}

#navigation a, #navigation a:link {
	padding: 9px;
	color: #FFF;
	background-color: #3F8F37;
	margin-right:11px;
	
}

#navigation a:hover {
	padding: 9px;
	color: #FFF;
	background-color: #3A8133;
	
	
}

#navigation a:active {
	padding: 15px;
	color: #FFF;
	background-color: #C90033;
	
	
}

Die Conf.template sieht so aus:

Code: Select all

// row based navigation
$template_default['nav_row']['before']					= '<span style="text-decoration:none;font-size: 12px; font-weight:normal;">';
$template_default['nav_row']['after']					= '';
$template_default['nav_row']['between']					= '    ';
$template_default['nav_row']['link_before']				= '';
$template_default['nav_row']['link_after']				= '';
$template_default['nav_row']['link_before_active']			= '<span style="text-decoration:none;font-size: 12px; font-weight:bold;">';
$template_default['nav_row']['link_after_active']			= '</span>';
$template_default['nav_row']['link_direct_before']			= '';
$template_default['nav_row']['link_direct_after']			= '';
$template_default['nav_row']['link_direct_before_active']		= '';
$template_default['nav_row']['link_direct_after_active']		= '';

Was ich nun gerne möchte, ist, dass die Menupunkte im aktiven Zustand rot und größer bleiben, genau so, wie wenn man draufklickt und gedrückt lässt, bzw wie bei der vertikalen Navigation.

Kann mir da jemand helfen???

[flip-flop]

Hallo,

die Kennzeichnung des aktiven Menüpunktes mit "fett" ist nicht zu empfehlen. so springt das Menü in der horizontalen.

(Z.B. hat diese Pseudo-Klasse :active in einer reinen CSS-Navigation nichts mit einer Klasse z.B. .active zu tun ......).

Hier CSS Hilfeseiten z.B.: http://www.css4you.de/ oder http://de.selfhtml.org/css/


Ich habe gerade eine kleine Übersicht zu Navigationen mit {NAV_ROW} bereitgestellt, das sollte helfen. NAV_ROW (CSS)



Knut

[pepe]

Hi flip-flop,

prima, dein immernoch extremes Engagement für alle phpwcms NewBees...
hoffentlich wissen die Aspiranten das auch entsprechend zu würdigen

Mir ist aufgefallen:

/* ====== nav-.nav-row-horiz02 ===================================== */

/* Wrapper around all // Umschlieszer gesamt */
..nav-row-horiz02 {
background: #FFFFFF;
border: 1px solid #888;
height: 95px;
width: 540px;
padding: 6px 6px 0 6px;
}

Klassennamen mit 2 Punkten zu Beginn des Namens ..class sind mir so noch nicht vorgekommen
Ist das so OK, oder ist beim Ersetzen der Namen ein Fehler entstanden

[flip-flop]

Hallo Manfred,

danke für den Hinweis: Fehler beim Ersetzen .....

Knut

[rtist]

Vielen Dank!!! Und, ja, ich weiß das zu würdigen! Ich weiß nur nicht genau wie , nehme aber gerne Vorschläge entgegen .
Jetzt schaue ich mal, wie lange ich brauchen werde, um das bei mir einzubauen.

[flip-flop]

Vorschlagt eingereicht: Im wiki der Button links mit den sechs Buchstabel (P..P..)

Knut

[rtist]

Vorschlag akzeptiert , aber geht das auch anders als mit PayPal. Hab da nämlich kein Konto und auch keine Lust eins einzurichten...

Ich glaube, ich hab's jetzt sogar umgesetzt bekommen. Also noch mal vielen Dank.
Lässt sich denn auch das rot der vertikalen Navigation mit der Rahmengrafik durch größermachen verbinden? Da hab ich jetzt auch schon ewig lang probiert, und komme auf keinen grünen Zweig. Ich bekomme da über die conf.template nur die gesamte Breite verstellt...

[flip-flop]

Horizontale Navi:
Das hovern im aktiven Zustand sieht für mich noch ein wenig komisch aus.
Ein Vorschlag:

Code: Select all

/* Formatting hover status a-tag  // Formatierung hover Status a-tags */
.nav-row-horiz02 .normal a:hover {
    background: #3A8133;
    padding: 7px 3px 8px 3px;          /* dist01-top + dist02-top: 2 + 65 = 67 */
    margin-top: 5px;
    color: #fff;         /* IE6  */
    position: relative;  /* IE6  */
}
.nav-row-horiz02 .aktiv a:hover {
    padding: 12px 3px 13px 3px;
    margin-top: 0px;
    background: #BF0034;
}

Vertikale Navi:

Die Verbindung zum Rahmen wird auch hier funktionieren, allerdings nur schwerlich mit der uralten NAV_TABLE_COLUMN. Diese Navi ist nicht mehr zeitgemäß.

Sind zukünftig noch Unterebenen geplant? Wenn nicht würde ich auch hier die NAV_ROW verwenden, sonst die NAV_LIST_UL (CSS).


Knut