Problema con un div

miriamgomez · #1 (**permalink**) 18/10/2013, 13:23

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">
<head>
<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" />
 
 
 
 
<title>Zoomer for jQuery</title>
 
 
 
 
<!--[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]-->
 
 
</head>
 
<body>
 
   
 
    <div id="page">
    
 
        <div id="content">
        
        <div class="container">
         
            <ul class="thumb">
                <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>
            </ul>
        
        </div>
        
        </div>
        
        
    
<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});
});
</script>
</div>
 
 
</html>

jonni09lo · #2 (**permalink**) 18/10/2013, 14:40

Si quieres que #cuerpo quede centrado usa

Código CSS:

Ver originalmargin: 0 auto;

Saludos

miriamgomez · #3 (**permalink**) 18/10/2013, 14:53

Hola:

no me explique bien, no quiero centrarlo, sino anular el espacio que se desplaza a la derecha.

Un saludo

jonni09lo · #4 (**permalink**) 18/10/2013, 15:01

Mira que colocar a .title

Código CSS:

Ver originalleft:0;

Quita lo desplazado, aunque comparando con el original hay unas pequeñas diferencias... Seguiré viendo.

Saludos

jonni09lo · #5 (**permalink**) 18/10/2013, 15:06

Hola después de haber revisado bien el lio es algo muy simple

Código CSS:

Ver original#cuerpo {
    text-align: center;
}

Eso causa tu problema.

Con que añadas a ul.thumb

Código CSS:

Ver originaltext-align:left;

Se soluciona.

PD con ese código no necesitas lo que te dije de left:0

Saludos

miriamgomez · #6 (**permalink**) 19/10/2013, 00:59

Una maquina¡¡¡¡¡¡

un saludo y mil gracias