Io lo rivedrei così:
codice:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titolo</title>
<style type="text/css">
<!--
body {
margin:0;
background-color: #ffffff;
background-image: url('GRADIENT.jpg');
background-repeat: repeat-x;
}
#wrapper {
width:100%;
background: url(CloudLeft.png) no-repeat left 200px;
}
#cloudRight {
background: url(CloudRight.png) no-repeat right 200px;
}
#header {
text-align:center;
padding-top:20px;
}
#content {
width: 792px;
height: 602px;
background: url('CONTENT.png') no-repeat left 25px; /* 25px è la distanza dell'immagine di sfondo dall'alto
per avere una sovrapposizione al centro con l'mmagine del menu */
margin:0 auto;
position:relative; /* perché il div follow è posizionato assolutamente */
padding-bottom:75px; /* spazio libero per il div follow, dato dall'altezza di follow + la sua distanza dal
basso */
}
#menu {
width: 649px;
height: 70px;
background: url('Menu.png') no-repeat;
margin:0 auto;
line-height:70px; /* per centrare verticalmente i link */
text-align: center;
}
#menu a {
font-family: tahoma;
font-size:24px;
font-weight: 600;
color: #fff;
text-decoration:none;
text-shadow: 1px 1px #69932d; padding:0 8px;
}
#menu a:visited {
text-shadow: 1px 1px #69932d;
}
#menu a:hover {
color: #5e9b1c;
text-shadow: 2px 1px #c4eb40;
}
#follow {
width: 100%;
height: 50px;
position: absolute;
bottom:25px;
left:30px;
}
#footer {
width: 100%;
height: 229px;
background: url('Footer2.png') repeat-x;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="cloudRight">
<div id="header">[img]LOGO.png[/img]</div>
<div id="content">
<div id="menu">
CHI SIAMO
COSA OFFRIAMO
CONTATTI
</div>
<div id="follow">[img]FollowFB.png[/img]
</div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
Cioè via quei div flottanti a destra e sinistra per avere gli sfondi delle nuvole, il primo può essere impostato su un contenitore generale che racchiuda tutta la struttura, per il secondo si aggiunge un ulteriore div. Poi sul content un position relative e sul div follow un posizionamento assoluto. Via quella larghezza di 1900 dal footer che poi ti obbliga a nascondere lo scrolling orizzontale. Poiché il tuo layout ha un'altezza precisa è inutile anche l'altezza del 100% sul body. Per evitare margini negativi sul content e farlo risalire sotto al menu, il menu è stato invece posizionato al suo interno e lo sfondo del primo posizionato un po' più in basso attraverso il background-position. Tolto anche un div inutile all'interno del menu. Prova il codice, giochicchiaci e buon lavoro. Gli indirizzi delle immagini sono da modificare
Permessi di invio
Rispondi quotando