11 settembre 2009

Un Layout con il Body Centrato

Come creare un layout a una colonna centrata con dei semplici paragrafi e alcune regole CSS.

Ecco come procedere, inseriamo una serie di paragrafi <p> e </p> tanti quanti ne abbiamo bisogno per contenere i brani di testo che andranno a formare il nostro documento web. Io ho inserito anche un titolo di primo livello <h1> </h1>, ma nulla ci vieta di avere altre opzioni del tipo titoli di secondo livello <h2> </h2> inserimento di classi o altro. Un esempio specifico potrebbe essere quello di inserire una classe che ci permette di abbellire per ogni inizio di paragrafo una first-letter con una immagine o un font particolare. Ma questo lo lascio decidere alla vostra inventiva.

Questo e l' esempio abbreviato dei nostri paragrafi


<h1>Colonna Centrata</h1>

<p> Hypertext Transfer Protocol -- HTTP/1.1Status of this Memo...</p>

<p>Transferred as the payload of a request orresponse...</p>

<p>Scannot be used by a server that is acting as a tunnel...</p>

<p> A server that is acting as a tunnel...</p>

<p>HTTP cachable response is allowed ...</p>


Qui le nostre regole CSS:

Inserite per lo sfondo della pagina il colore nero


html { background: #000000; }

Mentre per il corpo del documento, io ho inserito uno sfondo bianco, evidenziato da un bordo di 4pixel tratteggiato(dashed) grigio che da un effetto trasparenza del tipo PNG(a scacchiera)che fa tanto moda nei tutorials con photoshop, il padding di 40 pixel e i margini sinistro e destro impostati ad auto in modo che si adattino alla finestra del browser. Mentre la larghezza a 40 em se questo serve a non fare collassare il vostro layout, potete "mischiare" sia pixel che em.

Ecco il CSS restante per il body

body {
background: #ffffff;
border: 4px dashed silver;
padding: 40px;
margin-left: auto;
margin-right: auto;
width: 40em;
}

E questa e la cattura della schermata per mostrarvi il lavoro finale

Nessun commento: