[RISOLTO] Aiuto per risolvere problema grafica MainMenu

[colla]

Salve a tutti!!

Sono Andrea ed ho cominciato da poco a seguire e ad iniziare a creare qualcosa con il Joomla ma non sapendone niente di CSS c'ho messo un po' a creare le mie prime "template" personali.

Ora ho in progetto di creare dei menu un po' particolari a livello grafico ma qua mi sono piantato.

Vi spiego il problema:

Vorrei creare dei menu (per ora mi concentro sul main menu per non farmi troppi casini) che abbia un TOP e un BOTTOM con delle gif con trasparenza particolari e con una gif middle in repeat che prende la parte centrale del menu creato (diciamo la parte "deformabile" del menu).

A QUESTO INDIRIZZO potete vedere il menu a cui stò lavorando e il problema che mi da.

Nel dettaglio la gif usata come sfondo repeat del middle va a farmi da sfondo anche alla gif del TOP e non riesco a trovare la maniera di delimitare la zona del repeat nemmeno usando parametri "fissi" per la parte middle del menu.

Nel link di poco sopra vedete che il BOTTOM è apposto, ma li ho usato il "trucchetto" di dare di per se uno sfondo all'immagine ma questo mi limita tantissimo se dovessi proporre menu che sovrappongono altre parti del sito (per dirla breve non vorrei il fondo bianco nel menu)

La mia richiesta è quella di sapere se esiste una maniera, qualche parametro o altro per arrivare ad avere il menu con fondo trasparente.

Vi ringrazio tanto per il vostro aiuto e faccio i complimenti per il bellissimo sito e forum che tanto mi ha aiutato a capire meglio il CSS e Joomla!

Ciao a tutti!


Andrea

[dlando]

Cosi' al volo,
secondo me:
1- utilizzi una tabella in cui separi le 3 zone in top-centro-bottom con 3 righe distinte applicando lo sfondo solo al centro.
<table>
 <tr><td id="top"></td></tr>
 <tr><td id="centro"></td></tr>
 <tr><td id="bottom"></td></tr>
</table>

2- utilizzi 4 DIV:
<contenitore> <--- senza sfondo serve solo per delimitare
  <top></top> <--- sfondo come gif
  <centro></centro> <-- sfondo colorato
  <bottom></bottom> <-- sfondo come gif
</contenitore>

molto a spanne.

[joomlapixel]

E' possibile impostare tutto dal css,questo un estratto del foglio di stile del template joomlathinking:
div.module-blu h3 {
   margin: 0;
   font-weight: bold;
   font-family: Tahoma, Verdana, Arial;
   font-size: 1em;
   margin-top: 3px;
   margin-bottom: 20px;
   color: #455575;
}
div.module-blu {

   width: 180px;
   margin-top: 10px;
   margin-right: 0px;

   background-image:url(../images/mediablu.gif);
   background-repeat:repeat-y;
 }
div.module-blu div {
  background: url(../images/bottomblu.gif) bottom left no-repeat;
}
div.module-blu div div {
  background: url(../images/topblu.gif) top left no-repeat;
  padding: 7px 10px 15px 12px;
}
div.module-blu div div div {
  background: url(../images/spacer.gif);
  padding: 0;
  width: auto !important;
  width: 100%;
}

Il nome delle immagini penso chiarisca a sufficienza.
Per far si che funzioni è necessario impostare lo stile del modulo in -3 nell'index del template.
ovviamente ciò riguarda solo il "contenitore" del modulo,per realizzare il menù è sufficiente prendere come riferimento la classe "mainlevel" che si trova su rhuk.

[colla]

Ciao! Vi ringrazio tantissimo per le risposte, mi sono state in parte utilissime!

Purtroppo perè risolto un problema me n'è sorto un altro.

Praticamente ora, dividendo il menu in parti, risco a distinguere e geestire le 4 parti in maniera migliore e soprattutto il background repeat-y non lo vedo più nell'immagine TOP e BOTTOM del menu.

Il problema ora è che queste 2 immagini che dovrebbero essere l'inizio e la fine del menu mi si sballano competamente a causa della parte centrale del menu che non riesco a stabilizzare. In pratica se io "gioco" con i padding la parte centra mi si allunga o restringe e non riesco a capire il perchè.

Questo è il codice della parte, magari riuscite a vedere dove io sono cieco come una talpa

Codice: [Seleziona]

/* Modules */

#leftcol div.module h3 {
width: 300px;
padding-left: 20px;
padding-right: 10px;
padding-top: 6px;
background: transparent;
padding-bottom: 6px;
font-size: 10px;
}

#leftcol div.module {
width: 300px;
background: transparent;
margin-top: 5px;
margin-bottom: 5px;
}

#leftcol div.module div {
background: url(../images/module_top.gif) top left no-repeat;
padding-top: 20px;
}

#leftcol div.module div div {
width: 300px;
background:  url(../images/module_bottom.gif) bottom left no-repeat;
padding-bottom: 1px;
}

#leftcol div.module div div div {
width: 300px;
background: url(../images/module_middle.gif) top left repeat-y;
}

Vi ringrazio ancora per le vostre risposte che mi hanno fatto capire altre cose di cui avevo dubbi!

Ciau!! 

[colla]

Mi auto rispondo

Alla fine ce l'ho fatta!!

Di sicuro avevo scritto qualcosa di sbagliato perchè rifacendolo da zero ora funziona perfettamente!

Grazie di cuore per le vostre utilissime informazioni!

Alla prossima!

Andrea

[ryosaeba87]

potresti gentilmente postare il codice che stai usando attualmente?

io c'ho smanettato un po sopra, ma continuo ad avere il tuo stesso problema inizialmente descritto.

Grazie mille!

[ryosaeba87]

ce l'ho fatta anche io finalemtne