• User Attivo

    Un momento, forse non ho capito bene. Stai pensando di creare una pagina CSS per ogni pagina del tuo sito? Non che ci sia qualcosa di male per carità, però va un po' fuori dal concetto con cui è stato concepito questo linguaggio (CSS). Se vuoi il mio consiglio, non utilizzare più di 5 o 6 fogli di stile, includendo eventualmente anche quelli per dispositivi mobili. Così facendo alleggerirai il template (anche a questo serve il CSS) e sarai più ordinato!
    Potresti per esempio creare il foglio di stile generico per il layout (style.css), quello per la Home Page (homepage.css), e quello per sidebars o blocchi "extra" (più, come detto prima, eventualmente un css dedicato a chi naviga sul sito da un dispositivo mobile). Non so di che sito si tratta, ma in genere l'accessibilità, l'ordine del markup e un minimo di coerenza di stile fra le pagine ci dev'essere dappertutto.

    La risposta in breve è: non appesantisci il sito includendo più file css (ok, magari se ne includi 100 e più si) ma alla lunga troppi file css (oltre a non essere necessari) creano caos per chi ci lavora.


  • User Newbie

    Grazie per le risposte ragazzi! Allora sul fatto di creare un foglio di stile generico per il template (header, contenitore e footer) ci sto.
    Poi in home dovrei inserire una slide in javascript, più tre colonnine sotto tipo "Ultimi progetti". Per quanto riguarda le altre pagine che saranno chi siamo, servizi portfolio e contatti.. si avranno impostazioni diverse all'interno del div contenitore.. soprattuto la categoria portfolio.. dove ci sarà un sotto menu per selezionare il tipo di lavori da visualizzare.. quindi del tipo "Tutto, Loghi, stampa, Web". Inoltre se si clicca sulla miniatura del lavoro si apre una pagina con la scheda del lavoro con tutte le info utili.
    Quindi facendo un piccolo elenco.. saranno... stile.css (generico) poi altri del tipo "home.css" "servizi.css" portfolio.css" "pagina interna per la scheda del lavoro.css" "contatti.css" ..... dovrei trovarmi così alla fine di tutto.

    Cosa ne pensate?

    Alex


  • User

    Da come dici sembrerebbero piccole modifiche, a questo punto lo farei tutto in uno strutturando all'inizio lo stile generale, poi tutti gli altri codici.
    Meglio ancora farei: stile.css (generale) e contenuti.css (con tutto quello che hai detto prima tu) ovviamente devi stare attento alla voce dei richiami ID e/o CLASS.


  • User Newbie

    Giusto!! potrei accorpare tutto in contenuti... ma l'ho già detto nel messaggio iniziale che sono giorni di totale blackout, vero???
    mi spiegheresti solo bene come poter utilizzare Class nel modo corretto?
    Ti ringrazio!!
    Alex


  • User

    Questo è un esempio con il class:

    p.primo{ color: blue; } 
    p.secondo{ color: red; }
    

    [HTML]<p>Paragrafo Normale</p>
    <p class="primo">Paragrafo che prende dal CSS il codice p.primo</p>
    <p class="secondo">Paragrafo che prende dal CSS il codice p.secondo</p>[/HTML]

    Questo è un esempio con ID:

    div#primo{ color: blue; } 
    div#secondo{ color: red; }
    

    [HTML]<p>Paragrafo Normale</p>
    <div id="primo">Paragrafo che prende dal CSS il codice div#primo</div>
    <div id="secondo">Paragrafo che prende dal CSS il codice div#secondo</div>[/HTML]
    Tutto questo vale sia per la class, sia per gli ID ad eccezzione del codice iniziale di richiamo.
    Per ID nel CSS devi mettere il codice #primo; invece per la class devi usare .primo con l'aggiunta del tag in questo caso P (1 esempio) e DIV (2 esempio).

    Comunque ti consiglio di fare una ricerca in internet su come funzionano, è molto ben spiegato e facile, basta ovviamente prenderci l'abitudine 😉


  • User Newbie

    Grazie!! Quindi potrei creare un div tipo dove metto la mianiatura e la classe hover per far si che quando ci passo il mouse abbia un effetto diverso.. quindi il div sarà ripetuto nell'html per creare tipo griglia di lavori eseguiti e avranno tutti le stesse impostazioni sia di id che di class.. giusto? L'unica cosa, se imposto tutte le miniature con id e class uguali.. come faccio ad allinearli in orizzontale e in verticale tipo griglia?


  • User Attivo

    Ogni miniatura può avere la sua id o class (di solito una class si usa quando si usa più volte e un id quando lo si usa una sola volta, esempio: id #contenitore class .allineato-a-sinistra) e comunque è tutto fattibile con i margini e i float.
    Comunque i files CSS si possono ordinare anche così (come faccio io):

    
    /* Generale-------------------------------------------------------------------------------*/
    
    
    body {
        background: #fff;
        font: 14px;
    }
    
    
    
    /* Links
    -------------------------------------------------------------------------------*/
    
    
    a {color: #03f;}
    
    
    a:hover {color: #69f;}
    
    
    a:link {-webkit-tap-highlight-color: #fcd700;}
    
    
    /* Homepage
    -------------------------------------------------------------------------------*/
    
    ................
    
    /* Chi siamo
    -------------------------------------------------------------------------------*/
    
    ....................
    
     
    

  • User Newbie

    anche io metto gli elementi in ordine nel css 🙂 mi da fastidio vedere le cose storte 🙂

    Proverò con i metodi che mi avete detto! Grazie a tutti per i chiarimenti! 🙂

    Alex


  • User

    Ti faccio un esempio su quello che ho capito:
    Codice HTML:
    [HTML]<link rel="stylesheet" href="codice.css" type="text/css" />
    <div id="contenuto">
    <div class="left">1</div>
    <div class="center">2</div>
    <div class="right">3</div>
    </div>[/HTML]
    Codice CSS:

    div#contenuto{ width:100%; position:relative;}
    div.left,div.right,div.center{width:32%;position:absolute;text-align:center;}
    
    div.left {top:0;left:0;background-color:#ff0000;}
    div.center {top:0;left:33%;background-color:#ff0000;}
    div.right {top:0;left:66%;background-color:#ff0000;}
    

    Prova a fare una prova e dimmi se intendevi così.


  • User Attivo

    Non c'è di che e se hai altre domande non esitare :sun:


  • User Newbie

    si esatto.. però hai usato la percentuale, invece per la larghezza fissa? ho impostato il template a 960px di larghezza.

    aspetta ti faccio vedere il link: aaronrudd.co.uk/our-work
    vorrei creare una cosa del genere...

    Alex


  • User

    Il link che hai inserito non funziona, per il discorso della larghezza io ho fatto una cosa test... Ovviamente se metti a larghezza fissa, devi modificare gli altri valori, sennò non torna la visualizzazione.

    EDIT: ho trovato il link funzionante, il codice che ti ho dato ha la stessa funzione, devi inserire l'immagine e la scritta sotto ed il gioco è fatto. poi perché si illumino quando passi con il mause esiste un codice da inserire nel collegamento 😉


  • User Newbie

    grazie allora prendo il codice che mi hai scritto e parto da quello 🙂

    Thanks!