23 marzo 2009

Layout Centrato

Una semplice pagina resa impostando #container con i margini superiore e inferiore a 0, e il margine sinistro e destro su auto. La larghezza width impostata a 500px, e un blockquote come sopra impostato opx margine superiore e inferiore, e margine sinistro e destro a 100px.

Per quanti non sapessero come funzionano i margini, semplicemente si segue il senso orario, vale a dire: margine-superiore, margine-destro, margine-inferiore, e margine-sinistro.

Vediamo il markup html.

<html>

<body>


<div id="container">

<h1>A Title</h1>

<h2>A Sub Title</h2>

<p>Tristique quis, convallis ac, tempor eu, nisl. Morbi mauris.
a that will live on through the generations.</p>

<blockquote>

<p>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi interdum nisi vitae neque."</p>

</blockquote>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

<p>Nunc interdum. Nam eros urna, tristique quis,...</p>

<p>Praesent dictum, risus id feugiat dapibus,...</p>

</div>

</body>

</html>


E le regole Css.


<head>

<style type="text/css">
body {
font: 62.5%/1.5 verdana, arial, helvetica, sans-serif;
color: #000000;
background: #ffffff;
padding: 20px;

}

#container {
font-size: 1.2em;
line-height: 1.5em;
margin: 0 auto;
width: 500px;
}

h1 {
font: 1.5em/1.8em verdana, arial, helvetica, sans-serif;
text-transform: uppercase;
}

h2 {
font:1.2em verdana, arial, helvetica, sans-serif;
text-transform: uppercase;
}

blockquote {
margin: 0 100px;
}

blockquote p {
font-family: "Monotype Corsiva", gautami, serif;
font-size: 1.5em;
}

</style>

</head>
Questo e il risultato finale.

Nessun commento: