Allora io vedo in quell'immagine:
- un blocco a sinistra con logo e nomi
- nel blocco a dx vedo un header, un corpo, un footer.
Quindi la struttura logica sara`:
codice:
<body>
<div id="logoNomi">
[img]...[/img]
<ul id="persone">[*]primo nome[*]secondo nome
...[/list]
</div>
<div id="contenuto">
<div id="header">
... </p>
</div>
<div id="corpo">
....
</div>
<div id="footer">
... </p>
</div>
</div>
</body>
Solo a questo punto posso iniziare a posizionare i blocchi:
codice:
html,body {
font: 100%; /* eventualmente selezionare il font-family */
width: 100%;
}
body {
background: /* azzurro che vuoi */;
}
#logoNomi {
float: left;
width: 30%;
margin: 0;
padding:0;
border: 0;
}
#contenuto {
float: left; /* oppure right */
width: 69%; /* lascio 1% per gli arrotondamenti */
margin: 0;
padding:0;
border: 0;
}
#logo {
width: /* quello che e` */;
height: ...;
margin: auto;
}
#persone {
list-style-type: none; /* non ricordo se va messo qui o nel li */
}
#persone li {
font-variant: small-caps;
}
#header {
width: 100%;
...
}
#corpo {
width: 100%;
...
}
#footer {
width: 100%;
...
}
...
Si procede poi partendo dall'esterno verso i particolari.