Sezioni

Chiudi B3 & Linux

Chiudi Linux

Chiudi Webdesign

Chiudi Parole

Chiudi Tutorials

Chiudi Utilità

Altro

Chiudi In Rilievo

Chiudi Linux In Rilievo

Chiudi Ubuntu In Rilievo

Chiudi Dreamlinux

Ricerca




Login
Si riconnetta
---

Il tuo nome :

Il tuo codice segreto (associato al tuo pseudonimo)

 Numero di membri  5 membri


Utenti registrati online

( Nessuno )
Visite

 98896 visitatori

 6 visitatori online

Webmaster - Infos
Scrivi a Giorgio Beltrammi  Webmaster
Aggiungi ai preferiti  Preferiti
Segnala questo sito ad un amico  Segnala questo sito
Versione palmare  Versione palmare
Utilità



Locations of visitors to this page

lqh_button.png

nokappa.png

get_bluefish_80x15_2.png

mint_80x15.png

dreamlinux_15x8.png

vector_88x15.png

crunchbang_80x15.png

goblinx_80x15.png

big_linux_88x15.png

opera80x15.gif

button-thunar.png

play_ogg.png

multietnico.png

idv_b_europa.jpg
Webdesign - Padding per il <body>
rss Questo articolo è disponibile nel formto standard RSS per la pubblicazione sul vostro sito web:
http://livelinux.altervista.org/data/artit.xml

L'uso dell'attributo "padding" per l'elemento "body"

Questa pagina illustra l'uso dell'attributo "padding" e del relativo valore percentuale, applicati all'elemento 'body' per ottenere la centratura del contenuto della pagina.

La produzione di layout liquidi, cioè di quei layout dove gli elementi della pagina riempiono l'intero contenitore dato dallo schermo, può non piacere a tutti i webdesigner che potrebbero desiderare di produrre una pagina la cui struttura sia collocata al centro, con un certo margine vuoto intorno alla struttura principale.
Il sistema di gran lunga più seguito è l'uso delle tabelle nel quale la tabella principale misura in genere 760 pixel di larghezza e nei cui elementi (celle e righe), si collocano i vari contenuti (menu, immagini, testo, filmati, ecc.).
Gli elementi grafici legati al layout, hanno quindi dimensioni precise che non devono essere superiori alle misure della tabella, pena una visualizzazione inadeguata.

L'altro metodo, argomento di questo articolo, è quello di impiegare, per le strutture della pagina, elementi di blocco (div) con misure espresse in valori percentuali e di inserire, per l'elemento <body>, un padding anch'esso espresso in valore percentuale.
Vediamo quindi di capire come realizzare la pagina che supponiamo debba avere la solita configurazione :
- Testata
- Colonna sinistra
- Colonna destra
- Pie di pagina
Il codice XHTML della pagina in argomento è quello riportato sotto :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Il padding nel body</table>
</head>
<body>
<!-- Contenitore generale -->
<div id="contenitore">
<!-- Testata -->
<h1 id="testata">Testata </h1>
<!-- /Testata -->
<!-- Colonna sinistra -->
<div id="colsin"> Colonna sinistra </div>
<!-- /Colonna sinistra -->
<!-- Colonna destra -->
<div id="coldes"> Colonna destra </div>
<!-- /Colonna destra -->
<!-- Pie di pagina -->
<div id="piede"> Pie di pagina </div>
<!-- /Pie di pagina -->
</div>
<!-- /Contenitore generale -->
</body>
</html>

Come potete vedere, la parte evidenziata di verde e sottolineata, fa riferimento al contenitore generale di tutti gli altri elementi e che risente in maniera diretta del padding che viene applicato all'elemento "body". E' altresi evidente come il codice sia commentato (testo evidenziato in rosso).
Ora andremo a vedere come è realizzato il CSS.Questo parte sempre dall'elemento più ancestrale che è il body :


body{margin : 0;
padding : 5%;
background : #ccc;
}

La parte evidenziata si riferisce all'attributo argomento di questo articolo. In questo caso è espresso in valori percentuali per adattarsi al meglio a seconda delle risoluzioni video impiegate. Qualunque sia la risoluzione video, la parte centrale della pagina si collocherà con i suoi confini, al 5% di distanza dai margini interni del contenitore progenitore, il "body" per l'appunto. Se usassimo valori assoluti mentre stiamo usando un monitor con risoluzioni elevate (1280x1024 px o 1600x1280px), il numero di pixel usato per assecondare il nostro senso estetico, potrebbe essere inadeguato a risoluzioni più piccole. Infatti impostare il padding a 200px su un monitor 1600x1280 produrrebbbe un contenuto di 1200px di larghezza, mentre in un monitor 800x600 produrrebbe un contenuto di appena 400px, decisamente ridicolo.

Quindi è il caso di parlare degli altri elementi, le cui dimensioni verranno espresse sempre in percentuale, come illustrato sotto. Iniziamo dal "Contenitore". Esso è deputato a contenere tutti gli altri elementi e si pone in diretto rapporto con il suo progenitore, il"body"


