Top simple navigation + left subnavigation + 1 column

[SCM]

Hi zusammen

ich benutze bei meinem Projekt das mitgelieferte Template Top simple navigation + left subnavigation + 1 column

Das funktioniert auch wunderbar, wenn jeder Eintrag im Topmenu mindestens einen Eintrag im Submenu hat. Wenn allerdings für diesen Topmenu eintrag kein Submenueintrag verfügbar ist und ich diese Seite im Topmenu anwähle, dann rutscht dieser Link bis an die obere Kante und ändert die Farbe, was sehr hässlich ist. Weiss jemand wieso das so ist??

danke scm

[NaN]

Weil im Stylesheet bestimmt auf eine Klasse namens "haschildren" bzw. "activeparent" Bezug genommen wird.
Diese Klasse bekommt der Link aber nur, wenn er untergeordnete Element hat.
Also einfach mal schauen was im HTML Quelltext im Browser dür diesen Eintrag generiert wurde, und dann das CSS anpassen.

[nockenfell]

Kannst du mal einen Link der Seite posten?

[SCM]

ungern, aber ich verstehe dass das vielleicht helfen würde das ganze zu verstehen. ich hänge mal 2 screenshots dran. einen moment

[SCM]

so hier die screenshots:

[antibart]

Es sieht aus, als ob NaN schon den richtigen Hinweis gegeben hat.

Untersuch mal die Klassen currentpage, haschildren und menuparent.

[SCM]

ah danke habe NaNs post gar nicht gesehen, werde ich heute abend gleich mal ausprobieren!

[SCM]

so habs mal verscuht. allerdings finde ich nirgends ein passendes stylesheet wo ich sowas eintragen könnte

[SCM]

irgendwo hier müsste der fehler sein denke ich mal, aber finde es nicht:

Code: Select all

/********************MENU*********************/
/* hack for IE6 */
* html div#menu_horiz {
/* hide ie/mac \*/
	height: 1%;
/* end hide */
}
div#menu_horiz {
/* background color for the entire menu row */
	background-color: #243135;
/* insure full width */
	width: 100%;
/* set height */
	height: 49px;
	margin: 0;
}
div#menu_horiz ul {
/* remove any default bullets */
	list-style-type: none;
	margin: 0;
/* pushes the menu div up to give room above for background color to show */
	padding-top: 10px;
/* keeps the first menu item off the left side */
	padding-left: 10px;
}
/* menu list items */
div#menu_horiz li {
/* makes the list horizontal */
	float: left;
/* remove any default bullets */
	list-style: none;
/* still no margin */
	margin: 0;
}
/* the links, that is each list item */
div#menu_horiz a {
/* pushes li out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
	padding: 12px 15px 15px 0px;
/* still no margin */
	margin: 0;
/* removes default underline */
	text-decoration: none;
/* default link color */
	color: #FFF;
/* makes it hold a shape, IE has problems with this, fixed above */
	display: block;
}
/* hover state for links */
div#menu_horiz li a:hover {;
/* set your image here, dark grey image with white text set above*/
	background:  url(uploads/ngrey/nav.png) repeat-x left -50px;
}
div#menu_horiz a span {
/* compensates for no left padding on the "a" */
	padding-left: 15px;
}
div#menu_horiz li.parent a span {
/* no left padding on the "a" we can set it here, it lets us use the span for an image */
	padding-left: 20px;
/* set your image here, down arrow to note it has children, left side of text */
	background: url(uploads/ngrey/active.gif) no-repeat 0.3em center;
}
div#menu_horiz li.parent a:hover span {
	padding-left: 20px;
/* hover replaces default with right arrow image */
	background: url(uploads/ngrey/parent.gif) no-repeat 0.3em center;
}
div#menu_horiz li.menuactive a span {
	padding-left: 20px;
/* menuactive replaces default with right arrow image */
	background: url(uploads/ngrey/parent.gif) no-repeat 0.5em center;
	color: #000;
}
/* active parent, that is the first level parent of a child page that is the current page */
div#menu_horiz li.menuactive, div#menu_horiz li.menuactive a:hover {
/* set your image here, light image with #000/black text set below*/
	background:  url(uploads/ngrey/nav.png) repeat-x left 0px;
	color: #000;
}

thx scm

[NaN]

Da ist tatsächlich ein kleiner Fehler im Beispieltemplate.
Versuchs mal mit diesem Stylesheet:

Code: Select all

/********************MENU*********************/
/* hack for IE6 */
* html div#menu_horiz {
/* hide ie/mac \*/
	height: 1%;
/* end hide */
}
div#menu_horiz {
/* background color for the entire menu row */
	background-color: #243135;
/* insure full width */
	width: 100%;
