Me estoy volviendo loca¡¡¡¡
Trato de explicar mi caso:
Como podeis ver en la siguiente url:
http://www.castilloshinchablescarmon...sincuerpo.html
Es un fantástico visor de imágenes que al pasar por encima el ratón se aumenta la imagen y se ve el título.
Adjunto el código de la hoja de estilo:
Código CSS:
Ver original* {margin: 0; padding: 0;}
#page{
position: relative;
width: 850px;
font-family: verdana;
font-size: 12px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
ul.thumb {float: left;list-style: none;margin: 0; padding: 40px;width: 660px;background-color: white;}
ul.thumb li {margin: 0; padding: 5px;float: left;position: relative;width: 110px;height: 110px;}
ul.thumb li img {width: 100px; height: 100px;border: 1px solid #ddd;padding: 5px;background: #f0f0f0;position: absolute;left: 0; top: 0;-ms-interpolation-mode: bicubic; }
ul.thumb li img.hover {margin-top:15px;background:url(thumb_bg.png) no-repeat center center;border: none;}
.title{position:absolute;width:185px;height:35px;margin:0;font-weight:900;background:url(blue.png) no-repeat center center;padding:17px 0 0 ;text-align:center; color: #fff; }
Hasta aqui todo normal; pero en cuanto intento añadir un campo llamado cuerpo que lo engloba todo, con las siguientes características:
Código CSS:
Ver original#cuerpo {
width: 1000px;
text-align: center;
overflow: hidden;
background-image: url(../objeto/cuerpo.fw.png);
background-repeat: repeat-y;
}
Pues todo se desplaza a la derecha, tanto las imagenes como el titulo.
http://www.castilloshinchablescarmon...es/zoomer.html
No doy con el fallo a ver si me podéis echar una mano.
Os adjunto el codigo:
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="../zoom/zoomer.css" media="screen" />
<!--[if IE 6]>
<style type="text/css" media="screen">
ul.thumb li img.hover {
margin-top:15px;
background:url(thumb_bg.gif) no-repeat center center;
border: none;
}
ul.thumb li .title{color:#fff;width:185px;height:50px;margin:0;font-weight:900;background:url(title.gif) no-repeat center center;padding:17px 0 0 0;text-align:center;}
</style>
<![endif]-->
<li><a href="../zoom/www.creatividadesweb.com"><img src="../zoom/robots.jpg" alt="Robots like cameras" /></a></li> <li><a href="#"><img src="../zoom/monster.jpg" alt="Monsters!" /></a></li> <li><a href="#"><img src="../zoom/santa.jpg" alt="Santa down under" /></a></li> <li><a href="#"><img src="../zoom/thumb6.jpg" alt="Sponguebob!" /></a></li> <li><a href="#"><img src="../zoom/thumb7.jpg" alt="Star Wars" /></a></li> <li><a href="#"><img src="../zoom/hulk.jpg" alt="Hulk Smash!" /></a></li> <li><a href="#"><img src="../zoom/dino.png" alt="Dinosaur time" /></a></li> <li><a href="#"><img src="../zoom/orange.jpg" alt="Orange car" /></a></li> <li><a href="#"><img src="../zoom/alien.jpg" alt="Aliens!" /></a></li> <li><a href="#"><img src="../zoom/supe.jpg" alt="It's Superman!" /></a></li> <li><a href="#"><img src="../zoom/garfield.jpg" alt="Where's my lasagne?" /></a></li> <li><a href="#"><img src="../zoom/bridge.jpg" alt="The bridge at Sunset" /></a></li> <li><a href="#"><img src="../zoom/peanuts.jpg" alt="Peanuts!" /></a></li> <li><a href="#"><img src="../zoom/thumb5.jpg" alt="1956 Yellow Car" /></a></li> <li><a href="#"><img src="../zoom/thumb4.jpg" alt="Ooooh. Pretty" /></a></li> <li><a href="#"><img src="../zoom/thumb3.jpg" alt="Lets build something" /></a></li> <li><a href="#"><img src="../zoom/thumb2.jpg" alt="Puppy love" /></a></li> <li><a href="#"><img src="../zoom/thumb1.jpg" alt="It's a Toy Story" /></a></li>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="../zoom/zoomer.js"></script> <script type="text/javascript"> $(document).ready(function(){
$('ul.thumb li').Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});