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
pues solo con css no se puede :P no puedes acceder al parent de una img, con jquery podrias hacerlo con $('img:parent p') o similar xD pero solo con css no :/
No se si te he entendido correctamente... Pero si pruebas con añadir dos clases nuevas. Una de ellas englobaría a los párrafos de texto y otra a todas las imágenes. Después esta clase (<span class="NOMBREDELACLASE">contenido</span>) la puedes referenciar en la hoja de estilos CSS (.NOMBREDELACLASE).
No se si voy encaminado hacía lo que preguntas concretamente...
Salu2
Segun entiendo la opcion de d3xf4ult es la que te sirve, precisamente para eso son las clases para hacer referencias especificas a los selectores que quieras como es en este caso, de igual manera te dejo un texto donde creo te aclarara tu duda:
http://www.librosweb.es/css/capitulo2/selectores_basicos.html
Saludos
buenas he visto lo que tienes puesto y he ententado hacer lo que tu dices haciendo el minimo cambio espero que te sirva aqui te dejo la hoja de estilo css y el html
<html><head>
<link rel="STYLESHEET" type="text/css" href="estilos.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>
<div class="uno" >
<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>
<div class="dos" >
<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>
<div class="dos" >
<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>
</div>
</body></html>
hoja de estilo :rolleyes:
p {
padding: 0px 0px 0px 0px;
margin:0px;
}
img {text-align:center;
margin-top:50px;
}
.uno {text-align:center;
width:33%;
height:33%;
float:right;
}
.dos {width:33%;
height:33%;
float:left;
text-align:center;
}
espero que te haya podido ayudar ;D
suerte.
Amigos gracias por responder, como les dije: No puedo modificar ni alterar el codigo del archivo index.html
solo puedo agregar reglas al archivo css. Si pudiera modificar el index.html es pan comido.
PD: si revise en librosweb.es, pero no consegui acceder a ese selector.
@nakp, pense que si se podia, creo que seguire tu consejo y usare javascript.
wenas noches jackl007 solo decirte que eres exigente eh ;D
bueno si solo puedes tocar la hoja de estilos entonces seria asi :
p {
padding: 0px 0px 0px 0px;
margin:0px;
}
img {text-align:center;
margin:50px 50px 50px 50px;
clear:right;
float:left;
}
asi consigues los mismo sin modificar la index.html
espero que ahora si te sirva
eso si lo abres con el explorador maximizado si ve de una manera y si no lo esta si ve de otra es que hoy es viernes y son las 12 de la noche y tengo k salir
de todas maneras cuentanos si asi si te ha resuelto el problema
y si no di nos como los has echo ;D
suerte.