Supponiamo di voler associare un titolo o una descrizione ad un’immagine. Questa mini guida spiega come, tramite i posizionamenti, è possibile allegare del testo ad una immagine.

La soluzione proposta è cross-browser è perfettamente in linea con gli standard attuali…
continua a leggere…

I menu sono da sempre parte integrante e fondamentale delle pagine web. Con il passare degli anni e grazie alle moderne tecniche CSS e Javascript si è assistito ad un radicale cambiamento di questo componente verso una forma sempre più dinamica e flessibile.

In questo post ti spiego una tecnica molto semplice per realizzare un menu dropdown a tre livelli (ma potrebbero essere a due o più) con il solo uso dei fogli di stile CSS.

I menu a tendina (dropdown menu) imitano in un certo senso il comportamento del tag select (quello che viene spesso usato per inserire la nazione in una form).

Passiamo al codice…

continua a leggere…

Tempo fa avevo scritto di come organizzare al meglio un foglio di stile CSS. Il primo punto da seguire riguardava il reset degli elementi più importanti.

I browser, di default attribuiscono valori diversi ad alcune proprietà come margin e padding.

Questi valori di partenza comportano visualizzazioni differenti in relazione al browser che stiamo utilizzando.

Proprio per questo è consigliabile azzerare tutto tramite i css…

continua a leggere…

Webquadro è nato per condividere la mia esperienza. Oggi però sono io che chiedo aiuto a tutti voi!

In rete non ho trovato la soluzione al mio problema, quindi pubblico questo post nella speranza di avere delle risposte attraverso i commenti.

Problema

L’intento è quello di realizzare un layout liquido composto da div della stessa larghezza ma con diverse altezze. ..

Con la proprietà Float e l’attributo left per div con uguale altezza si ottiene qualcosa del genere:

Se invece l’altezza dei div varia in base al contenuto si creano degli spazi verticali…

continua a leggere…

Ti ho già parlato di come scrivere meglio i CSS e anche della lora formattazione. Oggi ti presento un ottimo tool completamente gratuito che ti permette di ottimizzare ulteriormente il tuo codice.

Styleneat è un web app che permette di ottimizzare i fogli di stile.  Farla funzionare è facilissimo. Puoi inserire il codice nella form presente nell’homepage  o fare l’upload del file css dal secondo tab. Il risultato è sotto i tuoi occhi:

In un attimo il tuo foglio sarà indentato e ottimizzato pronto per essere pubblicato. Molto comoda è la funzione che permette di ordinare alfabeticamente le classi ma anche quella che decide se la formattazione deve essere mono o multiriga.

Consigliatissimo!

Prendo spunto da questo ottimo articolo di NetTuts per darti qualche altro consiglio su come impostare al meglio i CSS.

Nel primo post spiegavo qual’era la formattazione migliore per un CSS per quanto concerne la mia esperienza. In questo nuovo post oltre ad aggiungere alcune dimenticanze segnalo qualche buon consiglio per ottimizzare il flusso di lavoro

continua a leggere…

I fogli di stile contengono le regole che definiscono la rappresentazione dei documenti html e xhtml e sono contenute nelle direttive del W3C.

All’interno di un foglio di stile le regole CSS sono così strutturate:

selettore {
proprietà1 : valore1;
proprietà2 : valore2, valore3;
}

Vediamo come è possibile organizzare al meglio un foglio di stile.

continua a leggere…

I fogli di stile (Cascading Style Sheets) hanno rivoluzionato la gestione dei layout e dello sviluppo web. Ad oggi sono in vigore le specifiche 2.1 ma il W3c ha gia ampiamente trattato i futuri sviluppi che permetterà la terza release dei CSS.

Uno dei maggiori problemi che affligge il web designer è la creazione di angoli arrotondati. Questa tecnica se usata sapientemente dona al nostro sito un aspetto gradevole e moderno.

Vediamo insieme come negli anni si è evoluto il concetto di rounded corners…
continua a leggere…