#contenitore{position : relative;
margin : 0;
padding : 0;
background : transparent;
}
La stringa evidenziata, indica che nel flusso dei dati, i contenuti del contenitore dovranno disporsi a seguito del contenitore stesso e non in maniera indipendente. Omettendo questa proprietà ed il relativo valore, i vari elementi della pagina si posizioneranno in modo indipendente e visivamente non si collocheranno all'interno del contenitore.

padding : 3px;
background : #999;
color : #000;
width : 99%;
border-bottom : 1px solid #000;
font : 95% verdana,arial,sans-serif;
}
La stringa evidenziata mostra che questo elemento si allarga a tutta la superficie disponibile datagli dal "contenitore".
#colsin{margin : 0;
padding : 3px;
float : left;
border-right : 1px solid #000;
border-left : 1px solid #000;
background : #ffc;
width : 78%;
font : 75% verdana,arial,sans-serif;
}
Qui si nota la larghezza che non è proprio quella indicata come logica. Ciò risiede in problemi legati ai browsers che interpretano non correttamente le misurazioni dei box. Occorre tenere in considerazione i bordi ed il padding che non fanno altro che allargare il box e farlo debordare oltre lo spazio concessolgi determinando l'allineamento alla riga sotto.

#coldes{margin-left : 1px;
padding : 2px;
float : left;
width : 20%;
background : transparent;
font : 75% verdana,arial,sans-serif;
}
In questo si nota il colore di fondo che è trasparente. Questo per evitare l'antiestetico effetto per il quale il box si interrompre all'interruzione dei contenuti e l'eventuale colore di fondo si interromperebbe in modo molto antiestetico.

#piede{margin : 0;
padding : 3px;
float : left;
width : 99%;
background : #999;
border : 1px solid #000;
font : 75% verdana,arial,sans-serif;
}
Si nota che per il piede valgono più o meno le stesse caratteristiche della testata.
Questo layout è stato testato con Opera 6.03, Mozilla 1.0, Icab 2.75 e Internet Explorer 5.0 tutti per Mac. E' stato anche testato con i seguenti browsers per Windows, Opera 7.21, Mozilla 1.4 e Slim Browser 3.85. Nessuno degli strumenti impiegati ha mostrato difetti di visualizzazione dati da errori di codice ne di impostazione. Icab, con la sua parziale implementazione di XHTML e il non completo supporto ai CSS1 e CSS2, ha mostrato una alterazione nella collocazione delle colonne.Osservate il risultato di questa costruzione.

Con lo stesso metodo e con enorme semplicità, è possibile produrre un layout con la presenza di tre colonne, come mostra il codice sottostante :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Il padding nel body</table>
</head>
<body>
<!-- Contenitore generale -->
<div id="contenitore">
<!-- Testata -->
<h1 id="testata">Testata </h1>
<!-- /Testata -->
<!-- Colonna sinistra -->
<div id="colsin"> Colonna sinistra </div>
<!-- /Colonna sinistra -->
<!-- Colonna centrale -->
<div id="colcen"> Colonna centrale </div>
<!-- /Colonna centrale -->
<!-- Colonna destra -->
<div id="coldes"> Colonna destra </div>
<!-- /Colonna destra -->
<!-- Pie di pagina -->
<div id="piede"> Pie di pagina </div>
<!-- /Pie di pagina -->
</div>
</body>
</html>
Rimane il contenitore degli elementi (evidenziato), mentre è stato aggiunto un nuovo elemento, evidenziato di blu e sottolineato, che è poi la colonna centrale.
Dal punto di vista del CSS, ci sono modificazioni alla sola area centrale (colonna sinistra, centrale e destra) per rispettare il vincolo delle dimensioni. Osservate sotto come sono cambiate le cose.

body{<!-- proprietà identiche al layout precedente -->
}

#contenitore{<!-- proprietà identiche al layout precedente -->
}

#testata{<!-- proprietà identiche al layout precedente -->
}

#colsin{<!-- le altre proprietà sono identiche al layout precedente -->
width : 20%;
}

#colcen{<!-- le altre proprietà sono identiche al layout precedente -->
width : 56%;
}

#coldes{<!-- le altre proprietà sono identiche al layout precedente -->
width : 20%;
}

#piede{<!-- proprietà identiche al layout precedente -->
}
Come potete osservare, le percentuali legate alla larghezza dei tre elementi, è considerevolmente cambiata e quel 4 % che manca al conteggio, è riservato al padding dei vari elementi ed ai bordi della colonna centrale.
Anche questo layout è stato testato con i browsers elencati in precedenza con lo stesso risultato, come potete osservare.

Conclusioni
Abbiamo visto come inserire un valore percentuale di padding per l'elemento <body> e quanto sia facile gestire l'aspetto di una pagina a qualsivoglia risoluzione schermo.
L'uso dei CSS e di XHTML, produce pagine leggere, chiare nella fase della gestione e, soprattutto, conformi alle regole espresse dal W3C riguardo agli standard ed all'accessibilità.

Data creazione : 20/02/2008 - 21:13
Ultima modifica : 20/02/2008 - 21:15
Categoria : Webdesign
Pagina letta 216 volte

Anteprima di stampa Anteprima di stampa     Stampa pagina Stampa pagina


Opinioni su questo articolo

Nessuno ha lasciato un commento.
Diventa il primo a farlo!


^ Torna in alto ^