/* set height */
	height: 49px;
	margin: 0;
}
div#menu_horiz ul {
/* remove any default bullets */
	list-style-type: none;
	margin: 0;
/* pushes the menu div up to give room above for background color to show */
	padding-top: 10px;
/* keeps the first menu item off the left side */
	padding-left: 10px;
}
/* menu list items */
div#menu_horiz li {
/* makes the list horizontal */
	float: left;
/* remove any default bullets */
	list-style: none;
/* still no margin */
	margin: 0;
}
/* the links, that is each list item */
div#menu_horiz a,
div#menu_horiz h3 {
/* pushes li out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
	padding: 12px 15px 15px 0px;
/* still no margin */
	margin: 0;
/* removes default underline */
	text-decoration: none;
/* default link color */
	color: #FFF;
/* makes it hold a shape, IE has problems with this, fixed above */
	display: block;
}
/* hover state for links */
div#menu_horiz li a:hover,
div#menu_horiz li a.currentpage,
div#menu_horiz li.currentpage h3 {
/* set your image here, dark grey image with white text set above*/
	background:  url(uploads/ngrey/nav.png) repeat-x left -50px;
}
div#menu_horiz a span,
div#menu_horiz h3 span {
/* compensates for no left padding on the "a" */
	padding-left: 15px;
}
div#menu_horiz li.parent a span,
div#menu_horiz li.parent h3 span  {
/* no left padding on the "a" we can set it here, it lets us use the span for an image */
	padding-left: 20px;
/* set your image here, down arrow to note it has children, left side of text */
	background: url(uploads/ngrey/active.gif) no-repeat 0.3em center;
}
div#menu_horiz li.parent a:hover span,
div#menu_horiz li.parent h3:hover span {
	padding-left: 20px;
/* hover replaces default with right arrow image */
	background: url(uploads/ngrey/parent.gif) no-repeat 0.3em center;
}
div#menu_horiz li.menuactive a span,
div#menu_horiz li.menuactive h3 span {
	padding-left: 20px;
/* menuactive replaces default with right arrow image */
	background: url(uploads/ngrey/parent.gif) no-repeat 0.5em center;
	color: #000;
}
/* active parent, that is the first level parent of a child page that is the current page */
div#menu_horiz li.menuactive, div#menu_horiz li.menuactive a:hover,
div#menu_horiz li.menuactive h3:hover {
/* set your image here, light image with #000/black text set below*/
	background:  url(uploads/ngrey/nav.png) repeat-x left 0px;
	color: #000;
}

Hab nur die CSS Selektoren für einfache aktive Seitenpunkte - die h3 Elemente - hinzugefügt.
Die fehlten einfach.

[SCM]

vielen dank so funktionierts nun schon fast perfekt. wenn wir aber schon mal dabei sind das beispiel template zu korrigieren wollte ich noch anmerken, dass die menupünkte ohne submenus fette schrift bekommen wenn man sie anklickt, die menueinträge mit unterpunkten hingegen nicht.

gruss scm

[NaN]

Nunja das kann man sehen wie man will.
Entweder ist der Fehler im Menü-Template zu sehen und man ändert das Menü-Template so, dass aktive Elemente generell Überschriften () sind (unabhängig davon, ob sie noch Submenus haben) bzw. umgekehrt, dass sie immer Links () sind.
Oder man muss halt für alle Überschriften im Menü font-weight:normal bzw. für alle Links der Klasse "currentpage" font-weight:bold angeben.

Ersteres fände ich besser, weil konsequenter.
Wenn aktiv, dann immer als h3 oder eben immer alles als Link.
Verstehe sowieso nicht, wieso das mal so und mal so geregelt ist.

Hier mal ein Beispiel (Menü-Template "simple_navigation.tpl" - modifiziert):

Code: Select all

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}


{if $node->parent == true and $node->current!=true}
<li class="menuactive menuparent"><a class="menuactive menuparent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->current == true}
<li class="parent currentpage">
<h3><span>{$node->menutext}</span></h3>
{else}
<li class="parent">
<a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}

{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

[SCM]

habe mal im stylesheet navigation: simple - horizontal unter currentpage das gesetzt

font-weight:normal

jetzt wird zwar der schrift nicht mehr fett, sie ist aber immer noch grösser als bei den anderen menueinträgen

[NaN]

Hab meinen Beitrag zwischenzeitlich editiert.
Probier mal lieber das Template anstelle die Stylesheets zu ändern.

Die Schriftgröße legt man übrigens mit font-size fest.
(Also für alle Einträge im CSS wo h3 drin vorkommt noch font-size:1em; einfügen)

[cyberman]

Da ist tatsächlich ein kleiner Fehler im Beispieltemplate.

Ist da ein Bugreport erforderlich?