Hola, resulta que tengo un problemita que me ha dejado pensando y hasta ahora (un par de horas), no logre solucionar, aqui les comento a ver si alguien sabe como hacerlo.
Resulta que no puedo cambiar la forma de los datos ya que eso lo hace wordpress internamente (lo que está dentro del div: post-content).
Y tengo que con CSS poder conseguir que las imagenes estén alineadas y que los parrafos tengan una separación entre ellos, no se si me explico.
Por ejemplo si pongo el atributo del css padding: 0px, consigo que estén alineadas las imagenes, pero no tengo separacion entre los parrafos.
La idea es poder cojer el selector "p" que contiene a las imagenes y agregarle la regla de padding: 0px, (el "p" de los parrafos tendria padding-bottom:15px, y asi todo está solucionado).
Puedo selccionar el "a" o "img" dentro del "p" de las imagenes, pero agregarles el atributo del padding:0px, no consige nada, ya que el "p" es el que tiene que recibir el atributo.
index.html
<html><head>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="post-content">
<p>Parrafo 1</p>
<p>Parrafo 2 - Parrafo 2 - Parrafo 2</p>
<p>Parrafo 3 - Parrafo 3 - Parrafo 3 - Parrafo 3 </p>
<p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p>
<p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p>
<p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p>
<p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p>
<p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p>
<p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p>
</div>
</body></html>
estilos:
p {
padding: 0px 0px 15px 0px;
margin:0px;
}
img {
float:left;
}
Espero que alguien sepa como hacerlo.
GRACIAS
Mostrar Mensajes
