ciao a tutti,
è da un po che ci sto lavorando ma senza aver successo:
Questo è l' HEAD
Codice HTML:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mostra o nascondi un div</title>
<link rel="stylesheet" type="text/css" href="stile.css">
<link rel="stylesheet" type="text/css" href="../style.css">
<script language="javascript">
function pulsante1on() {
document.getElementById("pulsante1").style.display="block";
}
function pulsante1off() {
document.getElementById("pulsante1").style.display="none";
}
</script>
<script language="javascript">
function pulsante2on() {
document.getElementById("pulsante2").style.display="block";
}
function pulsante2off() {
document.getElementById("pulsante2").style.display="none";
}
</script>
e cosi via fino al settimo...
Invece questi sono i div a cui sono riferiti:
Codice HTML:
<div id="pulsante1" class="content" style="display: none;">
<div id="pulsante2" class="content" style="display: none;">
e cosi via fino al settimo...
E questo è il css dei 2:
Codice:
.content {
background-color: transparent;
height: 200px;
left: 50%;
margin-left: -400px;
margin-top: -223px;
position: absolute;
top: 50%;
width: 800px;
}
Il problema è che la pagina ha lo scrolling e se clicco il primo bottone mi fa vedere il div centrato sia verticalmente che orizontalmente mentre se vado a cliccare il sesto o il settimo pulsante devo tornare su all' inizio dell pagina per vedere il div.
Soluzioni? Ho cercato e trovato un po' di codici un javascript ma non riesco ad implementarli e a farli funzionare.
Grazie mille per le risposte che mi darete.
P.S. il position absolute è necessario perchè devo sovrapporlo a una tabella a meno che esiste un altro modo per fare ciò.