Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    260

    Background dei <li> di un menu <ul> tramite una classe

    Salve a tutti,
    sto creando un progetto per un esame universitario e dovrei creare una classe .paginaCorrente che abbia al suo interno un background. Questa classe poi deve essere applicata al[*] della pagina su cui sono posizionato. Mi spiego meglio
    Se ad esempio sono sulla Home Page allora questa classe deve essere applicata soltanto al[*] che rappresenta la Home Page. Ho scritto il seguente codice ma non mi prende la classe sul[*]

    codice:
    HTML
    <li class="paginaCorrente">Home Page[*]Servizi
    ...
    codice:
    CSS
    .paginaCorrente{background-color:#000;}
    Sui li le classi non funzionano?

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    probabilmente c'è interferenza di qualche altra impostazione, altrimenti dovrebbe funzionare (verifica di non avere impostato nel css le caratteristiche delle voci elenco dopo la tua classe: ciò che è dopo sovrascrive ciò che è prima e pure le impostazione dei link)

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    260
    Ho trovato il problema.
    Nel foglio di stile ho già il background impostato per le etichette dei menu, soltanto che anche spostando la classe al di sotto delle dichiarazioni cmq non me la vede. L'unica soluzione è usare lo style in linea nel codice html, ma mi scoccia perchè se poi volessi cambiare il colore dovrei farlo pagina per pagina.

    Cmq questo è il codice CSS
    codice:
    #menu li{float:left;  background-color:rgba(0,0,0,0.2); margin-left:30px; width:100px; text-align:center; border-radius:1em;}
    
    #menu li:hover{cursor:pointer; background-color:rgba(0,0,0,0.4);}
    
    .paginaCorrente{background-color:#999;}
    E questo l'HTML
    codice:
    <li class="paginaCorrente">Home Page[*]Tour virtuale[*]Prenotazioni[*]Guestbook[*]Contatti
    Se tolgo il backgrond dal #menu li allora mi vede la classe altrimenti se lo lascio la classe non la vede, non la vedo una cosa normale comunque!

  4. #4
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    inseriscilo come

    codice:
    #menu li.paginaCorrente
    dopo #menu li

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    260
    Cavoli funziona!!!! Grazie mille

    Come mai se invece lo inserivo soltanto come classe e gli davo il nome della classe nel codice HTML non me la vedeva mentre così si?

  6. #6
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    perché stai precisando che tutte le voci elenco figlie di un elemento #menu debbano avere una certa formattazione e quella prevale sulla classe che non è impostata alla stessa maniera. Utilizzando un selettore discendente anche in quel caso non c'è più possibilità di equivoco

  7. #7
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    260
    Quindi quando devo applicare una classe legata ad un evento o alle voci figlie di uno o più elementi conviene creare una classe discendente (come nel mio caso per esempio il fatto che il bottone del menu relativo alla pagina in cui sono al momento assume un colore diverso rispetto al resto dei bottoni dei menu) conviene fare come mi hai detto tu e non creando una classe generica e applicandola al tag a cui mi serve!

    Quindi la classe "generica" (indico con generica come l'avevo scvritta io e cioè .miaClasse) non prevale su tutte le formattazioni che si fanno?
    Mentre una classe scritta in questo modo #elemento.miaClasse prevale su tutti gli id elemento?

    Beh mi sa che devo studiare un po' meglio le priorità dei CSS!

  8. #8
    capire e calcolare la "cascata" e la priorità è molto importante quando si usano i CSS
    leggi bene gli esempi di questa lezione:
    http://www.w3.org/wiki/CSS/Training/...el_of_selector
    la raccomandazione completa del W3C la trovi qui:
    http://www.w3.org/TR/selectors/
    e se poi vuoi dare uno sguardo ad un futuro ancora incerto, eccoti la bozza di discussione fresca fresca:
    http://dev.w3.org/csswg/selectors4/

    lo so che spesso sono teatrale, ma non posso farci niente

  9. #9
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    260
    Grazie mille per la segnalazione delle pagine

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.