Salve, vado subito al dunque, ho creato la mia paginetta dove in alto ci sono dei pulsanti a forma di segnalibri, nascosti parzialmente dal div content tranne uno che viene visualizzato per intero. al passaggio del mouse sul div segnalibro, vorrei che cambiasse il suo margin-top, in modo che si alzi.
Io ho fatto in questo modo, ma in firefox a quanto pare il div nascosto non scatena nessun evento:
html:
css:Codice PHP:<body>
<div id="conteiner">
<div id="ombra_sxtop">
</div>
<div id="ombra_top">
</div>
<div id="ombra_dxtop">
</div>
<div id="ombra_sx">
</div>
<div id="content">
<script language="javascript">
function alza(linguetta)
{
document.getElementById(linguetta).style.marginTop="-75px";
}
function abbassa(linguetta)
{
document.getElementById(linguetta).style.marginTop="-65px";
}
</script>
<div id="top">
[img]img/logo-carretto.png[/img]
<div id="linguetta_rossa" onmouseover="javascript:alza('linguetta_rossa');return false;" onmouseout="javascript:abbassa('linguetta_rossa');return false;">
<div class="btt">
<span class="pulsanti">
Azienda </span>
<div class="sottomenu">
<span class="txtpic">
bla bla bla </span>
</div>
</div>
</div>
<div id="linguetta_verde" onmouseover="javascript:alza('linguetta_verde');return false;" onmouseout="javascript:abbassa('linguetta_verde');return false;">
<div class="btt">
<span class="pulsanti">
Prodotti </span>
</div>
</div>
<div id="linguetta_blu" onmouseover="javascript:alza('linguetta_blu');return false;" onmouseout="javascript:abbassa('linguetta_blu');return false;">
<div class="btt">
<span class="pulsanti">
Contattaci </span>
</div>
</div>
</div>
<div id="testo">
<span class="txtVerde">
bla bla bla
</span> </div>
<div id="testodx">
<span class="txtVerde">
bla bla bla
</span>
</div>
<div id="SlideFoto">
<div id="NomeFoto">
<span class="txtNomeFoto" id="ClassNomeFoto">
</span>
</div>
<img class="FotoAnteprima" id="SrcFoto" />
</div>
</div>
<div id="ombra_dx">
</div>
<div id="ombra_sxbottom">
</div>
<div id="ombra_bottom">
</div>
<div id="ombra_dxbottom">
</div>
<div id="footer">
<span class="txtpic">
bla bla bla
</span>
</div> </div>
</body>
Codice PHP:/*stili per il layout fisso con altezza minima*/
html,body{
margin: 0;
padding:0;
height:100%;
}
body{
background: url(img/sfondo.jpg);
font-family: arial,sans-serif;
font-size: 76%;
text-align: center;
}
div#conteiner{
position:relative;
width: 760px;
height:1px;
min-height:100%;
margin: 0 auto;
overflow:hidden;
text-align: left;
z-index:1;
}
div#top{
height: 96px;
margin-top:-60px;
z-index: 4;
float:right;
width:746px;
}
div#content {
float:left;
text-align: left;
background:#FFF5D3 url(img/sfondo_pagina.jpg) repeat-x;
width: 746px;
height:1px;
min-height:82.5%;
z-index:3;
}
div#footer{
width: 740px;
height: 7.5%;
z-index: 2;
margin-left:10px;
text-align:center;
}
div#testo{
position:relative;
float:left;
z-index:6;
width:370px;
text-align:justify;
margin:10px;
line-height:18px;
}
div#testodx{
position:relative;
z-index:6;
width:240px;
text-align:justify;
margin:10px;
margin-left:490px;
line-height:18px;
}
div#linguetta_rossa{
float:left;
background:url(img/linguetta_rossa.png) no-repeat;
width:88px;
height:195px;
margin-top:-65px;
margin-left:390px;
position:relative;
z-index:300;
}
div#linguetta_verde{
float:left;
background:url(img/linguetta_verde.png) no-repeat;
width:88px;
height:195px;
margin-top:-65px;
margin-left:2px;
position:relative;
z-index:-30;
}
div#linguetta_blu{
float:left;
background:url(img/linguetta_blu.png) no-repeat;
width:88px;
height:195px;
margin-top:-65px;
margin-left:3px;
position:relative;
z-index:-31;
}
div#SlideFoto{
position: absolute;
background:url(img/ombra_foto.png) no-repeat;
clear:both;
margin-left:3px;
bottom:5.9%;
width: 740px;
height:319px;
text-align:center;
}
div#NomeFoto{
position: absolute;
margin-top:250px;
width:300px;
height:30px;
background:url(img/sfondo_nomefoto.png);
line-height:30px;
}
/* Ombre */
div#ombra_top{
float:left;
margin-top:96px;
background:url(img/ombra_top.png);
width: 746px;
height:6px;
}
div#ombra_bottom{
float:left;
background:url(img/ombra_bottom.jpg);
width: 746px;
height:6px;
margin: 0 auto;
}
div#ombra_sxtop{
float:left;
margin-top:96px;
background:url(img/ombra_sx_top.jpg);
width: 7px;
height:6px;
}
div#ombra_dxtop{
float:right;
margin-top:96px;
background:url(img/ombra_dx_top.jpg);
width: 7px;
height:6px;
}
div#ombra_sx{
float:left;
background:url(img/ombra_sx.jpg);
width: 7px;
height:1px;
min-height:82.5%;
}
div#ombra_dx{
float:right;
background:url(img/ombra_dx.jpg);
width: 7px;
height:1px;
min-height:82.5%;
}
div#ombra_sxbottom{
float:left;
background:url(img/ombra_sx_bottom.jpg);
width: 7px;
height:7px;
}
div#ombra_dxbottom{
float:right;
background:url(img/ombra_dx_bottom.jpg);
width: 7px;
height:7px;
}
/*STILI*/
.pulsanti{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#E8E8E8;
display:block;
}
.btt{
width:88px;
height:30px;
margin: 0 auto;
text-align:center;
line-height:30px;
}
.sottomenu{
width:73px;
height:100px;
margin: 20px auto;
line-height:13px;
text-align:left;
}
.txtpic{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
color:#E8E8E8;
}
.txtNomeFoto{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#FFFFFF;
}
.txt{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#000000;
}
.txtVerde{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:15px;
color:#C6D318;
font-weight:bold;
}
.FotoAnteprima{
margin-top:19px;
}
Rispondi quotando