Links con differenti larghezze e colori

di il
3 risposte

Links con differenti larghezze e colori

Salve a tutti, 

sarei interessato a capire quale è la migliore soluzione per creare dei link con differenti larghezze e colori come da screenshot in allegato

ho creato le ul li a  e adesso hanno la stessa larghezza con un unico fondo verde, vorrei trasformarli  (come in allegato)

con Nth child? o ce un altra soluzione?

Grazie mille ragazzi e buona giornata

3 Risposte

  • Re: Links con differenti larghezze e colori

    Ciao. Il tag <ul> non è adatto per fare quello che dici. Puoi usare una div per ciascuna voce e posizionarla/colorarla/dimensionarla impostando opportunamente lo stile.

  • Re: Links con differenti larghezze e colori

    29/03/2023 - grumpy ha scritto:


    Il tag <ul> non è adatto per fare quello che dici. Puoi usare una div per ciascuna voce e posizionarla/colorarla/dimensionarla impostando opportunamente lo stile.

    Il tag <ul> è perfettamente adatto se si tratta di “confezionare” una lista di link, ed è abitualmente usato all'interno dell'elemento <nav> proprio a questo scopo (vedi la documentazione MDN, ad esempio).

    Il fatto che sia mostrato come una lista non ordinata usando i punti è irrilevante: tramite CSS, si può completamente trasformare in una rappresentazione completamente diversa.

    25/03/2023 - Skizzo-1980 ha scritto:


    con Nth child? o ce un altra soluzione?

    Ecco, quello che invece io NON farei è lambiccarmi alla ricerca di un modo per rendere progressivamente più “stretti” i box dei link: banalmente, ne prevederei un numero limitato e creerei delle classi in modo da identificare ciascuno di essi, usando una classe comune a tutti per le caratteristiche condivise, e una classe specifica per le caratteristiche proprie di ciascun link. Se invece è possibile usare la posizione nel DOM, l'adozione dell'nth-child (al posto delle classi, per identificare la voce di menu 1, 2, 3 e così via) credo possa andare benissimo.

    Ciao! :)

  • Re: Links con differenti larghezze e colori

    Grazie mille a tutti…. perfetto,  chiaro :)

Devi accedere o registrarti per scrivere nel forum
3 risposte