ciao, ho ripulito un po' il codice. conteneva anche errori gravi.
controlla le differenze tra il tuo e quello che ho scritto qui sotto.
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="PHP Studio">
<title>untitled</title>
<style type="text/css">
#pulsante
{
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
color: #fff;
padding: 10px 45px;
border: solid 1px #0076a3;
background:#0095cd ;
-moz-border-radius: 20px; /* #0095cd variando i px varia la curvatura del pulsante */
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0 6px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 6px 3px rgba(0,0,0,0.5);
box-shadow: 0 6px 3px rgba(0,0,0,0.5);
}
#pulsante:hover {
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -webkit-linear-gradient(top, #0078a5, #00adee);
background: -moz-linear-gradient(top, #0078a5, #00adee);
background: -ms-linear-gradient(top, #0078a5, #00adee);
background: -o-linear-gradient(top, #0078a5, #00adee);
background: linear-gradient(top, #0078a5, #00adee);
}
#pulsante:active {
position: relative;
top: 1px;
}
#pul:active {
position: relative;
top: 1px;
}
.flex {max-width: 100%}
</style>
</head>
<body>
<center><p><img class="flex" src="season.gif" alt="logo season ('non immagine non caricata')"></p></center>
<div id="Layer1" style="position:absolute;left:1060px; top:10px; width:80px; height:84px; z-index:2">
<input type="image" src="ita" id="pul1" onclick="location.href='http://www.slowdive.it'" >
</div>
<div id="Layer2" style="position:absolute; left:1100px; top:10px; width:80px; height:84px; z-index:2">
<input type="image" src="uki" id="pul2" onclick="location.href='http://www.slowdive.it'" >
</div>
<div id="Layer3" style="position:absolute; left:1140px; top:10px; width:80px; height:84px; z-index:2">
<input type="image" src="fra" id="pul3" onclick="location.href='http://www.slowdive.it'" >
</div>
<div id="Layer4" style="position:absolute; left:1180px; top:10px; width:80px; height:84px; z-index:2">
<input type="image" src="spa" id="pul4" onclick="location.href='http://www.slowdive.it'" >
</div>
<div id="Layer5" style="position:absolute; left:1220px; top:10px; width:80px; height:84px; z-index:2">
<input type="image" src="ger" id="pul5" onclick="location.href='http://www.slowdive.it'" >
</div>
<center>
<button id="pulsante" onclick=season>Home</button>
<button id="pulsante" onclick="location.href='chisiamo.html'">chi siamo</button>
<button id="pulsante">corsi</button>
<button id="pulsante">mermaid</button>
<button id="pulsante">Ambiente</button>
<button id="pulsante">Ambiente</button>
<button id="pulsante">Viaggi</button>
<button id="pulsante">Eventi</button>
<button id="pulsante">Diving</button>
</center>
</body>
</html>
il problema è procedurale e contestuale.
prima cosa se fai posizionamenti assoluti e con dimensioni fisse dei contenitori non ne uscirai mai.
quindi ragiona in maniera "elastica", cioè non dare mai per scontata la risoluzione del browser.
prova a ridisegnare la pagina assegnando dimensioni in percentuale, così ti avvicinerai a ciò che vuoi ottenere
posiziona gli elementi in maniera relativa, oppure allineali flottando.
personalmente terrei un solo contenitore ove mettere tutte le bandiere. bandiere che setterei con float:left per allinearle (ma è tutto da verificare)
altro: gli id devono essere unici ("id" sta per identificativo), non si possono duplicare all'interno di una pagina.
questo è solo un punto di partenza... buon lavoro