Questo calendario mensile creato usando solo proprietà css visualizza i giorni del mese (marzo in questo esempio) classificati da domenica a sabato con il relativo evento visibile sullo suo stato hover.
1. La struttura html per creare il calendario css
La sua struttura html di base consista di un div contenitore principale con un id unico (<div id="calendario_css">) con al suo interno tutti gli elementi che compongono il calendario css.
In ordine:
- un immagine decorativa di testata
Esempio: <img src="calendario_bg.jpg" alt="" />
- un titolo con il nome del mese e l’anno
Esempio: <h1>MARZO 2009</h1>
- un secondo div come contenitore dei giorni del mese con un nome identificativo unico ‘mese’
Esempio: <div id="mese">
- un secondo titolo ‘Eventi’
Esempio: <h2>Eventi:</h2>
- un paragrafo introduttivo visibile in aperture del calendario, sopra quale sarà posizionato l’evento del giorno
Esempio: <p>paragrafo introduttivo</p>
Continua a leggere >>
css calendario,
css float,
css link,
CSS Menu,
CSS Tutorials
La proprietà css float con i suoi valori left e right permette di spostare elementi verso la sinistra o la destra utile per esempio nella creazione di una struttura d’una pagina, di menu orizzontale, aggiungere testo attorno immagine… Mentre la proprietà css clear con i suoi valori left, right, both permette di evitare che un elemento floatato si sposta accanto un altro elemento di blocco.
Di seguito, le caratteristiche di entrambi proprietà float e clear con esempi concreti del loro uso.
Continua a leggere >>
css,
css clear,
css clear both,
css clear left,
css clear right,
css float,
css float left,
css float right
Il contenuto di una pagina è piazzato dentro ’scatole’ chiamate in inglese ‘boxes’.
Queste scatole possono a loro torno contenere altre ‘boxes’ che siano elementi di blocco o online.
Questi blocchi altro il contenuto stesso possono essere costituiti di margine (margin), spazi cuscinetti (padding) e bordi (border) gestiti dalle seguente regole css:
- margin: il spazio trasparente tra il box e altri box in unità di misura o percentuale
- padding: il spazio tra il contenuto e il bordo del box in unità di misura o percentuale
- border: il bordo decorativo attorno il box in unità di misura o percentuale
NB: margin, padding e border possono essere specificate individualmente a destra, sinistra, inferiore e superiore con l’aggiunto di right, left, top o bottom (es: margin-top, padding-left, border-bottom…)
Il contenuto stesso può avere una larghezza e/o altezza specifica con:
- width: la larghezza in unità di misura (fisso) o percentuale (fluido)
- height: l’altezza in unità di misura (fisso) o percentuale (fluido)
Il nostro box può finalmente avere uno sfondo decorativo con la proprietà css background.
Il tutto insieme costituisce il ‘box model’ come rappresentato di seguito:
Continua a leggere >>
Css box model,
css esempi,
css float,
css layout,
css margin,
css padding
- Layout a 2 colonne
- Colonna sinistra a misura fissa
- Colonna destra fluida
- Larghezza minima 900px
- XHTML Strict - Validazione W3C
- Provato su IE6/7, Firefox, Safari, Opera
Continua a leggere >>
css,
css esempi,
css float,
css fluido,
CSS Proprietà,
css template,
CSS3,
template gratuiti
In questo tutorial spiegherò com’evitare un problema che tanti principianti in css ed utente di Firefox possono incontrare.
Per quello che usano IE, il ‘problema’ non è visibile per errore d’interpretazione del browser.
Il problema incontrato si pone quando vogliamo usare la proprietà css float su un elemento contenuto in un blocco (div) contenitore a qual è applicato uno sfondo o bordo.
Lo sfondo/bordo del contenitore non si ridimensiona automaticamente in altezza per accomodare il suo elemento ‘floatato’ e rimane per quasi dire invisibile mentre il ‘float’ si ritrova sotto il suo contenitore.
Usando un esempio concreto, creo un div contenitore in quale metto 2 elementi, uno ‘floatato’ a sinistra e uno ‘floatato’ a destra.
Continua a leggere >>
clearfix,
css clearfix,
css float,
css sfondo
