Differenza tra elementi block e inline

27-08-08 | Postato in CSS Tips da Onsitus | 0 Commenti »

Nel creare pagine HTML è importante differenziare queste 2 categorie di elementi per evitare errore di codice e impostare al meglio il CSS.

La traduzione delle parole inglese ‘block’ e ‘inline’ sono abbastanza esplicite.

• block: un elemento che forma un blocco separato
• inline: un elemento che rimane in linea con il resto del contenuto

Di seguito, una lista delle loro caratteristiche e esempi concreti…

z-index: cambiare la profondità degli elementi

25-08-08 | Postato in CSS Proprietà da Onsitus | 0 Commenti »

Mentre è possibile posizionare gli elementi orizzontalmente sul asso x e verticalmente sul asso y con l’uso di proprietà specifiche come la proprietà css position, la proprietà css z-index permette di posizionare gli elementi su un asso z cambiando la profondità degli elementi e il loro ordine naturale di sovrapposizione.

Esempio:

Css template - esempio 4

18-08-08 | Postato in CSS Templates da Onsitus | 0 Commenti »

• Template css usando l’immagine di sfondo a 100%
• LARGHEZZA FLUIDA
• VALIDITA W3C XHTML STRICT
• COMPATIBILITA IE6, IE7, FIREFOX, OPERA, SAFARI

Css tips - Immagine di sfondo al 100%

12-08-08 | Postato in CSS Tips da Onsitus | 1 Commento »

Qualche righe di css, per impostare un immagine di sfondo al 100% ridimensionabile con la finestra del browser.

Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno una larghezza e altezza di 100%.
Le loro margine (margin) e ’spazi cuscinetti’ (padding) sono azzerati per evitare tutto spazio bianco intorno.
Con la proprietà css overflow evitiamo che vengono visualizzate le barre di scorrimento della finestra del browser. Finalmente, l’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e potere essere ridimensionata corretamente.

Proprietà css overflow: visible, hidden, scroll e auto

04-08-08 | Postato in CSS Proprietà da Onsitus | 3 Commenti »

La proprietà CSS overflow indica al browser che fare con il contenuto che supera il suo blocco contenitore. Il quale vuole dire che viene applicato ad un elemento di misura fissa.

Se i valori per width (larghezza) e/o height (altezza) non vengono
specificati, la proprietà overflow sarà inutile ed il blocco contenitore si ridimensionerà in base al suo contenuto.

La proprietà overflow accetta 4 valori: visible (visibile), hidden (nascosto), scroll (scorrevole) ed auto.

Menu css drop down colorato - esempio 3

31-07-08 | Postato in CSS Menu da Onsitus | 0 Commenti »

Menu css di tipo drop down orizzontale basato sul tutorial Come creare un menu css dropdown orizzontale di base.

Questo menu dropdown fa l’uso di più classe ‘colorate’ per potere applicare un immagine di sfondo ad ogni categorie con la proprietà css background.

Come creare un menu css dropdown orizzontale di base

29-07-08 | Postato in CSS Tutorials da Onsitus | 1 Commento »

In questo tutorial, vediamo come creare un menu css dropdown orizzontale di base usando liste non ordinate e liste innestate.

Userò la proprietà css visibility per nascondere i sub item del menu e renderli visibile sullo stato :hover.

Il menu css funziona per i maggiori browser di recente edizione.
Alla fine dell’ articolo, spiegherò come farlo funzionare anche per Internet Explorer 6.

CSS3 multi-column: modulo css3 per disponere un contenuto su più colonne

24-07-08 | Postato in CSS3 da Onsitus | 0 Commenti »

Il modulo css3 multi-column permette di specificare che il contenuto d’un elemento sia visualizzato su più colonne predefinite.

Il contenuto dell’elemento si adatta allo spazio disponibile e possiamo specificare il numero (column-count) o la larghezza (column-width)
delle colonne se desiderato.

Al momento, il multi-column è applicato solo da Safari e Firefox (parzialmente) usando i correspettivi css3: -webkit e
-moz.

Css template gratuito - esempio 3

21-07-08 | Postato in CSS Templates da Onsitus | 4 Commenti »

• Template css basato sul tutorial Creare un layout
  per un sito internet con Photoshop CS3
• LARGHEZZA FISSA 850PX
• VALIDITA W3C XHTML STRICT
• COMPATIBILITA IE6, IE7, FIREFOX, OPERA, SAFARI

Come creare 3 stati d’un pulsante con un unica immagine in css

17-07-08 | Postato in CSS Tutorials da Onsitus | 0 Commenti »

Con questo tutorial, vediamo come usare un’ unica immagine di sfondo da applicare a un pulsante per creare i 3 stati (normale, sopra e selezionato) a un pulsante.

Questo metodo permette di avere una singola immagine caricata da l’inizio e evitare problemi di ’scatti’ tra i differenti stati quando più immagine di sfondo vengono usate su chiamata del stato stesso.

L’idea sarà realizzata usando la proprietà CSS background-position,
spostando il sfondo con i valori top, center e bottom.

CSS POSITION: posizione d’un elemento in modo statico, assoluto, relativo e fisso

09-07-08 | Postato in CSS Proprietà da Onsitus | 2 Commenti »

La proprietà css position con i suoi valori static, absolute, relative e fixed permette di posizionare un elemento in relazione ad un altro elemento o allo corpo stesso della pagina.

Con l’uso di semplici esempi online, vederemo la proprietà CSS position, l’applicazione di questi 4 differenti valori con l’uso delle declarazione top (alto), bottom (basso), left (sinistra) e right (destra) per posizionare più precisamente l’elemento con unità di misure o percentuale.

CSS3 opacity: trasparenza d’un elemento in css3

04-07-08 | Postato in CSS3 da Onsitus | 0 Commenti »

La proprietà CSS3 opacity (opacità) permette di cambiare la trasparenza d’un elemento.

La proprietà opacity richiede un valore tra 0.0 (uguale a 100% trasparente) e 1.0 (niente trasparenza).
E scritto come di seguito per esempio d’opacità di 60%:

opacity: 0.6;

Come aggiungere uno sfondo Flash a un elemento HTML

02-07-08 | Postato in CSS Tutorials da Onsitus | 2 Commenti »

Grazie all’uso della proprietà css z-index, possiamo facilmente aggiungere uno sfondo Flash (swf) a un contenuto HTML.
Le base per aggiungere un swf come sfondo sono…
Per il contenitore che contiene entrambi swf e altri elementi html:

un width e height, larghezza e altezza
una position:relative; per potere posizionare il swf in modo assoluto in rapporto a questo contenitore

Per [...]

Come rimuovere bordo grigio dei links in Firefox

30-06-08 | Postato in CSS Tips da Onsitus | 6 Commenti »

Tips css veloce su come togliere il bordo grigio visibile attorno ai links su Firefox quando si cliccano!

Template css gratuito - esempio 2

27-06-08 | Postato in CSS Templates da Onsitus | 0 Commenti »

• LARGHEZZA FISSA 650PX
• COLORE: SCURO
• VALIDITA W3C XHTML STRICT
• COMPATIBILITA IE6, IE7, FIREFOX, OPERA, SAFARI