Foros del Web » Creando para Internet » CSS »

Una capa cambia de sitio en hacer rollover

Estas en el tema de Una capa cambia de sitio en hacer rollover en el foro de CSS en Foros del Web. Hola a [email protected] Acabo de llegar al forum y espero beber de vuestra sabiduria . Mi problemilla me intriga: he creado una capa que contiene ...
  #1 (permalink)  
Antiguo 14/01/2005, 13:15
 
Fecha de Ingreso: enero-2005
Mensajes: 3
Antigüedad: 12 años, 11 meses
Puntos: 0
Una capa cambia de sitio en hacer rollover

Hola a [email protected] 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
  #2 (permalink)  
Antiguo 14/01/2005, 13:19
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,
  #3 (permalink)  
Antiguo 16/01/2005, 06:42
 
Fecha de Ingreso: enero-2005
Mensajes: 3
Antigüedad: 12 años, 11 meses
Puntos: 0
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:
<!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>
La capa con el problema es:

<div class="fotoiad">...</div>

Gracias!

Tanita
  #4 (permalink)  
Antiguo 16/01/2005, 07:38
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
A mi en Firefox 1 y en Internet Explorer 6 no me pasa eso. Eso sí, en Firefox veo las letras tipo serif, cuando en Internet Explorer se ven tipo sans-serif
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:55.