[GELÖST] Menüproblem

[Pulli]

Hallo Zusammen,

habe mal an ein paar CSS-Standardtemplates von OSWD rumprobiert. Wie die halt so in CMSms einzubauen sind.

Soweit hat auch bisher eigentlich alles super geklappt. Aber irgendwie hab ich bei allen Versuchen Probleme mit den Menüs.

Folgende Stylesheets liegen zu grunde:

#menu
{
  height: 31px;
  padding-right: 2px;
  margin: 0;
  list-style: none;   
}

#menu li
{
  float: right;
  display: block;
  width: 82px;  height: 31px; 
}

#menu a
{
  display: block;
  width: 82px;  height: 31px; 
  background-color: inherit;
  text-decoration: none;
  line-height: 31px;
  text-align: center;
}

#menu a:link, #menu a:visited
{
  color: #749942;
  background-color: #D3E2C3;
}

#menu a:hover, #menu a:active
{
  background-image: url(uploads/images/plana/taba2.jpg);
  color: #ffffff;
}

#menuselected
{
  display: block;
  width: 82px;  height: 31px; 
  background-image: url(uploads/images/plana/taba.jpg);   
  text-decoration: none;
  line-height: 31px;
  color: #ffffff;
  text-align: center;
}

Einbau im Template:

{menu}

Es sollte also die aktive Seite wie beim Hover erscheinen. Tut es aber nicht.

Hat jemand einen Tip, wie ich das richtig hinbekomme. Irgendwie steh ich auf dem Schlauch, woher CMSms sich das Aussehen der aktiven Seite zieht.

Dieses Problem hatte ich bei eigentlich bei allen Templates, die ich so im Netz gefunden habe. Alles super, aber menü aktuelle siete... 

vielen dank für eure hilfe.

[antibart]

Die vom CMS mitgelieferten Klassen, die bei der  Simple Navigation benutzt werden, heissen:

.currentpage (für die gerade aktive Seite)

und

.activeparent (für übergeordnete Menüpunkte der gerade aktiven Seite)

Und wohlgemerkt: es sind Klassen, keine IDs. . Du musst vermutlich

Code: Select all

#menuselected
{
  display: block;
  width: 82px;  height: 31px; 
  background-image: url(uploads/images/plana/taba.jpg);   
  text-decoration: none;
  line-height: 31px;
  color: #ffffff;
  text-align: center;
}

ändern in

Code: Select all

.currentpage a{
  display: block;
  width: 82px;  height: 31px; 
  background-image: url(uploads/images/plana/taba.jpg);   
  text-decoration: none;
  line-height: 31px;
  color: #ffffff;
  text-align: center;
}

Ich weiß allerdngs nicht genau, ob Du das auch meinst, weil ja zusätzlich noch ien paar Pseudoklassen definiert hast.

Die von dir benutzte Pseudoklasse a:active wirkt sich nur auf den Moment des Anklickens (oder Loslassens) des Menüpunktes aus - also nicht auf den Zustand, während die Seite geöffnet ist.  a:visited betrifft den Zustand, sobald eine Seite  gecached wurde. Die würde ich am besten gar nicht benutzen - sonst wird es zu bunt.

[Pulli]

Die vom CMS mitgelieferten Klassen, die bei der  Simple Navigation benutzt werden, heissen:

.currentpage (für die gerade aktive Seite)

und

.activeparent (für übergeordnete Menüpunkte der gerade aktiven Seite)

Und wohlgemerkt: es sind Klassen, keine IDs. . Du musst vermutlich

Code: Select all

#menuselected
{
  display: block;
  width: 82px;  height: 31px; 
  background-image: url(uploads/images/plana/taba.jpg);   
  text-decoration: none;
  line-height: 31px;
  color: #ffffff;
  text-align: center;
}

ändern in

Code: Select all

.currentpage a{
  display: block;
  width: 82px;  height: 31px; 
  background-image: url(uploads/images/plana/taba.jpg);   
  text-decoration: none;
  line-height: 31px;
  color: #ffffff;
  text-align: center;
}

Ich weiß allerdngs nicht genau, ob Du das auch meinst, weil ja zusätzlich noch ien paar Pseudoklassen definiert hast.

