|
| Precedente :: Successivo |
| Autore |
Messaggio |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
 Inviato: 27 Gen 2006 23:49 Oggetto: * [pillola] il box model e i trucchi del mestiere |
 |
|
quante volte siamo impazziti perche' prepariamo un bel layout fatto con i div e tutto il resto e poi al momento di inserire i contenuti aggiungiamo un po' di padding di qua, un po' di margin di la' e il nostro layout calcolato al pixel (ad esempio quelli con l'effetto ombra o nei div flottanti affiancati) si sfascia ignominiosamente?
bene vi svelo il trucco che ho adottato io, sperando che poi anche voi mi riveliate i vostri 
il trucco e' semplice: abuso dei div e preferisco margin a padding!
| Codice: |
<div id="contenitore">
<div id="contenuto">
<h2>titolo</h2>
<p>bla bla bla</p>
</div>
</div>
|
e nel css:
| Codice: |
#contenitore {
width: 500px;
background: url(ombra.gif) repeat-y;
}
#contenuto {
width: 97%;
margin-left: 1%;
}
|
in questo modo il contenitore esterno restera' sempre uguale qualunque sia il sistema di calcolo del box model da parte del browser (qualunque sia il modo in cui il browser interpreta cioe' il nostro css) e la parte interna non restera' appiccicata al bordo del layout
lo stesso sistema lo si puo' ottenere naturalmente dando la larghezza in percentuale e il margin agli elementi contenuti nel div, ma e' un rischio, perche' ci potrebbe capitare di darli a p, ul, ol, h2 e poi inserire un h3 in una delle pagine: l'h3 restera' disallineato rispetto al resto, percio' e' molto piu' comodo usare un div che conterra' tutto: gli elementi interni provvederanno poi ad occupare il 100% dello spazio disponibile
ah, dimenticavo! perche' preferisco il margin al padding? perche' se do una misura x ad un elemento, il padding "spinge verso l'esterno", mentre se do il margin all'elemento interno e *non* gli do la larghezza, quest'ultimo usufruira' di tutto lo spazio che gli lascio a disposizione: pare complicato e forse la mia spiegazione non aiuta, ma bastano un paio di prove per capire il meccanismo 
nota: quando si usano i div flottanti affiancati, *non* bisogna usare il 100% della larghezza, perche' il div piu' esterno finira' sotto al/agli altri; basta pochissimo, ma io consiglio di tenersi sempre un po' ampi: il bello dei div e' proprio quello di poter decorare il div sottostante nel modo a noi piu' consono e poi sistemare i contenuti in modo che "sembrino" inseriti in layout calcolati al pixel, ma in realta' siano piazzati dove fa comodo a noi
ricordo che i div flottanti generalmente si appoggiano uno sull'altro come tessere del domino, anche se a volte fa comodo farli flottare uno di qua e uno di la' e ricordo anche che ogni volta che avete bisogno di far flottare dei div a simulare colonne, e' opportuno/piu' comodo inserirli in un div contenitore per farli lavorare meglio (capiamoci: non e' *indispensabile* ma vi risparmia qualche mal di testa  )
a fine dei div flottanti dev'esserci sempre un elemento (un div) che abbia clear: both; per ripristinare il flusso del codice; per evitare problemi - ma segnatevi che e' un trucco che in teoria non s'avrebbe da fa'! - io inserisco un div vuoto *prima* della chiusura del div contenitore e do clear: both; a quello
mi spiego:
| Codice: |
<div id="contenitore">
<div id="sinistra">blablabla</div>
<div id="destra">blablabla</div>
<div id="chiusura"></div>
</div>
|
e nel css:
| Codice: |
#contenitore {
width: 500px;
}
#sinistra {
width: 200px;
float: left;
}
#destra {
width: 290px;
float: left;
}
#chiusura {
clear: both;
}
|
a volte - se il layout lo richiede, mi capita di inserire uno spazio all'interno del div di chiusura in questo modo:
| Codice: |
<div id="chiusura"> </div>
|
e' l'entita' che definisce lo spazio; per chi volesse approfondire le entita', segnalo questo sito
L'ultima modifica di rebelia il 28 Gen 2006 00:57, modificato 1 volta |
|
| Top |
|
 |
Marcolino
Semidio
Registrato: 27/04/05 15:26
Messaggi: 257
Residenza: Udine e dintorni
|
| Inviato: 28 Gen 2006 00:11 Oggetto: |
|
|
Per bloccare due blocchi flottanti, un trucco è anche quello di rendere flottante anche il contenitore che li contiene, però insomma tutto dipende.
Una regola generale non c'è e più che altro esistono un'insieme di regole.
Per il charset, ti consiglio questa pagina:
http://www.digitalmediaminute.com/reference/entity/index.php
Ah, quasi dimenticavo: ciao
son maleducato a volte. |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 28 Gen 2006 00:25 Oggetto: |
|
|
ma ciao! ben ritrovato! se sapevo che bastava cosi' poco per stanarti, ci avrei provato prima 
caspita! interessante il link che segnali  |
|
| Top |
|
|
Marcolino
Semidio
Registrato: 27/04/05 15:26
Messaggi: 257
Residenza: Udine e dintorni
|
| Inviato: 28 Gen 2006 00:33 Oggetto: |
 |
|
| rebelia ha scritto: | ma ciao! ben ritrovato! se sapevo che bastava cosi' poco per stanarti, ci avrei provato prima
caspita! interessante il link che segnali |
Ciao Reb, è sì è un bel po' che non passo di qui e che non ci vediamo io e te, ma ho avuto i miei problemi, ora penso risolti.
Link interessanti dici? Bè sai la ricerca e lo studio mi prendono molto, specie dall'ultima volta che sono stato bocciato a scuola  e sopratutto mi piace condividere quel poco che so con gli altri.
E visto che siamo in tema, in questa pagina potrai sbizzarrirti con tutte le lingue del mondo: http://www.unicode.org/charts/ |
|
| Top |
|
|
|
|
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
