{DETAILMENU} visuell anpassen?

[alphasimi]

Hallo

Das Problem:
Ich habe mein Mainmenu in einem horizontalen "Balken" und das Detailmenu in einem vertikalen "Balken"(layoutbedingt).
Weil der vertikale Container eine feste Breite hat, möchte ich, dass das Detailmenu ohne Einrückung und Menupunkte dargestellt wird. Des Weiteren möchte ich jedem Detailmenupunkt ein Icon anhängen.

Die Frage:
Wie ist es möglich die Funktion {DETAILMENU} anzupassen?
Im Admin-Bereich habe ich nichts gefunden..

[hausl78]

Hi!

Das {DETAILMENU} wird an der Stelle ausgegeben, wo man es im template.html angibt. Es ist im Endeffekt eine einfache Liste, die man dann mittels den CSS-Eigenschaften style.css im layout hinstylen kann wie man will.

zB:

Code Auswählen Erweitern

<ul class="detailmenu">

<li class="detailmenu"><a href="/web/Willkommen/Testseite%20mit%20etwas%20l%C3%A4ngerem%20Namen.html" class="detailmenuactive" title="Inhaltsseite &quot;Testseite mit etwas l&auml;ngerem Namen&quot; der Kategorie &quot;Willkommen&quot; anzeigen">Testseite mit etwas l&auml;ngerem Namen</a></li>

<li class="detailmenu"><a href="http://www.google.at/ig?hl=de&amp;amp;source=iglk" class="detailmenu" target="_blank" title="Externe Adresse &quot;http://www.google.at/ig?hl=de&amp;amp;source=iglk&quot; aufrufen">Externer Link</a> </li>

etc..
</ul>


Hier sind die verwendeten css-Klassen:
http://entwicklung.mozilo.de/index.php? ... S-Elemente

Code Auswählen Erweitern

ul.detailmenu
li.detailmenu
a.detailmenu (Detailmenüpunkt)
a.detailmenuactive (aktiver Detailmenüpunkt)
Juergen

[alphasimi]

Vielen Dank für die rasche Antwort, ich werds ausprobieren..

[alphasimi]

Das Problem besteht leider immer noch.. irgendwie hab ichs noch nicht so recht hin bekommen.

Ich möchte die Punkte (rot umrandet) entfernen, den Text ganz nach links schieben (blauer Pfeil) und jedem Menupunkt ein Icon zuordnen (grüner Kreis)

mit den CSS-Befehlen list-style-position und list-style-image hab ichs nicht geschafft..

[m4ddy]

hi alphasimi,

damit das so funtkioniert wie du dir das vorstellst, musst du erstmal die html eigenen Listicons entfernen und dann über die eigenschaften der elemente eigene eigene Elemente einfügen, das könnte so aussehen:

Code Auswählen Erweitern

li.detailmenu {
   list-style: none;  /* macht dir die Punkte Weg */
   background: url(../grafiken/deinegrafik.png) right center no-repeat; /* fügt dir die grafik am rechten Rand ein, die du haben möchtest */
}

je nachdem wie deine Grafiken aussehen, musst du dann natürlich noch über li.detailmenu mit einem padding-right platz machen, aber das ist eigentlich eine probier Angelegenheit. Da gibts ungefähr ein Dutzend unterschiedliche Lösungsmöglichkeiten.

gruß
m4ddy

[alphasimi]

So, die Punkte sind mal weg, aber der Rest hat noch nicht funktioniert..
Wie kann ich nun die Grösse der Icons im CSS-File definieren, jetzt sind sie noch zu gross.
Zweites Problem ist immer noch das Einrücken des Menus.

Ich wäre froh, wenn mir jemand dabei helfen könnte (blauer Pfeil), das Andere hat weniger Priorität..

[hausl78]

Vermute mal in der .css hat das betreffende ul.detailmenu oder li.detailmenu noch ein padding oder einen margin auf der linken seite drinnen, der gehört raus. Is so nicht zu sagen, ohne Link.

also in der css entweder nach padding-left oder margin-left suchen oder wenn sowas steht padding: 0 5px 0 5px; dann sind die 4 Werte im Uhrzeigersinn padding: [top]

[bottom]

;
Siehe auch hier: http://www.css4you.de/padding.html

Das Bild selbst würd ich in einem Grafikprogramm auf die gewünschte Größe bringen.. müßte suchen, ob man explizit für das bild im css einen größe (in % oder em) migeben kann.

Juergen

[m4ddy]

müßte suchen, ob man explizit für das bild im css einen größe (in % oder em) migeben kann.

Nee, das geht soweit ich weiß nicht. Wäre aber wohl auch nicht sehr empfehlenswert. Runterskallierte Grafiken werden ja meist recht hässlich, wenn man sowas nem Browser überlässt.    

Aber wie hausl schon sagt: ul.detailmenu {padding:0; margin: 0;}

Das empfiehlt sich ja allein schon wegen der Unterschiede, zumindest bei älteren Browsern, die da ja nicht alle gleich interpretieren, wenn kein Wert angegeben ist.

gruß
m4ddy

[alphasimi]

Jetzt hats mit dem Einrücken geklappt.
Ich habs nun so gemacht:

Code Auswählen Erweitern

ul.detailmenu{
 padding-left: 0px;
}
Vielen Dank für den Tipp und mit den Icons werd ich noch schauen,ob ich die dann überhaupt einbaue.