Die von dir benutzte Pseudoklasse a:active wirkt sich nur auf den Moment des Anklickens (oder Loslassens) des Menüpunktes aus - also nicht auf den Zustand, während die Seite geöffnet ist.  a:visited betrifft den Zustand, sobald eine Seite  gecached wurde. Die würde ich am besten gar nicht benutzen - sonst wird es zu bunt.

habe es jetzt geändert, aber leider hat sich da nichts geändert. wie gesagt, wenn eine seite aktiv ist, soll sie genau so aussehen, wie die seiten bei dem hover. also mit dem reiter.

wenn ich den a:visited wegnehme, erscheinen die links aber aber ansonsten alle in schwarz. das will ich ja nicht.

wie gesagt habe das template von oswd runtergeladen. ist bisher auch nur mal so zum test. aber beim menü klappt das halt nicht so einfach.

wie müsste ich denn das menü genau richtig nach CMSms-Richtlinien aufbauen, wenn ich es mit {menu} im template aufrufe ?

[cyberman]

Wenn du {menu} ohne den Parameter template aufrufst, wird das MenuManager-Template "simple_navigation.tpl" verwendet.

Es könnte durchaus sein, dass du dieses MM-Template für die Verwendung eines OSWD-Templates noch etwas anpassen musst, zumal z.Bsp. die currentpage in der CMSms-Musterinstallation als h3 dargestellt wird.

[antibart]

habe es jetzt geändert, aber leider hat sich da nichts geändert.

Ich hab oben das #menu vor currentpage vergessen. Sorry.

wenn ich den a:visited wegnehme, erscheinen die links aber aber ansonsten alle in schwarz. das will ich ja nicht.

Wie die Links im "Normalzustand" aussehen, definierst Du doch über

#menu a {}

Im Grunde brauchst Du nur ganz normales css und brauchst keinerlei "css-richtlinien" befolgen. Der Tag {menu} erzeugt nur eine ganz einfache UL-Liste in der Div-Box .

Du kannst theoretisch Dein Menü statisch "vordesignen" und danach genau so im CSM benutzen. Du machst also nichts anderes, als über css eine Link-Liste zu formatieren:

Vorausgesetzt natürlich, die Menü-Templates wurde nicht - wie Cyberman schon schrieb - stark modifiziert.

#menu {div-box styles}

#menu ul {ul styles}

#menu li {list styles}

#menu a {menulinkstyles im "normalzustand"}

#menu a:hover {menulinkstyles beim mouseover}

#menu a.currentpage {menulinksstyles der gerade activen Seite}

und evtl. noch

#menu a.currentpage:hover {}

#menu a.activeparent {}

und wenn es sein muss noch

#menu a:focus,a:active {}

Eigentlich reicht das.

Aber vielleicht verstehe ich dich auch falsch. Denn Du sagst immer "die Seite soll genauso aussehen" ... meinst Du die Seite oder den menüpunkt?

[Pulli]

hallo zusammen,

also vorweg erstmal vielen dank für eure hilfe.

klar ich meinte natürlich das menü und nicht die seite...sorry. da habe ich mich leider falsch ausgedrückt.

habe es jetzt wie folgt hinbekommen...

stylesheet:

Code: Select all

#menu
{
  height: 31px;
  padding-right: 2px;
  margin: 0;
  list-style: none;   
}

#menu li
{
  float: right;
  display: block;
  width: 82px;  height: 31px; 
}

#menu a
{
  display: block;
  width: 82px;  height: 31px; 
  background-color: inherit;
  text-decoration: none;
  line-height: 31px;
  text-align: center;
  color: #749942;
  background-color: #D3E2C3;
}

#menu a:hover, #menu a:active, #menu a.selected
{
  background-image: url(uploads/images/plana/taba2.jpg);
  color: #ffffff;
}

mit currentpage hat es nicht geklappt...warum auch immer. aber selected hat funktioniert.

im menümanager-template:

Code: Select all

{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->current == true || $node->parent == true}
			<li><a href="{$node->url}" class="selected">{$node->menutext}</a>

{else}
			<li><a href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
			</ul>
{/if}

frag mich nicht, was das bedeutet oder wie ich darauf gekommen bin. hatte ich bei einer anderen seite von mir gefunden und einfach mal versucht.

und im template dann:

Code: Select all

{menu template='name des menümanager-templates' number_of_levels='1' collapse='1'}

das funktioniert soweit.

