Personalizzare il proprio menu

[Raifans]

Osservate il menu principale del mio sito:
http://www.raifans.altervista.org/

Ho realizzato una linea per separare una voce dall'altra, ma ora mi trovo che alla destra di CONTATTI c'è una linea che non vorrei che ci fosse...

E' normale perchè ho inserito il codice border-right:1px solid #5f7c55;
Ho inserito questo codice proprio per realizzare il separatore, ma non mi soddisfa poichè alla fine di Contatti mi resta la linea, ci sono altre alternative?

Grazie in anticipo!

[Rasjah]

per iniziare si potrebbe togliere quel codice border-right:1px solid #5f7c55; che è su tutti i selettori " li " E poi mettere i bordi laterali dove vuoi, visto che hai quattro elementi / pulsanti con quattro nomi diversi

li-item154 quello dei " Contatti "
li-item153 quello delle " Promozioni "
li-item106 quello della " Farmacia "
li-item105 quello dei " Prodotti "

se questi selettori non sono presenti nel tuo file template.css gli aggiungi e gli dai le dichiarazioni ( in questo caso border ) che vuoi

[Raifans]

Precisamente cosa devo inserire nel template.css?

[Rasjah]

prova così

Codice: [Seleziona]



li-item153 {
  border-right:1px solid #5f7c55;
  border-left:1px solid #5f7c55;
}


li-item106 {
  border-right:1px solid #5f7c55;
  border-left:1px solid #5f7c55;
}



[Raifans]

Non funge!

[Rasjah]

così

Codice: [Seleziona]



li-item153 {
  border-right:1px solid #5f7c55 ! important;
  border-left:1px solid #5f7c55 ! important;
}


li-item106 {
  border-right:1px solid #5f7c55 ! important;
  border-left:1px solid #5f7c55! important;
}



[Raifans]

Dispiace smentirti ma ancora niente 

[Rasjah]

hai ragione, sono proprio sbadato

Codice: [Seleziona]


