Fijate que estás aplicando los mismos estilos a .imgwork y a ".imgwork a",
por ende el <a> se "escurre" dentro del div.El problema se soluciona si en
tu CSS eliminas la linea 176, es decir ".imgwork a". Yo acabo de vaciar
todos esos estilos con Firebug y ya no se ve como dices, solo hace falta
corregir el padding que se ve descentrado.
Saludos.
2009/9/21 jaume op <jaum...@gmail.com>
> Asi un poco a loco mira a ver esto, a mi me funciona pervectamente
>
> <style>
> *{margin:0; padding:0;}
> #contenedor {
> margin: 0px auto;
> width: 980px;
> }
>
> #contenido {
> width: 726px;
> float: right;
> border-left-width: 1px;
> border-left-style: dashed;
> border-left-color: #999999;
> padding-left: 20px;
> margin-top: 20px;
> margin-right: 10px;
> margin-bottom: 10px;
> margin-left: 10px;
> }
> .imgwork a img {border:1px solid !important; display:block; width:200px;
> height:150px;}/* el ancho de la imagen es lo que nos definira los anchos
> totales*/
> .imgwork {
> float:left;
> background: #FFFFFF;
> border-color:#CCCCCC;
> margin-bottom:40px;
> margin-right:20px;
> margin-top:20px;
> border-style:solid;
> border-width:1px 1px 2px 1px;
> height:100%;
> width:220px; /*total 220+2+20=242px;.. 242*6=722px,,,,*/
> position:relative; /*esto es para poder meter luego con absolute el
> parrafo, aunque meterlo dentro del a seria muchoi mas facil.*/
> }
>
> .imgwork a {
> float:left; display:block;
> color:#CCCCCC;
> background:#FFFFFF none repeat scroll 0 0;
> width:200px; /*width total 200+20=220px; calculamos el ancho para darle
> a imgwork*/ padding:20px 10px 60px 10px;
> }
> .imgwork a:hover {
> float:left;
> background-color:#999999;
> border-color:#CCCCCC;
> width:200px;
> padding:20px 10px 60px 10px;
> }
> .imgwork p{ position:absolute; top:200px; left:10px;} /*para meterlo dentro
> de imgwork a*/
> </style>
> </head>
>
> <body>
> <div id="contenedor">
> <div id="contenido">
> <div class="imgwork">
> <a title="Ruta de la Piedra. Biscarrués" rel="lightbox[roadtrip]"
> href="lightbox/images/print/r-piedra/image-1.jpg"><img alt="Guia"
> src="sangoogel.jpg" width="200px" height="150px" /></a>
> <p>Ruta de la Piedra</p>
> </div>
> <div class="imgwork">
> <a title="Salón Aragonés del libro de Naturaleza. Cartel y díptico"
> rel="lightbox"
> href="lightbox/images/print/salon-naturaleza/image-1.jpg"><img alt="Cartel"
> src="sangoogel.jpg" width="200px" height="150px"/></a>
> <p>Ruta de la Piedra</p>
> </div>
> <div class="imgwork">
> <a title="Ruta de la Piedra. Biscarrués" rel="lightbox[roadtrip]"
> href="lightbox/images/print/r-piedra/image-1.jpg"><img alt="Guias"
> src="sangoogel.jpg" width="200px" height="150px" /></a>
> <p>Ruta de la Piedra</p>
> </div>
> </div></div>
> </body>
> </html>
>
>
> El 21 de septiembre de 2009 11:58, mikel blonfu <jan...@gmail.com>
> escribió:
>
> > Tienes los estilos repetidos en ".imgwork" y en ".imgwork a". Borra del
> css
> > la clase .imgwork. Luego te quedará el párrafo fuera de la caja, tendrías
> > que meterlo dentro de la etiqueta <a>, quiza esto no sea muy correcto por
> > ser el enlace "inline" y el párrafo "block" aunque también puedes quitar
> la
> > etiqueta <p> y meter sólo el texto dentro del enlace y si te hiciera
> falta
> > para ajustar mejor los estilos colocar el texto en un span.
> >
> >
> >
> > El 21 de septiembre de 2009 09:23, Jesus Torralba <je...@riglos.com
> > >escribió:
> >
> > > Hola, gracias a todos por la ayuda pero todavía no funciona
> > > correctamente.
> > >
> > > Las imágenes salen descuadradas con un marco al lado como si tuviesen
> > > alguna propiedad heredada, no se que es exactamnete… brrrrr…
> > >
> > > Os paso de nuevo el código:
> > >
> > > - www.erespixel.com/Labs/Version_4.0/estilos_v4.css
> > > - www.erespixel.com/Labs/Version_4.0/work.html
> > >
> > >
> > >
> > > Saludos a todos/as.
> > > _______________________________________________
> > > Lista de distribución Ovillo
> > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > > http://lists.ovillo.org/mailman/listinfo/ovillo
> > >
> > _______________________________________________
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > http://lists.ovillo.org/mailman/listinfo/ovillo
> >
>
>
>
> --
> Saludos
> Jaume
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
Mario Álvarez
twitter: @magrio
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