aber habe noch eine frage. liegt es am css, das die seitenstruktur quasi verdreht ist ?
also im menü steht die erste seite ganz rechts usw.  und nicht wie eigentlich gewünscht links... 

[antibart]

mit currentpage hat es nicht geklappt...warum auch immer.

Ganz klar. Weil das eben (siehe Cybermans Antwort oben) nicht ganz das Standard-Menütemplate ist. In diesem Fall wurde die Klasse currentpage im Template umbenannt in selected. Du hättest es also auch umgekehrt machen können. Ist gehupft wie gesprungen.

Gusstu hier:

Code: Select all

<li><a href="{$node->url}" class="selected">{$node->menutext}</a>

aber habe noch eine frage. liegt es am css, das die seitenstruktur quasi verdreht ist ?
also im menü steht die erste seite ganz rechts usw.  und nicht wie eigentlich gewünscht links... 

Sicher ... gucke mal, was da steht:

#menu li
{
  float: right;}

[Pulli]

aber habe noch eine frage. liegt es am css, das die seitenstruktur quasi verdreht ist ?
also im menü steht die erste seite ganz rechts usw.  und nicht wie eigentlich gewünscht links... 

Sicher ... gucke mal, was da steht:

#menu li
{
  float: right;}

ich dachte das bezieht sich auf die ausrichtung oben, also ob das menü links oder rechtsbündig vom rest steht. wenn ich es auf left setze stimmt zwar die reihenfolge (also in diesem fall start, leistungen, kontakt, impressum), aber es sitzt halt links.

sorry, aber irgendwie steht ich heute ein wenig auf dem schlauch...

[antibart]

ich dachte das bezieht sich auf die ausrichtung oben, also ob das menü links oder rechtsbündig vom rest steht.

Wie Du ja selbst sehen kannst, stimmt das nur begrenzt. Bei einer Liste hat es halt Nebenwirkungen. Das Wort "float" bedeutet ja nicht "ausrichten" sondern "fließen".. was heisst bei "right": die Liste fließt von rechts nach links, statt umgekehrt.... Für "ausrichten" gibt es den "text-align", der aber bei deinem Menü jetzt nicht unbedingt die beste Lösung ist, weil es dazu noch ien Elternelement bräuchte, an dem etwas ausgerichtet sein müsste.

sorry, aber irgendwie steht ich heute ein wenig auf dem schlauch...

Na , ich hab eher den Eindruck, es braucht einen kleinen css-Grundkursus.

Ein Listen-Menü ausrichten und positionieren und Abstände definieren solltest nicht über "float", sondern über margin, allenfalls noch padding.

Bei Dir gibt es  zB auch kein #menu ul {}

Zwar wird ul genauso behandelt wie eine div-box, aber in deinem Menü-Template gibt es keine UL mit dem Namen "menu". Wenn Div "#menu" also ein übergeordnetes Elternelememt ist (und so scheint es zumindest), könntest Du mit #menu ul {} die Position des menüs bestimmen.

Wie auch immer: Nimm einfach float:left; und mach den Rest über padding/margin..

[Pulli]

Na , ich hab eher den Eindruck, es braucht einen kleinen css-Grundkursus.

da magst du durchaus recht haben. bin halt eher designer als programmierer, aber man versucht sich ja mal reinzufuchsen nicht war...

[antibart]

da magst du durchaus recht haben. bin halt eher designer als programmierer, aber man versucht sich ja mal reinzufuchsen nicht war...

Es war ja auch kein Vorwurf und bedarf keiner Rechtfertigung. Wichtig ist nur, ob es nun geklappt hat.

PS: ich bin weiß Gott auch kein Programmierer

[Pulli]

da magst du durchaus recht haben. bin halt eher designer als programmierer, aber man versucht sich ja mal reinzufuchsen nicht war...

Es war ja auch kein Vorwurf und bedarf keiner Rechtfertigung. Wichtig ist nur, ob es nun geklappt hat.

PS: ich bin weiß Gott auch kein Programmierer

sollte auch gar keine rechtfertigung sein, das ich da noch nachholbedarf habe weiß ich selbst. 

aber ich will es ja lernen, und mit der zeit habe ich sicherlich auch schon fortschritte gemacht, aber ich bleibe weiter dran.

vielen dank auf diesem wege auf alle fälle für die super hilfe und die guten ratschläge.