• Bannato User Attivo

    [Risolto] Nei menù... Id o Class?

    Ciao...
    ho deciso di scrivere prima di mettermi a fare caos con il mio codice. Ehehehe

    Il quesito che mi sono posto è:

    Avendo due menù laterali, nei quali le celle presenti hanno la struttura praticamente identica (intestazione, corpo centrale e base)...
    Ora avendo 4 celle ripeture in ciascun menù, usando i Css in particolare definendo le proprietà delle celle usando l'ID del menù, ho dovuto ripetere 4 volte per il menù di sinistra e 4 per quello di destra, le dichiarazioni nei file CSS.
    Oggi mi sono chiesto:

    Se invece di ripeterlo 4 volte, cosa obbligatoria visto che l'ID deve avere come proprietà primaria l'unicità nella struttura della pagina, lo ripeto una volta, usando però la class... fa lo stesso? Intendo, il codice è comunque corretto come viene sfruttato?
    Adottando l'uso della class per i menù risparmierei qualche Kb che magari ad un utente con ADSL non cambia nulla, ma su internet ci sono ancora utenti che nel loro paese o città non hanno una copertura adsl o comunque migliore di una dial up e pensando a loro vorrei rendere il sito un poco più leggero...

    Qualcuno sa aiutarmi?
    Grazie mille a tutti! 🙂

    PortaBile84 😄


  • User Attivo

    Sai, non credo cambi molto a livello di banda cambiare l'id o la class dei menu.
    Cambierebbe se rinomini per ogni menu o voce di menu i seguenti dati a seconda dei link che voirresti inserire, anche per una questione di semplicità e facilità:


    ID1 = menu-top
    ID2 = menu-right
    ID3 = menu-footer
    ID4 = menu-left


    Ovviamente inserisci l'ID nel tuo template per ogni barra corrispondente.
    Facci sapere.

    Adriano


  • Bannato User Attivo

    Ti spiego..

    Nella cella di sinistra, puoi vedere accedendo al sito del mio profilo (parlo del CMS che ho fatto...)

    Ho 4 celle dove sono presenti dei contenuti...
    Queste cenne sono formate da un div principale che poi ho suddiviso con 3 div (una intestazione che ha il titolo della cella, il corpo centrale, e la base della cella. In tutte le 4 celle principale, il corpo centrale ha una altezza automatica).

    Ora questo è in sisntesi

    IdCella1

    • IdIntestazioneCella1

    • IdCentroCella1

    • IdBaseCella1
      IdCella2

    • IdIntestazioneCella2

    • IdCentroCella2

    • IdBaseCella2
      IdCella3

    • IdIntestazioneCella3

    • IdCentroCella3

    • IdBaseCella3
      IdCella4

    • IdIntestazioneCella4

    • IdCentroCella4

    • IdBaseCella4Ora l'Id è ovviamente unico, potrei usare lo stesso, ma poi va a quel paese la validazione del codice che ora tanto mi sta a cuore 😄 :yuppi:

    Usando però i 4 Id unici, il codice css che definisce lo stile di ogni Id è sempre lo stesso. Stessa immagine di sfondo, stesso altezza, stessa posizione... L'unica cosa che cambia è il font o altro se trattasi di cella con link.

    Ora se io uso i Class, definendone uno solo per le sottocelle di ogni cella principale. Potrei fare una cosa così?

    IdCella1

    • ClassIntestazioneCella

    • classCentroCella

    • classBaseCella
      IdCella2

    • ClassIntestazioneCella

    • classCentroCella

    • classBaseCella
      IdCella3

    • ClassIntestazioneCella

    • classCentroCella

    • classBaseCella
      IdCella4

    • ClassIntestazioneCella

    • classCentroCella

    • classBaseCella e stessa cosa per le celle del menù di destra?


  • Super User

    Esatto l'uso di id o class non influisce sulla banda. L'uso si differisce sulla comodità e dalla pulizia del codice.
    Definire più id con proprietà identiche è inutile e anche scorretto da un punto di vista di logica quindi puoi unire tutto in una sola e unica class.

    Spesso io uso id e classi insieme per attribuire ad un oggetto una proprietà generica e aggiungerne una univoca per lui in particolare.

    L'esempio potrebbe essere quello di un menù:
    [html]
    <ul>
    <li class="item" id="attuale"><a href="index.html" title="Vai all'home page">Home</a></li>
    <li class="item"><a href="chisiamo.html" title="Scopri chi siamo">chi siamo</a>
    <li class="item"><a href="prodotti.html" title="I nostri servizi">prodotti</a>
    </ul>
    [/html]css
    [html]
    .item{
    float:left;
    color:#333;
    background-color:#FFF;
    }

    #actual{
    color:#FFFFFF;
    background-color:#000000;
    font-weight: bold
    }

    [/html]Puoi attuare una cosa simile anche tu. Usare invece tanti id con proprietà identiche aumenta i kb del foglio di stile poichè ovviamente aumentano le righe di codice mentre una sola classe ten e fa risparmiare altrettanto.

    Se gli id che hai citato nell'ultimo esempio godono delle solite proprietà , bè allora univoca tutto in una sola classe e aggiungicene altre 3 tipo così:

    class contentTable //sarà il nostro genitore delle tre tabelle
    class tableLeft //zona sinistra
    class tableCenter //zona centrale
    class tableRight //zona destra


  • Bannato User Attivo

    Si si grazie allora.
    Appena avrò terminato delle cosucce lo farò 😄

    Il codice diciamo che lo ho già pronto, solo non sapevo se era corretto usare questo metodo... 🙂

    Grazie ancora a tutti e due.
    Gentilissimi 😉


  • Super User

    Non c'è di che :yuppi:


  • Bannato User Attivo

    Ottimo 😉
    Modifica eseguita... Tutto perfettamente funzionante e codice sempre validato 😄
    Ora dovrò dedicarmi solo alla validazione delle sezioni più delicate che hanno il contenuto dinamico.

    Ancora grazie mille a chi mi ha aiutato!