Come trasformare un psd in (x)html e css senza perderci la ragione? Parte 1
Il nostro compito in questa lezione sarà di dissezionare e in seguito di ricomporre il sito come in un puzzle della Clementoni, utilizzando i fogli di stile e l’(x)html. È una delle parti più appassionanti del lavoro perché ti permette di seguire lo sviluppo del sito vero e proprio ed è sempre gratificante vedere la tua opera prendere forma mattone dopo mattone. Per uno sviluppatore web può essere una soddisfazione molto simile a quella che può provare un grafico quando concepisce il layout del sito.
Premessa
Iniziamo con il copiare la cartella che utilizziamo come modello di base quando si tratta di sviluppare un nuovo sito web. Sì, perché sarebbe solo uno spreco di tempo dover ricreare ogni volta sempre la stessa struttura di base per il nuovo sito. Se non l’hai ancora fatto allora questa è la volta buona per creare il tuo modello.
Il modello contiene nell’ordine:
- una cartella denominata “css” dove sono presenti i fogli di stile di cui si compone il nostro personale Framework CSS (quello che utilizziamo noi è stato generato partendo dalla versione 0.7.1 del framework Blueprint);
- una cartella denominata “images” che conterrà tutte le immagini di cui si comporrà il nostro sito;
- una cartella denominata “include” in cui collocare eventuali file da includere all’interno delle nostre pagine;
- una cartella denominata “js” dove posizionare i file di eventuali script javascript;
- un file denominato “index.php” che contiene la struttura standard di un documento web (dichiarazione doctype, head, principali meta tag, collegamento ai fogli di stile, favicon, ecc…);
- un file denominato “robot.txt” che conterrà le regole utilizzate dagli spider per applicare eventuali restrizioni di analisi sulle pagine del sito.
Passo 1: Come dissezionare correttamente il nostro layout?
Prima di mettere le mani sul codice, è di fondamentale importanza dissezionare ed esportare in modo corretto le varie sezioni del nostro layout. Dopo un’accurata analisi ci accorgiamo che nel nostro caso è preferibile suddividere la pagina in tre sezioni:
- La prima sezione avrà una larghezza di 1680px, che comprenderà tutta l’estensione dell’immagine in orizzontale, e un’altezza di 632px, indispensabile per visualizzare i palloncini posti lateralmente. Questa immagine sarà il background della sezione principale del sito che chiameremo wrapper.
- La seconda sezione avrà una larghezza di 1680px e un’altezza di 86px. Questa immagine sarà il pattern assegnato al body che si ripeterà verticalmente sulla base del contenuto testuale inserito nel sito. Ti starai chiedendo: perché proprio 86px? Si tratta di una dimensione minima che ci permette di replicare l’immagine in verticale [background-repeat:repeat-y;] senza che si noti la ripetizione della stessa.
- La terza sezione avrà anch’essa una larghezza di 1680px con un’altezza di 306px. Questa immagine sarà il background della sezione footer predisposta alla chiusura del nostro layout. In questa sezione sarà inserita la galleria fotografica.
Una volta definite le varie sezioni, in Photoshop nascondi i livelli superflui, su cui andremo a lavorare in un secondo momento. Nascondi i link laterali, il testo, le miniature della gallery e, come puoi vedere dall’immagine inserita in precedenza, lascia visibile solo le tre sezioni principali.
A questo punto devi esportare le sezioni, una per una. Con lo strumento selezione rettangolare, seleziona prima di tutto la prima sezione, stando ben attento alle dimensioni stabilite in precedenza. È un lavoro minuzioso da svolgere con precisione quasi maniacale: spesso anche un solo pixel di differenza può comportare una fastidiosa perdita di tempo e lavoro.
Una volta selezionata la prima sezione, clicca sul menù “modifica” alla voce “copia elementi uniti”. Apri un nuovo documento – che avrà le dimensioni della sezione in memoria già impostate in modo automatico – e incolla la selezione. In questo modo avrai un documento che conterrà solo l’immagine di tuo interesse. Salva l’immagine nella cartella “images” e segui lo stesso procedimento con le altre due sezioni del sito.
Passo 2: Mettiamo le mani sul nostro foglio di stile
Apriamo il file “screen.css” che si trova all’interno della cartella css con il nostro editor preferito. La prima sezione che andiamo a creare e che, chiameremo “wrapper”, conterrà lo sfondo principale del nostro sito, con un’altezza minima di 632px, fondamentale per visualizzare i palloncini che sono posti lateralmente.
L’immagine avrà così una dimensione di 1680px di larghezza [risoluzione massima su cui stiamo sviluppando la visualizzazione del sito] per 632px di altezza.
Sotto uno screenshot della stessa:
#wrapper{height:auto!important;height:632px;min-height:632px;background-image:url('../images/bg1.jpg');background-position:top center;background-repeat:no-repeat;width:100%;}
Per ottenere l’implementazione di min-height anche su browser più datati come internet explorer 6 [che non supporta tale proprietà], ho sfruttato un’altra insufficienza del browser Microsoft. Qui trovi ulteriori dettagli sulla soluzione adottata.
In questo modo vincoliamo wrapper ad avere un’altezza minima di 632px.
Passo 3: Assegniamo un pattern al body
Nell’eventualità in cui il testo della pagina dovesse essere troppo lungo [dopo i 632px di altezza “coperti” dall’immagine che abbiamo assegnato come background a wrapper] lo sfondo ritornerebbe a essere vuoto. Per risolvere questo inconveniente sarà necessario quindi aggiungere un pattern che dia l’idea di continuità con lo sfondo precedente.
Assegniamo al body l’immagine di sfondo denominata “pattern.jpg” di 1680px di larghezza per 86px di altezza.
body {font-size:70%;color:#222;background:#fff;background-image:url('../images/pattern.jpg');background-position:top center;background-repeat:repeat-y;font-family:verdana,"Helvetica Neue",Arial,Helvetica,sans-serif;}
Passo 4: Iniziamo a scrivere le nostre prime righe di (x)html
Prima di proseguire ulteriormente con il lavoro verifichiamo se quello che abbiamo concepito funziona a livello pratico. Apriamo dunque il file index.php con il nostro editor. La prima parte del file conterrà qualcosa del genere:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Asilo Nido - YourInspirationWeb</title>
<meta name="author" content="Your Inspiration Web - Nando [php, xhtml, css], Sara [graphic design]" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- [template css] begin -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
<!-- [template css] end -->
<!-- [favicon] begin -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- [favicon] end -->
</head>
Aggiungiamo queste poche righe di codice e andiamo a visualizzare il risultato su tutti i browser.
<body>
<div id="wrapper">
</div>
</body>
Esattamente quello che volevamo ottenere: come puoi notare il pattern che abbiamo assegnato al tag body si ripete verticalmente andandosi ad integrare perfettamente con l’immagine di sfondo utilizzata nella sezione wrapper.
Passo 5: Definiamo il contenitore del sito
Creiamo una sezione che farà da contenitore al nostro sito. Questa sezione, che chiameremo “container”, avrà una larghezza totale di 960px (920px sarà la dimensione del box al quale assegneremo altri 20px di padding per lato, così da ottenere la larghezza desiderata: 920+20+20) e sarà centrata sullo schermo.
#container {width:920px;margin:0 auto;padding:20px;}
<body>
<div id="wrapper">
<div id="container">
</div>
</div>
</body>
Andiamo a visualizzare il risultato su tutti i browser. Se aggiungessimo un bordo nero a container, così da renderlo visibile, avremmo qualcosa come mostrato nell’immagine sotto:
All’interno di container andremo ad inserire i contenuti del sito i quali ne regoleranno automaticamente l’altezza.
Passo 6: Dividiamo il contenitore in due colonne
Per raggiungere un buon posizionamento su Google in fase di indicizzazione è importante che il contenuto testuale del sito venga inserito prima di ogni altra cosa, ecco perché dobbiamo fare in modo che la colonna di destra, quella che racchiuderà poi il contenuto testuale delle varie pagine, dovrà essere scritta per prima nella nostra pagina html.
#right {float:right;padding:0 65px 0 20px;width:560px;}
#left {margin-right:645px;width:260px;}
Utilizzando questa tecnica css raggiungiamo l’obiettivo che ci siamo prefissati, adesso la colonna di destra (#right) potrà essere inserita per prima all’interno della pagina html e poi, a seguire, la colonna di sinistra (#left).
Diamo dunque uno sguardo al markup (x)html:
<body>
<div id="wrapper">
<div id="container">
<div id="right">
<!-- contenuto colonna destra -->
</div>
<div id="left">
<!-- contenuto colonna sinistra -->
</div>
<div class="clearer"></div>
</div>
</div>
</body>
Aggiungendo un bordo alle due colonne e assegnando un’altezza provvisoria di 400px in modo da renderle visibili sullo schermo, possiamo visualizzare un’anteprima dei due box (sui vari browser) che apparirà come nell’immagine mostrata sotto:
Ovviamente i bordi e l’altezza nelle due colonne sono stati impostati solo a scopo didattico, questi poi non saranno presenti nel foglio di stile definitivo.
Passo 7: È il momento di aggiungere il footer
La galleria fotografica che si trova in fondo alla pagina sarà contenuta in un’altra sezione del sito che chiameremo “footer”. A questa sezione imposteremo un’altezza pari a 306px come quella dell’immagine di sfondo che gli andremo ad assegnare.
#footer {width:100%;height:306px;background:url('../images/footer.jpg') no-repeat top center;}
Adesso realizziamo un box che servirà da contenitore alla sezione footer in cui andremo dopo a inserire il relativo contenuto: le foto della galleria fotografica.
#containerFooter {width:390px;margin:0 auto;padding:0 250px 0 320px;}
Il markup (x)html che definisce la struttura del sito che stiamo sviluppando a questo punto del progetto si mostrerà così:
<body>
<div id="wrapper">
<div id="container">
<div id="right">
<!-- contenuto colonna destra -->
</div>
<div id="left">
<!-- contenuto colonna sinistra -->
</div>
<div class="clearer"></div>
</div>
</div>
<div id="footer">
<div id="containerFooter">
</div>
</div>
</body>
Sotto uno screenshot del lavoro che abbiamo svolto:
Possiamo dire di essere già ad un buon 50% di completamento del lavoro riguardante questa fase di messa in codice del sito. Questa settimana finiamo qui la nostra lezione cosicché tu possa avere la possibilità di approfondire bene la prima parte che è stata trattata. Se dovessi avere qualche dubbio in proposito, c’è la sezione dei commenti per eventuali chiarimenti.
Conclusione
Come hai visto, è di fondamentale importanza riuscire a dissezionare correttamente il layout che vogliamo ricomporre in codice. Basta commettere un piccolo errore in questa prima fase e inevitabilmente ci si ritrova a perdere tempo prezioso nello sviluppo di codice (x)html e css che non produrrà i risultati aspettati.
Altro aspetto fondamentale è quello di verificare, passo dopo passo, la corretta visualizzazione del sito su tutti i principali browser in modo da correggere subito eventuali imperfezioni e non tralasciare dunque questa fase alla fine della realizzazione dell’intera pagina come spesso può capitare a chi è alle prime armi. Nei casi peggiori potrebbe essere necessario rimettere le mani all’intero codice che si è sviluppato.
La prossima settimana, nella seconda parte di questa lezione, vedrai i passi necessari per disporre i vari contenuti (testata, navigazione, testo, galleria fotografica) all’interno delle relative sezioni che abbiamo appena creato, così da completare il nostro lavoro. Non perdere dunque l’appuntamento.
Gli altri articoli di questa guida:
- Come capire le esigenze del cliente al primo incontro?
- Come calcolare costi e tempi di consegna di un progetto web evitando di scrivere cifre insensate?
- Come evitare futuri ripensamenti da parte del cliente?
- Come sviluppare e organizzare la struttura di un sito web?
- Come trovare l’ispirazione e disegnare il layout di un sito web?
- Come presentare la bozza grafica al cliente?
- Come realizzare le pagine interne dopo l’accettazione della bozza?
- Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2)
- Come indicizzare un sito senza essere degli esperti SEO? (parte 1) (parte 2)
- Come assicurarsi di non aver commesso errori prima di lanciare il sito online?
L'autore
48 commenti
Trackback e pingback
-
Come trasformare un psd in (x)html e css senza perderci la ragione? Parte 1
[...] Come trasformare un psd in (x)html e css senza perderci la ragione? Parte 1 domenica 27 settembre 2009 |… -
Come presentare la bozza grafica al cliente? | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) [...] -
Come trovare l’ispirazione e disegnare il layout di un sito web? | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) [...] -
Come sviluppare e organizzare la struttura di un sito web? | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) [...] -
Realizzazione sito web: Come evitare futuri ripensamenti da parte del cliente? | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) [...] -
Come fare un sito web senza impazzire dietro alle richieste del cliente? | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) [...] -
Come capire le esigenze del cliente al primo incontro? Guida alla realizzazione di un sito web dalla a alla z | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) [...] -
Come indicizzare un sito senza essere degli esperti SEO? Parte 1 | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2) [...] -
Come assicurarsi di non aver commesso errori prima di lanciare il sito online? | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2) [...] -
Dal Template Photoshop al Codice HTML CSS: Super Aggiornamento | Fedeweb
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2) [...] -
Dal Template Photoshop al Codice HTML CSS: Ecco Come Fare | Fedeweb
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2) [...] -
» Creare un sito professionale in 10 mosse
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) e (parte 2) [...] -
Come indicizzare un sito senza essere degli esperti SEO? Parte 2 | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2) [...] -
Come trasformare un psd in (x)html e css senza perderci la ragione? Parte 2 | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2) [...] -
Come realizzare le pagine interne dopo l’accettazione della bozza? | Your Inspiration Web
[...] Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2) [...]
Ottima guida, perfetto
Ragazzi io sono alle prime armi e non capisco una cosa.
Arrivando al passo 2 modifico il mio foglio css. Nel passo 3 devo assegnare un pattern al body? Cioè devo creare un documento html?
Non riesco a procedere scusate l’ignoranza.
I puzzle Clementoni! :D
Scherzi a parte, aspettavo questo articolo da giugno, e finalmente è arrivato, soddisfacendo ogni mia aspettativa!
Sono molto orgoglioso di scoprire che il metodo utilizzato da me fino ad oggi è pressochè identico al tuo, senonchè i tuoi layout sono un “goccino” più complessi dei miei =)
L’unica fase di cui non ero certo era quella riguardo alla “cartellizzazione” dei CSS: in alcuni layout uso una cartella che chiamo CSS contenente il foglio di stile, mentre in altri lascio il fogli css nella root.. il tuo articolo mi confermato che è meglio creare una cartella a parte, soprattutto se si usano fogli di stile in più per javascript vari..
Grazie ancora per l’articolo!
@Arazz: Ora mi hai incuriosita! Si possono vedere i tuoi lavori? :)
Ecco, quest’articolo lo aspettavo da un po’ anche io. Ero proprio curiosa di vedere come avresti realizzato la suddivisione del layout in singole sezioni.
Questa è una delle parti in cui mi sono sempre arenata.
Per esercitarmi tempo fa, seguendo la guida di Sara, avevo provato a realizzare una “brutta copia” del layout dell’asilo in Photoshop, ma quando ho provato a metterlo in codice non vi dico il casino che ho combinato. Non mi tornava nulla, io assegnavo come sempre lo sfondo principale al body ma se il sito cresceva in altezza non aveva più uno sfondo e non sapevo dove mettere il pattern, insomma un casino.
Adesso ho visto la genialata del pattern assegnato al body che in realtà risolve molti dei miei problemi. Non ci avevo proprio pensato.
Come sempre, fantastico articolo.
Grazie per i complimenti!
@cry: nessuna genialata, solo piccoli accorgimenti che impari con l’esperienza e la pratica quotidiana. Adesso come esercizio puoi proseguire inserendo i contenuti all’interno delle sezioni che abbiamo creato, dovrebbe venirti più semplice.
@arazz: continua così che sei sulla buona strada. per quanto riguarda la cartella per i fogli di stile, conviene toglierli dalla root, capita ormai sempre con più frequenza di usarne più di uno. io per esempio, oltre che per eventuali script, di partenza ne uso sia uno per la stampa che uno per correggere piccoli difetti sui vari browser microsoft.
magari più in la pubblico un articolo più dettagliato sul modello che utilizzo per lo sviluppo e ne metto a disposizione il download.
@sarah: Certo, con grande piacere, ma ti avverto che ovviamente sono di basso livello!
– Il mio sito personale – è il primo layout table-less che ho fatto, fa piuttosto schifo.
– FF Skin Generator – un progetto che mi ero inventato per mettere alla prova le mie conoscenze di javascript e per provare un layout che avevo in mente da un po’. Il progetto è mezzo morto anche perchè non frequento più il sito forumfree ecc. quindi non mi ci sono più dedicato.
– Liceo King – Il sito che sto progettando per la mia scuola. Non è ancora veramente completato perchè devo ancora portare la brochure allla vice preside – cos anon ci si inventa per ottenere dei crediti – =)
@nando Hai ragione, effettivamente non ho mai creato u foglio di stile specifico per la stampa, per i cellulari e probabilmente non farò mai uno per la lettura in Braille, però effetivamente è sempre meglio creare una cartella a parte..
Mitica, sei tra i miei preferiti, mi sto specializzando nella creazione di siti web e sempre c’è qualcosa di nuovo da imparare..
Stavo provando a rifare questo tutorial, mi sembrava tutto corretto ed ero già passata alla parte seconda, ma!
(Io provo a chiedere, non so se la sezione “commenti” serve anche per questo).
Quando inserisco il testo, in locale il footer scende al fondo, grazie pattern assegnato al body, ma sui browser (tutti i principali) il testo si accavalla al footer, che rimane in alto. Questo succede sia con index.php che con index.html (avevo provato anche così).
Il codice mi sembra più che corretto, ho seguito passo passo le tue istruzioni…
Silvia
Ciao Silvia,
cosí su due piedi non so dirti dov’é l’errore, se puoi mandarmi uno screenshot del problema lunedí al mio rientro vedo cosa potrebbe essere e ti dico.
A presto!
Ti ringrazio molto per l’interessamento! Non riesco però a trovare dove inviare gli allegati sia per lo screenshot che per i miei codici (non voglio riempire la vs pagina con i miei css… Provo a rivedere tutto da capo…
Breve aggiunta: il problema si presenta quando aggiungo nella index il footer.
Se non lo metto il pattern funziona perfettamente: posso scrivere testo all’infinito e la pagina rimane col suo background fino alla fine. Quando aggiungo prima della chiusura del body , l’immagine del footer mi si piazza in mezzo al testo. A qualcuno capita la stessa cosa?
Grazie – Silvia
Ciao Silvia,
puoi mandarmi il tutto a: info[at]yourinspirationweb[dot]com
Ovviamente at è uguale alla@ e al dot corrisponde il punto.
Scrivo così per evitare spam ;) a presto
Un ottimo tutorial… complimenti davvero!
Grazie Carlo e benvenutio anche a te su YIW!
Ti ringrazio tanto anche per la citazione sul tuo sito, è davvero un piacere sapere che i miei articoli vengono aprrezzati.
Grazie Nando,
lo trovo veramente un tutorial molto importante e senza dubbio interessante per coloro che si avvicinano a questa “pratica”
Ciao ! Grzie per la guida veramente utilissima ! ben descritta ci capisco anch’io :-)
Grazie a te, Sebastian.
Prima di tutto GRAZIE! Immensamente grazie perchè questa guida è davvero una perla preziosa! :)
Secondo punto: AIUTO! Ho un problema davvero stupido ma in cui mi sono arenato e non c’è verso che lo risolva… Dicevo, è davvero stupido, perdonatemi… Non riesco a sovrapporre del testo in un div all’immagine presa da photoshop…….. Help me please…
;)
Continuate gente che ne sta venendo fuori una Community niente male!
Fra
Ciao Cifra, grazie mille per i complimenti intanto e scusa per l’immenso ritardo di questa risposta =)
Per quanto riguarda il supporto tecnico utilizza il nostro forum, lo abbiamo creato proprio per questo.
Grazie ancora e a presto.
riuscite con grande semplicità a realizzare dei template davvero ben fatti. bravissimi!
grazie marco e benvenuto!
Anche se penso che il risultato non sia un granchè, ma non esiste un programma di Adobe che si occupa di questo?
ciao alessandro, realizzare il layout di un sito mediante un editor visuale è la prima cosa che insegnano a non fare se si vuole svolgere seriamente questo lavoro. e i motivi sono tantissimi, ti invito ad approfondire l’argomento.
Hai scritto all’inizio dell’articolo
“Per ottenere l’implementazione di min-height anche su browser più datati come internet explorer 6 [che non supporta tale proprietà], ho sfruttato un’altra insufficienza del browser Microsoft. .”
Tutto perfetto.. ma non riesco a digerire tanto e a capire quella “min-height” per risolvere il problema di IE6.. cosa fa effettivamente ? :)
“Qui trovi ulteriori dettagli sulla soluzione adottata” –> Il link che hai postato http://www.constile.org/tips/min-height/ adesso restituisce sito non trovato :)
E’ proprio necessaria ?
Si FF ormai ha superato IE6 e ora si pensa già ad IE9 (che oltretutto non funzionerà con XP) ma molti sono ancora quelli che usano questa versione della Microsoft
ciao francesco, ormai il supporto ad ie6 credo possa essere abbandonato, noi lo abbiamo già fatto da un pezzo seguendo i passi dei grandi colossi del settore (come youtube di big g).
Meglio così.. quindi si può rimuovere dal codice quel “min-height””
Grazie
Davvero complimenti per la guida, per chi è alle prime armi come me è una manna dal cielo. Ho bisogno di un aiuto, credo di avere lo stesso problema di Silvia, letto in qualche commento sopra, ovvero non riesco ad inserire il pattern assegnato al body, tra primo e terzo blocco. Così, quando inserisco il testo, esso si sovrappone al footer. Credo di sbagliare qualcosa nel file screen.css, è possibile averne una copia per un raffronto? Scusate la banalità, ma sono agli inizi, mi sto appassionando e tutto quello che mi chiarisce le idee è ben gradito.
Complimenti ancora!!
Ritengo questo layout davvero importante perchè si adegua ad ogni risoluzione e perchè inserisce i contenuti prima di ogni altro elemento.
Ma sebbene l’avete spiegato molto bene.. mi sfuggiva qualche particolare nel passaggio da PSD a H(Html)/CSS e allora mi sono fatto uno schema per la posizione e suddivisione dei vari div con gli attributi di cui ho fatto lo screenshot.. potrebbe essere utile.. anche se forse un pò pasticciato (ho rimosso i pulsanti img sostituendo l’altezza totale degli stessi con un height del div left)
– http://postimage.org/image/ar2fpx8k/
– http://postimage.org/image/aqnjvssk/
Se ovviamente c’+ qualcosa da aggiustare.. avvisatemi.. grazie
Complimenti a Nando per l’interessante tutoral!
Ciao Nando,
innanzitutto ci tengo a ringraziarti per aver fatto questo splendido tutorial, tuttavia mi sono bloccato dove bisogna inserire il footer nel layout.
Ho eseguito alla lettera le vostre istruzioni e ho assegnato un pattern al tag body in modo che quando il testo inserito supera la dimensione di 632 px lo sfondo si “allunga”.
Quando vado a inserire il footer, questo si piazza verso il centro della pagina e viene automaticamente sovraiscritto dal testo.
Inoltre c’e una cosa che non mi è chiara: che cos’è il clearer?
Vedo dal tutorial che è racchiuso tra i tag div, ma non è spiegato a cosa serve.
Ho letto gli altri commenti e ho visto che altri 2 utenti hanno avuto lo stesso problema, perciò ti mando anche io un paio di screenshot all’ indirizzo che è stato riportato sperando che tu possa aiutarmi a risolvere il problema.
Ti ringrazio e colgo l’occasione per fare a tutti gli auguri di Buona Pasqua.
Grazie per la guida.
Mi viene però un dubbio:
A cosa serve il div con classe clearer??
Il div clearer serve a “ripulire” lo spazio. Mi spiego: quando si usano il float, per non far sovrapporre altri elementi aggiuntivi, si imposta al quel div vuoto, la dichiarazione css .div { clear: both; } dove both indica entrambi i lati. In pratica gli altri elementi scendono e non si sovrappongono e seguono il normale flusso.