li.item-153 {    border-left: 1px solid #5F7C55;    border-right: 1px solid #5F7C55;}
li.item-106 {    border-left: 1px solid #5F7C55;    border-right: 1px solid #5F7C55;}



ho scritto male i selettori all'inizio sorry

[Raifans]

Perfetto risolto... Grazie mille!

[Raifans]

Ma sul selettore li.item-153 il numero "153" varia a secondo della voce del menu? Dove posso trovare questo numero?

[Raifans]

@Rasjah gentilmente potresti rispondermi?

[Rasjah]

1- Ma non avevi [RISOLTO]

2- Non per essere maleducato, ma se x il link al sito bisogna mettere user e password xchè è in manutenzione........

[Raifans]

Scusami ma si ripresentato lo stesso problema ma con menu diversi quindi non so se l'item (numero) è lo stesso di prima... comunque ora il sito è aperto Grazie ancora

[Rasjah]

Ma mi sembrava un sito di una farmacia, e non quello delle foto segnaletiche della polizia...    e comunque quell'item che dici tu.. dov è ?? cos'è ??

[Raifans]

Ahahaha nono quello della farmacia è finito! Ora sto cercando di realizzare un blog.. Sempre al link http://www.raifans.altervista.org/ vorrei modificare le singole voci del menu presente nella sidebar di sinistra... Questa volta, però voglio inserire delle icone al fianco della voce menu. Ma quello che mi chiedo e se il codice:

li.item-153 { background: url(../images/nav-sprite@2x.png) no-repeat; background-size: 49px 18px;}

funziona? Ora è cambiato il nome della voce menu quindi non so se il numero "153" presente nel codice cambi o meno.. o spiegami a cosa serva quel numero "153"

[Rasjah]

Vai nel backend. selezioni la singola voce del menu e la apri. Sulla destra apri " Opzioni tipo link ", tasto "immagine menu", si apre la finestra della directory delle immagini e li scegli quella che vuoi. Ovviamente le immagini devono prima  essere caricate sempre nel backend , nelle parte "Gestione media "...


Poi non so dove sia quel 153.... tutte le voci del menu hanno l'item 4.... qualcosa. Chiaramente deve essere univoco per ogni voce altrimenti si incasina su tutto con le istruzioni css

[Raifans]

Forse non mi sono spiegato bene. Io voglio che l'icona compare al fianco del titolo del menu (tipo work, about, contact). Poi vorrei essere spiegato una cosa:

li-item153 {
  border-right:1px solid #5f7c55;
  border-left:1px solid #5f7c55;
}


li-item106 {
  border-right:1px solid #5f7c55;
  border-left:1px solid #5f7c55;
}

Perchè scrivo prima li-item153 e poi li-item106? (perchè cambia il numero? da 153 a 106?) @Rasjah

[Rasjah]

Se vuoi essere spiegato leggi il mio ultimo post 

[Raifans]

Se vuoi essere spiegato leggi il mio ultimo post 

Quale?

[BelinBelan]

Questo:


http://forum.joomla.it/index.php/topic,239781.msg1115813.html#msg1115813 ?

[Raifans]

Questo:


http://forum.joomla.it/index.php/topic,239781.msg1115813.html#msg1115813 ?

Ma questo non vale solo per le singoli voci del menu? Io voglio che l'icona sia messa al fianco del titolo del menu (tipo WORK, ABOUT, CONTACT guardando il sito www.raifans.altervista.org) Grazie ancora

[Rasjah]

dovrebbe bastare l'istruzione css

background-image: url(nome_dell'immagine_che_vuoi_usare.jpg) no-repeat;

applicato al selettore h3 ( che riguarda il titolo ), il problema è che deve dare una denominazione diversa per ogni voce ... perchè tutte sono dei titoli h3. Quindi devi dare delle classi differenti per ogni voce ( es. h3 .work ) e poi ad ognuna metti l'immagine/icona, con l'istruzione  che ti ho detto prima...

oppure

inserisci delle immagini/icone con dei moduli "HTML personalizzato ", poi li posizioni dove vuoi sulla pagina


vedi tu

[56francesco]

dovrebbe bastare l'istruzione

magari.....

[Raifans]

magari.....

Secondo te come dovrei risolvere?

[Raifans]

Nessuno puoi aiutarmi?

[sono bella e bionda]

Bellino lo ha fatto, concentrati sugli item e lavora di css.

[Raifans]

dovrebbe bastare l'istruzione css

background-image: url(nome_dell'immagine_che_vuoi_usare.jpg) no-repeat;

applicato al selettore h3 ( che riguarda il titolo ), il problema è che deve dare una denominazione diversa per ogni voce ... perchè tutte sono dei titoli h3. Quindi devi dare delle classi differenti per ogni voce ( es. h3 .work ) e poi ad ognuna metti l'immagine/icona, con l'istruzione  che ti ho detto prima...

oppure

inserisci delle immagini/icone con dei moduli "HTML personalizzato ", poi li posizioni dove vuoi sulla pagina


vedi tu

Se provo così?

Codice: [Seleziona]

.social {    width: 120px;    margin: 0 auto;         a {            float: left;            width: 25px;            height: 25px;            margin: 0 $margin/5;            background: url(../images/social-sprite.png) no-repeat;            text-indent: -9999px;             @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) {                background: url(../images/social-sprite@2x.png) no-repeat;                background-size: 101px 51px;            }             &.dribbble {                background-position: 0px 0px;                 &:hover {                    background-position: 0px -25px;                }             }             &.twitter {                background-position: -25px 0px;                 &:hover {                    background-position: -25px -25px;                }            }             &.facebook {                background-position: -50px 0px;                 &:hover {                    background-position: -50px -25px;                }            }             &.googleplus {                background-position: -75px 0px;                 &:hover {                    background-position: -75px -25px;                }            }         }}