Anzitutto devi sistemare il codice HTML, che sia semanticamente corretto:
codice:
<body>
<div id="tutto">
<div id="header">
<h1>TOSCOWINES<h1>
<h2>Il nuovo modo di pensare il vino</h2>
<ul id="menu">[*]home[*]chisiamo
...[/list]
</div>
<div id="corpo">
<div id="toscano" class="colonna">
<img ...>
<h3>Il vino toscano...</h3>
Si dice Toscana ...</p>
</div>
<div id="confezioni" class="colonna">
<img ...>
<h3>Confezioni pratiche ...</h3>
ToscoWines ...</p>
</div>
<div id="sfuso" class="colonna">
<img ...>
<h3>IL nuovo modo ...</h3>
Allora, cosa ...</p>
</div>
<div id="brochure" class="mezzo">
.....
</div>
<div id="contatti" class="mezzo">
.....
</div>
</div>
</body>
Poi occorre dare una forma al tutto mediante i CSS:
codice:
html, body {
font: 100%;
width: 100%;
bacground-color: ...; /* mattone carico */
text-align: center; /* solo per IE */
}
#tutto {
margin: 5px auto; /* centrare in browser standard, e lasciare bordo in alto e basso */
text-align: left;
background: white; /* per fare le cornici bianche */
width: ???; /* vedi se darlo in % o in px */
}
#header {
margin: 5px; /* valore a caso: vedi tu quanto serve */
background-color: ...; /* marron */
background-image: url(...); /* vigneti e ToscoWines */
}
h1 {
margin-left: -1000px; /* non visualizza titolo */
}
h2 {
right: 0;
font-size: 300%;
color: white;
background-color: ...; /* marron */
}
.colonna {
width: 25%;
margin: ...;
float: left;
}
.mezzo {
width: 48%;
margin: ...;
float: left;
}
...
Rispondi quotando
