Centrare Menu Top [RISOLTO]

[Blodoks]

Salve a tutti!!
Ho fatto una rapida ricerca sul forum ed ho provato a seguire qualche consiglio per centrare il topmenu (ora è allineato a sinistra) ma non ho avuto grossi risultati...


il sito è www.alpi-ts.it/joomla e vorrei spostare al centro il menu principale ed eventualmente anche la slideshow ed il testo sottostante.
Non combino mica?! :/


Qualche dritta?
Grazieeeeee!!!

[Blodoks]

Nessuna idea? 

[Cereal___killer]

La cosa più semplice è questa:


apri il css standard del tuo template (o lo scarichi via FTP e dopo le modifiche lo ricarichi sovrascrivendolo, oppure vai in Gestione Template -> Template, apri il tuo (veniyard1.7) e clicchi su default.css nella colonna di destra per aprire in modifica il css)


(se usi FTP il css è in questo percorso:)
http://www.alpi-ts.it/joomla/templates/veniyard1.7/css/tdefaut.css


Cmq sia, dentro al css, ad un certo punto trovi questo codice:



.nav {
float: left;
position: relative;
z-index: 10;
}


(anche se a quanto pare nel tuo css non è scritto con i ritorni a capo ma tutto appiccicato, accidenti a chi lo ha scritto! in tal caso risulta essere così:)


.nav {float: left; position: relative; z-index: 10;}


Non devi far altro che aggiungerci dentro l'struzione:       left: 8%;


Quindi il risultato diventa:



.nav {
float: left;
position: relative;
z-index: 10;
left: 8%;
}


O se preferisci in linea: 


.nav {float: left; position: relative; z-index: 10; left: 8%;}


Questa istruzione distanzia il menù dal bordo sinistro di una misura percentuale; in tal modo, scegliendo la giusta percentuale (a me sembra centrato con 8%) rimarrà sempre in centro...
Se un giorno cambierai e/o aggiungerai voci al menu, esso diventerà più lungo o più corto, pertanto la percentuale andrà aggiustata di conseguenza...


Cmq secondo me dovresti poi centrare anche tutti i contenuti sottostanti il menù sennò l'effetto non è gradevole...

[Blodoks]

Ok, allora io forse sbagliavo nel cercare di correggere la posizione con un comando allign: center;
Il menu è centrato (grazieeee), ora vedo SE riesco a capire come centrare la gallery ed il testo...


Tanto per evitare ogni volta di chiedervi le stesse cose...come posso identificare in un CSS (specialmente in css caotici come questo) un determinato elemento che mi interessa editare? Ho visto che in chrome c'è la funzione "Ispeziona Elemento", può essere utile per ravanare nel css ed identificare quello che mi interessa poi modificare tramite FTP??


Grazie milleeeee!!!
PS. Tra il nome e l'avatar, hai vinto!

[Cereal___killer]

Certo, si fa proprio così.... Usa ispeziona elemento di Chrome; nella sua area nella parte bassa dello schermo, ti mostra a sinistra il codice html e a destra i selettori CSS (per ognuno ti dice in che CSS è memorizzato con la possibilità di aprirlo in un'altra scheda (tasto destro -> apri in un'altra scheda) per vederne il percorso...)


Passando col mouse sui vari tag html nella parte sinistra dell'area di ispeziona elemento, sul sito vengono evidenziate le parti che stai toccando... In genere devi agire sul contenitore più grande dell'area che vuoi modificare.
Cerca infine di non alterare mai le classi troppo generiche (ogni elemento html è annidato dentro altri, e ha delle classi o ID CSS suoi propri e altri che eredita dagli elementi genitori); modificare classi ereditate, implica che anche i tag html genitori che hanno quella classe vengono modificati;


Nell'esempio di prima, il menù del tuo sito è contenuto in un tag del tipo:


<div class="nav">.....................................<>


In tal caso alterando nel CSS la classe "nav", sono certo di alterare solo questo DIV ed eventualmente quelli al suo interno (ed eventualmente altri elementi della pagina di classe "nav", ma non ce ne sono)...


Spero sia chiaro

P.s.: ho fatto un'estate anni fa il vostro lavoro, e devo dire che vi fate un bel c...

[Blodoks]

Ok, quindi se ad esempio io volessi centrare la zona dell'articolo e conseguente gallery in esso contenuta, io vedo un idv class=leading-0 che però non c'è nel mio CSS.
Più "esterna" vedo una div class=items-leading che invece trovo nel CSS.


Ora provo ad inserire un comando tipo left:10%; e vediamo se esplode tutto!

[Cereal___killer]

No, direi che quello che è da cambiare è l'ID main (#main);
Ha impostato un width di 640px, che invece metterei a 850px, in modo che raggiunga la larghezza del menu;
dopodiché ti basta aggiustare il margin-left che trovi più sotto per centrarlo bene...


La classe leading-0, non esiste nel template; infatti se selezioni quel div, nella colonna di destra vedi solo classi ereditate; è dovuto al fatto che probabilmente mentre programmavano il template, hanno pensato che potesse essere utile una classe assegnata a questo div, ma poi non l'hanno utilizzata... Ci possono essere classi assegnate ad ogni elemento, se poi non vengono richiamate da un CSS, vengono semplicemente ignorate. Tuttavia non è bene piazzare classi inutili in ogni dove perché rallenta la composizione della pagina...


P.s.: mettere left:10% non sortisce alcun effetto se prima non è stato definito un position (relative o absolute), provare per credere Su google trovi tutte le spiegazioni sugli attributi CSS che vuoi

[Blodoks]

Perfetto, sono riuscito a cambiare!


Credo mi documenterò un po' meglio su questo argomento, il problema è che oltre ad avere conoscenze scarse in materia, il CSS è davvero un caos totale e mi riesce ancora più difficile trovare qualcosa e capire cosa sto leggendo!


Grazie mille dell'aiuto!!