Page 1 of 1
Eigene horinzontale Navigation
Posted: Fri 23. Apr 2010, 21:35
by 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???
Re: Eigene horinzontale Navigation
Posted: Sun 25. Apr 2010, 12:37
by 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
Re: Eigene horinzontale Navigation
Posted: Sun 25. Apr 2010, 14:53
by 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
Re: Eigene horinzontale Navigation
Posted: Sun 25. Apr 2010, 15:54
by flip-flop
Hallo Manfred,
danke für den Hinweis: Fehler beim Ersetzen .....
Knut
Re: Eigene horinzontale Navigation
Posted: Mon 26. Apr 2010, 10:33
by 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.
Re: Eigene horinzontale Navigation
Posted: Mon 26. Apr 2010, 11:08
by flip-flop
Vorschlagt eingereicht: Im
wiki der Button links mit den sechs Buchstabel (P..P..)
Knut
Re: Eigene horinzontale Navigation
Posted: Mon 26. Apr 2010, 13:54
by 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...
Re: Eigene horinzontale Navigation
Posted: Mon 26. Apr 2010, 14:41
by 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;
}
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