[Risolto] Immagini nelle voci del topmenù

[acciarinoway]

Salve ragazzi,
grazie a voi sono già riuscito ad inserire le immagini nei titoli dei menù laterali ma ora vorrei aggiungere delle immagini nelle voci di menù che appartengono al top menù.
Ho seguito questa utilissima guida : http://www.joomla.it/articoli-della-community/877-inserire-immagini-nel-menu.html e come potete vedere ( http://ilnostroguadagno.altervista.org ) l'immagine nella voce di menù "novità" è già stata inserita, ma la posizione non è corretta. Analizzando il css ho trovato (credo) i dati relativi al top menù che dovrebbero essere questi:

/* horizontal pill menu */

table.pill {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
 }

td.pill_l {

background: url(../images/mw_menu_cap_l.png) no-repeat;
  width:  20px;
  height: 32px;

}

td.pill_m {
  background: url(../images/mw_menu_normal_bg.png) repeat-x;
  padding: 0;
  margin: 0;
  width: auto;
}

td.pill_r {
  background: url(../images/mw_menu_cap_r.png) no-repeat;
  width:  19px;
  height: 32px;
}

#pillmenu {
  white-space: nowrap;
  height: 32px;
  float: left;
}

#pillmenu ul {
  margin: 0;
  padding: 0;
  list-style:none;
}

#pillmenu li {
   float: left;
   background: url(../images/mw_menu_separator.png) top right no-repeat;
   margin: 0;
   padding: 0;
}

#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
   float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 0px 20px;
  color: #000;
  text-decoration: none;
}

#pillmenu a#active_menu-nav {
   margin-top:0px;
   height: 21px;
   line-height: 21px;
   background-position: 0 0;
}

Il  top menù è un mainmenù e visto che ho già modificato alcuni menù per l'inseimento delle immagini (come dicevo prima) non so se dovrei crearne un'altro personalizzato o meno.
Al momento ho provato ad aggiungere parametri nella prima colonna :

table.pill {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
 }

e nell'ultima visto che il suffisso -nav è presente di per se nel modulo topmenù:

#pillmenu a#active_menu-nav {
   margin-top:0px;
   height: 21px;
   line-height: 21px;
   background-position: 0 0;
}

Non sono riucito a fare un granchè e probabilmene sbaglierò qualcosa
Chi di voi mi darebbe un consiglietto?

[ellezero]

ma tu vuoi sostituire il testo con l'immagine o vuoi affiancarlo e se lo vuoi affiancare, da che parte?

spiega meglio cosa vuoi ottenere cosi e' piu facile dorti cosa modificare
ciao!

[acciarinoway]

Si scusa hai perfettamente ragione
Ci stavo continuando a lavorare provando anche sugli altri pill menu dove non sono presenti immagini.
Il risultato finale dovrebbe essere + o - come quello degli altri menù : immagine a sinistra e scritta subito dopo.
Come viene scritto nell'articolo ho impostato la voce di menù e il modulo in modo che possa essere vista l'immagine e poi l'ho posizionata a sinistra ( inizialmente era a destra).
Fatto questo come penso avrai visto, da scritta a sinistra e immagine a destra, mi è passata a immagine sopra e scritta sotto.
Ho trovato un campo che mi permette di allargare lo spazio della tabella e un altro che invece mi permette di spostare il tutto a sinistra solo che momentaneamente ho il blocco Altervista e mi devo fermare.
Posto la parte del css che ho modificato :

#pillmenu ul {
  margin: 0 0px 0px 0px;
  padding: 0px;
  list-style:none;
margin-left: -30px;
}

In margin dovrei trovare il parametro per allargare e con margin left dovrei riuscire a spostarla a sinistra.
Giusto?
Spero di essermi spiegato un pò mejo 

[ellezero]

dunque, se ne''html inerisci la <img> dentro il tag <a> prima della scritta novita ti si allineano, l'immagine diventa cliccabile come il testo e si allinea a sinistra.

a questo punto devi solo sistemare gli allineamenti (compreso il fatto che il background viene interpretato in modo sbagliato).
ma partiamo da qui, era questo che volevi?

[acciarinoway]

Allora credo che quello che hai scritto sia quello che voglio, ovvero l'allineamento di immagine e scritta, anche se non mi interessa che l'immagine sia cliccabile o meno, ma non so quale sia la pagina html di cui parli (il template.css ?) .
Per farla breve ti allego un'immagine di come vorrei venisse:


[allegato vecchio più di un anno eliminato automaticamente]

[acciarinoway]

Mizzeca ci sono arrivato e se posso dirla tutta sono un pirletto 
Nel modulo avevo impostato in stile menù "lista flat" e ora che l'ho modificata in "lista" l'allineamento è ok 
Dovrò solo distaccare un poco la scritta dall'immagine.

[ellezero]

scusa, forse mi sono persa un passaggio, come hai inserito l'immagine? non hai messo, come sembra, del codice nell'html? ( in amministrazione -> estensioni -> gestione template -> sel tuo template -> mod html)

e se non cosi, come hai inserito il link all'immagine? con un modulo? con parametro di sistema nella conf del menu?

nel caso ti servisse un modulo x fare quello che chiedi (se hai voglia di guardartelo) io avevo usato questo
http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/image-menus/3636

e mi ero trovata bene

[ellezero]

ahahah, ottimo cosi, ricordati il [risolto] nel titolo del tuo primo post!

[acciarinoway]

Certo elle  Sei stata gentilissima , grazie di tutto e scusa se ti ho fatto perdere un pò di tempo 
Ciauz!!!!

[acciarinoway]

Anche io mi ero perso un passaggio
Non avevo letto la domanda sulla foto, comunque rimedio subito 
Non sono passato dall'html perchè ho inserito l'immagine nella cartella image/stories e poi nella voce di menù che avevo creato e che volevo modificare, ho sistemato in "parametri sistema" l'immagine che volevo usare.
Già leggendo l'articoletto che dicevo prima, avevo anche cambiato la spunta che riguarda l'immagine nel modulo e poi avevo impostato l'immagine a sinistra.
Se invece vuoi sapere per i menù laterali, ho creato un modulo copia di quello originale e gli ho aggiunto l'immagine poi cambiando suffisso ho concluso.