14/01/2005, 13:15
| |||
| |||
| Una capa cambia de sitio en hacer rollover Hola a tod@s. Acabo de llegar al forum y espero beber de vuestra sabiduria  .Mi problemilla me intriga: he creado una capa que contiene otras dos, una con una imagen sin programación y la otra con tres botones CSS. Cuando se hace mouseover sobre los botones, la capa principal y su contenido se mueven hacia abajo, y cuando más pasas el ratón, más abajo se va  . Como es lógico, antes de ir más allá he de solucionar este asunto.Muchísimas gracias de antemano, Tanita |
|
14/01/2005, 13:19
| ||||
| ||||
| Hola Tanita Bienvenida al foro. Tendrías que poner el código que estás usando o, al menos, la parte que tenga que ver con tu problema. Saludos,  |
|
16/01/2005, 06:42
| |||
| |||
| Aquí va el código Sí, JavierB, me falta poner el código y también decir con que navegador me pasa, claro. Uso IE.5 (ya tuve otros más avanzados pero me daban problemas con el sistema y hasta abrieron la puerta a un spyware :-p , de manera que lo tuve que volver a cargar todo y mientras no pueda cambiar el PC o el sistema así se va a quedar, me temo) El código al completo:
Código:
La capa con el problema es: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Eagleye</title>
<style>
body{
background:#CF0!important; width: 100%; height:550px; overflow:hidden; margin:0px; padding:0px; font-family: Verdana!important, Arial; font-size: 12px;
}
#contenidor{
position:absolute; top: 0px; left:0px; height:438px; width:100%; background:transparent;overflow:hidden:
}
#capçalera{
position:absolute; top: 0px; left:0px; height:93px; width:100%; background:transparent; overflow:hidden;
}
.capçal{
position:relative; margin-top:0px;margin-left:0px; height:70px; width:100%; background:transparent; background-image:url(imats/capçal.jpg); background-repeat:no-repeat; background-attachment:fixed;
}
.menu{
position:relative; margin-top: 0px; margin-left:0px; width:100%; height:21px; background:#CF0;overflow:hidden
}
.botons{
float:left; margin-top:0px; margin-left:0px;border:solid green 1px; width:99px; height:21px; padding:2px; background:#9C3; text-align:center;
}
#b1,#b6{
width:100px;
}
a.botons{
text-decoration:none; color:#000
}
a:hover.botons{
text-decoration:none; background:#CF6
}
#subcontenidor0{
position:absolute; top:93px; left:0px; width:100%;height:342px; background:transparent; z-index:0;
}
.peucas{
position:relative; margin-top:250px; margin-left:0px;height:80px; width:100%; border-top: solid green 1px; background:#9C3
}
.quies{
float:left; margin-top:20px; margin-left:10px; width:315px;height:10px; background:transparent; clear:none; font-size:19px; font-weight:bold
}
.peuaut{
position:relative; margin-top:-7px; margin-left:0px;height:20px; width:100%; border-top: solid green 1px; background:#9C3; text-align:right; background-image:url(imats/tirainf.gif);padding-right:27px
}
.autoria{
font-size:9px;
}
#subcontenidor1{
position:absolute; top:93px; left:0px; width:100%;height:342px; background:transparent; z-index:2;
}
.submenu{
float:left; margin-top:30px; margin-left:10px; width:100px;height:10px; background:transparent; border-left:solid #9C3 2px; clear:none;
}
.sbotons{
float:left; margin-top:0px; margin-left:20px;border-bottom:solid #9C3 2px; width:180px; height:25px;font-size: 12px; padding:2px; background:transparent; text-align:left;
}
a.sbotons{
text-decoration:none; color:#000
}
a:hover.sbotons{
text-decoration:none; background:#9C3
}
.fotoiad{
float:right; margin-top:30px!important; margin-right:10px!important; height:241px; width:552px;
}
.nomcas{
float:right;margin-top:0px; margin-right:0px; height:35px; width:552px; text-align:right; font-size: 9px; padding: 4px 4px
}
.pags{
float:left; margin-top:0px; margin-left:0px; height:199px; width:150px; background:transparent;
}
a.minip{
text-decoration:none; color:#000;
}
a:hover.minip{
text-decoration:none; background:#fff;
}
.minip{
float:right; margin-top:135px;height:35px; width:25px; background:#CCC;border:solid #333 1px;font-size:9px;border-right:solid #666 2px;border-bottom:solid #666 2px;
}
#mp2,#mp3{
margin-left:5px;
}
#mp3{
margin-right:15px;
}
.fotocas{
float:right;margin-top:0px; margin-right:0px; height:217px; width:400px; background:transparent; background-image:url(imats/zengard.jpg);background-repeat:no-repeat;background-position:center bottom; border-right:solid green 4px;border-bottom:solid green 4px;
}
</style>
</head>
<body>
<div id="contenidor">
<div id="capçalera">
<div class="capçal"></div>
<div class="menu"> <span id="b1" class="botons"></span> <a href="#" id="b2" class="botons">Home</a>
<a href="#" id="b3" class="botons">Portfolio</a> <a href="#" id="b4" class="botons">About</a>
<a href="#" id="b5" class="botons">Process</a> <a href="#" id="b6" class="botons">Contact</a>
<a href="#" id="b7" class="botons">Map</a> <span id="b8" class="botons"></span>
</div>
</div>
<div id="subcontenidor0">
<div class="peucas"> <span class="quies">Example Plana Ex.</span> </div>
<div class="peuaut"> <span class="autoria">Disseny i programació: #*$!#*$! .:. 2005</span> </div>
</div>
<div id="subcontenidor1">
<div class="submenu">
<a href="#" id="sb1" class="sbotons">Link 1</a>
<a href="#" id="sb2" class="sbotons">link 2</a>
<a href="#" id="sb3" class="sbotons">Link 3</a>
<a href="#" id="sb4" class="sbotons">Link 4</a>
<a href="#" id="sb5" class="sbotons">Link 5</a>
<a href="#" id="sb6" class="sbotons">Link 6</a>
<a href="#" id="sb7" class="sbotons">Link 7</a>
</div>
<div class="fotoiad">
<span class="nomcas">www.Examplesite.org</span>
<div class="pags">
<a href="#" id="mp3" class="minip">3</a>
<a href="#" id="mp2" class="minip">2</a>
<a href="#" id="mp1" class="minip">1</a>
</div>
<span id="cas1" class="fotocas"></span>
</div>
</div>
</div>
</body>
</html>
<div class="fotoiad">...</div> Gracias! Tanita |
