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 <[email protected]> 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 <[email protected]
> >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 [email protected]
> > 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 [email protected]
> 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 [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
