Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Posizionare elementi con css

Maggio 14th, 2009 by Giovanni Caputo

Di seguito 2 tutorial che spiegano come posizionare elementi con i css:

http://tutshelf.com/the-art-of-css-positioning/

http://www.italianwebdesign.it/come-posizionare-gli-elementi-in-una-pagina-html-con-i-css/

La proprietà position per gli elementi html è stata introdotta nella versione 2 dei CSS dal w3c, il loro utilizzo è molto semplice e spesso vengono utilizzati impropriamente da utenti poco esperti per la realizzazione del layout.

http://www.italianwebdesign.it/wp-content/uploads/2009/05/makepos_before_11-300x255.png

Come vedremo in questo tutorial il posizionamento dei vari elementi richiede qualche competenza per non compromette la compatibilità del layout nei vari browser.

La proprietà position

La proprietà position ammette quattro valori: static, relative, absolute e fixed. Esistono grandi differenze tra questi quattro valori che occorre capire per utilizzarli al meglio.

Posizionamento statico

Il valore static è attribuito di default ad ogni elemento ed ignora qualunque tipo di offset attribuito all’elemento come top, left, bottom e right. Questo tipo di posizionamento non altera la posizione dell’elemento e viene implicitamente attribuito ad ogni elemento della pagina com’è possibile vedere in questo esempio.

Posizionamento relativo

Il valore relative altera il posizionamento di un elemento tramite un offset impostato con le proprietà top, left, bottom e right. Gli altri elementi della pagina non mutano il proprio posizionamento in quanto il posizionamento relativo non estrae dal flusso l’elemento ma lo colloca su un livello superiore.

In questo esempio possiamo notare come il posizionamento relativo collochi l’elemento sopra un elemento con posizionamento statico. Per gestire la sovrapposizione degli elementi è possibile utilizzare z-index con un valore inferiore a 0 (avendo gli elementi della pagina z-index con valore 0 di default) come in questo esempio.

Posizionamento assoluto

Il valore absolute posiziona un elemento in relazione all’elemento html o all’elemento genitore che ha un posizionamento diverso da statico. Bisogna ricordare che a differenza del posizionamento raltivo quello assoluto colloca l’elemento al di fuori del tradizionale flusso della pagina influenzando quindi il layout.

In questo esempio vediamo come due elementi con posizionamento assoluto si comportino in maniera diversa a causa del riferimento per la posizione.

Il primo div infatti calcola l’offset partendo dall’elemento genitore (con id relativo) mentre il secondo non avendo un elemento genitore con posizionamento diverso da statico prende come riferimento l’elemento html.

Occorre ricordare che Internet Explorer 6 e versioni precedenti presentano numerosi bug sul posizionamento assoluto. Una buona soluzione per risolvere queste problematiche è quello di settare un’altezza dell’elemento contenitore a 0 solo per Internet Explorer 6 e precedenti.

<!--[if lte IE 6]>
div{height:0;}
<![endif]-->

Posizionamento fisso

Il valore fixed estrae un elemento dal flusso e lo posiziona in base all’offset (specificato con top, left, bottom e right) in relazione all’elemento html.

Il posizionamento fisso può sembrare simile al posizionamento assoluto, ma non rispetta la regola del genitore con posizionamento diverso da statico, infatti utilizza sempre come riferimento l’elemento html, utilizzando il precedente esempio con questo tipo di posizionamento notiamo che i due div si sovrappongo in cima alla pagina.

Un’altra differenza rispetto al posizionamento assoluto è che ignora lo scroll nelle pagine con contenuto più alto dell’area visibile nel browser e mantiene la posizione definita in relazione alla finestra del browser.

In questo esempio vediamo come si comporta un elemento con posizionamento assoluto ed uno con posizionamento fisso in una pagina con molto contenuto.

Occorre inoltre ricordare che il valore fixed per la proprietà position non è supprtato da Internet Explorer 6 e versioni precedenti.

Autore: Mauro Accornero

Category: Programmazione, Siti Web | No Comments »

Template CSS per il web

Settembre 11th, 2008 by Giovanni Caputo

L’utilizzo dei CSS e dei tag DIV per la realizzazioni di siti web si sta sempre più affermando e sta sostuendo le care e vecchie tabelle.

Accedendo a questa pagina si potrà scaricare facilmente il  Template/layout/ modello scelto semplice da modificare.

Faux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS LayoutsFaux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS LayoutsFaux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS LayoutsFaux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS LayoutsFaux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS LayoutsFaux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS LayoutsFaux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS LayoutsFaux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS Layouts Faux CSS LayoutsFaux CSS Layouts Faux CSS Layouts

Category: Programmazione, Siti Web | No Comments »

Convertire psd(o altra immagine) in css e div HTML

Maggio 2nd, 2008 by Giovanni Caputo

Come webdesigner stai lavorando con Photoshop e ora volete convertire il vostro file PSD ( jpg, png o qualunque altro formato che photoshop è in grado di leggere) in un CSS valido  e in un documento (X) HTML.

Se utilizzate la normale procedura andando da file/ salva per il web, tutto viene convertito in immagine ma la cosa peggiore è che viene generata la pagina attraverso tabelle annidate. Chi ha esperienze con le tabelle in html, sa benissimo quali sono i problemi a cui si va incontro, per esempio, basta una piccola modifica al testo inserito all’interno di una cella per poi non riuscire più a trovare una giusta configurazione.

Esiste anche una modalità che permette invece di trasformare tutto in div.

Per prima cosa aprite il file con photoshop e modificatelo con Image ready andando dal menu file/edit in imge Ready.

Successivamente tagliate il vostro documento usando la strument “slice”, questo vi permetterà di definire tutte le diverse parti della vostra pagina web (per esempio, l’intestazione, il menu ecc) ottenedno, quindi, numerose linee e quadrati blu numerati.

Ora è necessario i parametri di output:andare nel menu file/ output setting e selezionare i seguenti parametri:

preset: custom

slice output: generate CSS, refercenced: by ID

Ora che abbiamo definito le opzioni di output cliccare su OK. (questo convalida le impostazioni, ma non creare il file ancora). Quindi è necessario salvare il risultato, utilizzando il comando “Salva ottimizzato” (all’interno del menu File).

In questo modo Imageready avrà creato la cartella “immagini” contenente tutte le immagini a tagliate precedentemente e un file HTML contenente che è nel codice sorgente del codice CSS.

Se volete vedere, copiare, modificare i css o il codice sorgente è sufficiente aprire il file nel vostro browser preferito e visualizzare il codice sorgente.

Naturalmente si potrebbe aver bisogno di modificarlo e ottimizzare alcune o parte di essa.

Se conoscete altri meccanismi, altri metodi o trovate dei difetti in questo metodo fatemi sapere.

Category: Siti Web, tutorial | 2 Comments »