Autore Topic: [RISOLTO] Allineare a sinistra o centrare Menu principale Shaper Helix 3  (Letto 1719 volte)

Offline adm3004

  • Esploratore
  • **
  • Post: 77
  • Sesso: Maschio
    • Mostra profilo
Salve a tutti,
sto cercando da un po' di ore di allineare a sinistra o centrare il div (credo sia questo il nome) del menu principale creato dal template Shaper Helix 3, modificando il file custom.css dello stesso template. Il sito è www.quattrotorri.it.
Purtroppo il menu rimane sempre allineato a destra e non riesco ad allineare a sinistra o a centrarlo: ho provato di tutto, float, margin, position:relative, ecc. ecc. ma sicuramente c'è qualcosa che mi sfugge.
Chiedo gentilmente un aiuto perché ho provato anche con guide e forum vari ma non riesco a trovare una soluzione.
Grazie in anticipo.
Alessio
« Ultima modifica: 28 Giu 2019, 15:52:15 da adm3004 »
-------------------------------------------------------
Coelum, non animum, mutant qui trans mare currunt.

Offline $Red

  • Moderator
  • Instancabile
  • *****
  • Post: 5279
  • "Bastard Inside"
    • Mostra profilo
Re:Allineare a sinistra o centrare Menu principale Shaper Helix 3
« Risposta #1 il: 24 Giu 2019, 18:18:59 »
Ciao, non uso helix da un bel pò comune la regola è questa
Codice: [Seleziona]
.sp-megamenu-parent {
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 99;
    display: block;
    float: right;
    position: relative;
    align-content: center;
}
se annulli il float: right; il menu si allinea a sinistra

Offline Limma

  • Abituale
  • ****
  • Post: 1209
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare a sinistra o centrare Menu principale Shaper Helix 3
« Risposta #2 il: 24 Giu 2019, 22:10:04 »
Giusto una piccola chiosa all'intervento di $Red.
La regola css del tuo menu (o meglio una delle regole, ma in questo caso quella che serve al tuo scopo) è:
Codice: [Seleziona]
.sp-megamenu-parent {
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 99;
    display: block;
    float: right;
    position: relative;
}
Come già detto da $Red se elimini il "float: right;" il menu si allinea a sinistra, e stesso risultato avrai se sostituisci "right" con "left".
Detto questo, se vuoi invece centrare il menu puoi provare mettendo il valore "unset" (anche "none" dovrebbe funzionare...) su "float" e inserendo "text-align: center;". Nel caso provassi a centrare il menu fai sapere se funziona o meno...

Offline adm3004

  • Esploratore
  • **
  • Post: 77
  • Sesso: Maschio
    • Mostra profilo
Perfetto, grazie mille, funziona alla perfezione. Ho provato a mettere float:left e si allinea a sinistra, float:right e va a destra e a centrare mettendo float:unset e text-align:center e funziona tutto come previsto. Grazie ancora!
Approfitto del topic per farvi tre domande collegate a questo:
1) come si capisce che l'"oggetto" della programmazione è .sp-megamenu-parent? Utilizzando gli strumenti di analisi pagina forniti da Mozilla a me risulta #sp-menu, cosa sbaglio?
2) come mai servono tutte queste righe di comando? Cioé, come mai non basta text-align:center per centrare o float:left per allineare a sinistra?
3) cosa fa z-index:99, collegato agli altri comandi?
Credo che queste domande siano utili ad altri neofiti, perché ho provato a utilizzare questi comandi grazie alle guide online che le descrivono (float, padding, tex-align, ecc.) ma non mi sembra che sia così intuitivo come potrebbe essere.
Grazie ancora.
Alessio
« Ultima modifica: 03 Lug 2019, 15:48:45 da adm3004 »
-------------------------------------------------------
Coelum, non animum, mutant qui trans mare currunt.

Offline $Red

  • Moderator
  • Instancabile
  • *****
  • Post: 5279
  • "Bastard Inside"
    • Mostra profilo
riCiao  :)
1) molto probabilmente hai provato poco, anche io uso "analizza elemento" di FF e dopo un paio di tentativi ho trovato la regola
2)i cms come joomla sono in php, css, ecc..., tutto diviso in DIV e non solo, ma io ci capisco poco di queste, ad esempio un text-align potrebbe essere efficace ma non "corretto" perchè lo usi per allineare qualcosa che non è testo
3) z- index, se ricordo bene, serve per ridurre spazio tra gli elementi, io l'ho sempre usato per questo, anche se in realtà li sovrappone, ma è facile che sto dicendo una fesseria ti rimando a questo sito per capirne un pò il funzionamento https://www.w3schools.com/cssref/pr_pos_z-index.asp

Offline danielecr

  • Abituale
  • ****
  • Post: 1357
    • Mostra profilo
z- index, se ricordo bene, serve per ridurre spazio tra gli elementi
ciao  :D
 z-index è un indice per definire "quale elemento va sopra un altro elemento": un elemento con z-index maggiore sarà sovrapposto sopra ad un altro elemento con z-index minore.

Offline adm3004

  • Esploratore
  • **
  • Post: 77
  • Sesso: Maschio
    • Mostra profilo
Ok, grazie a tutti nuovamente.
Alessio
-------------------------------------------------------
Coelum, non animum, mutant qui trans mare currunt.

 

Host

Torna su