[gelöst] Grafisches Menü mit MenüManager

[elle]

Hey ihr,

also ich möchte für meine Seite (im Aufbau unter www.port-e.de/cmsmadesimple/ zu finden) eine bestimmte Schriftart für das Menü verwenden und habe deswegen die einzelnen Menüpunkte als gif´s vorliegen.

Der Code für mein Menü sieht so aus.

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}
		<h1>	<li id="button_{$node->hierarchy}" class="selected"><a href="{$node->url}">{$node->menutext}</a></h1>

{else}
<h1>	
		<li id="button_{$node->hierarchy}"><a href="{$node->url}">{$node->menutext}</a>{/if}{/foreach}{repeat string="</li></h1></ul>" times=$node->depth-1}</li>
			</ul>
{/if}

über die id für jeden Punkt habe ich dem Menü die einzelnen Grafiken als Hintergrundbilder hinzugefügt. Und den eigentlichen Text über text-intent nach außerhalb verschoben. Nur so funktioniert es nicht, da ich dann keinen Link zum anklicken habe. Wie kann ich denn den TExt durch das Bild austauschen und so einen grafischen Link machen? Warscheinlich ist die Lösung ganz einfach, aber irgendwie stehe ich gerade auf dem Schlauch.

Code: Select all

#button_1{
/* you can set your own image here */
   background: url(uploads/images/work.gif) no-repeat; 
   
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
border-right: 1px solid #fff;}


#button_2{
/* you can set your own image here */
   background: url(uploads/images/away.gif) no-repeat; 
   
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
border-right: 1px solid #fff;}

#button_3{
/* you can set your own image here */
   background: url(uploads/images/about.gif) no-repeat; 
   
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#menu ul{
display: inline;
list-style-type: none;
list-style-position:outside;
width: 100%;
}

div#menu li {
float: left;
margin-top: 110px;
width: 200px;
height: 35px;

}

Und habt nachsicht mit mir, dass ist mein erstes Projekt mit cmsms!

Viele Grüße
eleonore

[mike-r]

Das Modul Truetypetext schon einmal angeschaut?
http://dev.cmsmadesimple.org/frs/?group_id=161

[elle]

Meine Schrift liegt im otf-Format vor. Damit funktioniert es irgendwie nicht richtig 

[mike-r]

Du könntest eine Truetype nehmen: http://www.myfonts.com/fonts/efscangrap ... gramlang=3
Alternativ gibt es Tools, mit denen man die Schriften umwandeln kann. Nicht getestet: http://fontforge.sourceforge.net/

Finde das allerdings auch suboptimal, dass das Plugin kein OTF kann.

[NaN]

Dein Problem mit den Bildern als Hintergrundgrafik ist folgendes:

Du formatierst mit der id button_x nicht den Link, sondern den Listenpunkt.
Pack das Hintergundbild in den Listenpunkt und formatiere mit #button_X a {...} den Text des links.

Außerdem würde ich die Formatierung für die Menübuttons nicht einfach so pauschal an den Anfang des Menüstylesheets setzen, sondern in die vorhandenen Styles einarbeiten bzw. in der Reihenfolge festlegen, wie sie im Template vorkommen.

Bsp. (ganz allgemein; gilt für alle Elemente in diesem Menü):

div#menu {...}

div#menu ul {...}

div#menu ul li {...}    <- das sind die listenpunkte (bilder siehe unten)

div#menu ul li a {...}  <- das sind die links (text)


Und jetzt für die Listenpunkte mit der id button_x:

div#menu ul li#button_1 {
         background: url(...) no-repeat;
}

usw.

[elle]

Guten Morgen,

ach die Hoffnung stirbt doch zuletzt! Gestern war ich so verzweifelt, aber jetzt funktioniert es wirklich und war eigentlich ganz unkompliziert!

Tausend Dank....Elle

[cyberman]

Evtl. hätte dir auch das weitergeholfen

http://themes.cmsmadesimple.org/Image_menu.html