Problema con CSS

Iniciado por ‭‭‭‭jackl007, 11 Febrero 2011, 03:29 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

‭‭‭‭jackl007

11 Febrero 2011, 03:29 AM
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
Código (html) [Seleccionar]



<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:
Código (css) [Seleccionar]

p {
padding: 0px 0px 15px 0px;
margin:0px;


}
img {
float:left;
}

Espero que alguien sepa como hacerlo.

GRACIAS

Nakp

#1
11 Febrero 2011, 03:48 AM
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 :/
Ojo por ojo, y el mundo acabará ciego.

d3xf4ult

#2
11 Febrero 2011, 15:56 PM
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

mit

#3
11 Febrero 2011, 16:14 PM
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

chocola

#4
11 Febrero 2011, 17:32 PM
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.

‭‭‭‭jackl007

#5
11 Febrero 2011, 20:55 PM
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.

chocola

#6
12 Febrero 2011, 00:05 AM
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.
Imprimir
Ir Arriba Páginas1
Acciones del Usuario