elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problema con CSS
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problema con CSS  (Leído 2,462 veces)
‭‭‭‭jackl007


Desconectado Desconectado

Mensajes: 1.403


[UserRPL]


Ver Perfil WWW
Problema con CSS
« en: 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
  1.  
  2.  
  3. <html><head>
  4. <link href="estilos.css" rel="stylesheet" type="text/css" />
  5.  
  6. </head>
  7. <body>
  8.  
  9. <div class="post-content">
  10.  
  11. <p>Parrafo 1</p>
  12. <p>Parrafo 2 - Parrafo 2 - Parrafo 2</p>
  13. <p>Parrafo 3 - Parrafo 3 - Parrafo 3 - Parrafo 3 </p>
  14.  
  15. <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>
  16. <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>
  17. <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>
  18. <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>
  19. <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>
  20. <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>
  21.  
  22.  
  23. </div>
  24. </body></html>
  25.  

estilos:
Código
  1. p {
  2. padding: 0px 0px 15px 0px;
  3. margin:0px;
  4.  
  5.  
  6. }
  7. img {
  8. float:left;
  9. }

Espero que alguien sepa como hacerlo.

GRACIAS


En línea

Nakp
casi es
Ex-Staff
*
Desconectado Desconectado

Mensajes: 6.336

he vuelto :)


Ver Perfil WWW
Re: Problema con CSS
« Respuesta #1 en: 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 :/


En línea

Ojo por ojo, y el mundo acabará ciego.
d3xf4ult


Desconectado Desconectado

Mensajes: 332


Ver Perfil WWW
Re: Problema con CSS
« Respuesta #2 en: 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
En línea

mit


Desconectado Desconectado

Mensajes: 830

¡Mit!


Ver Perfil WWW
Re: Problema con CSS
« Respuesta #3 en: 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
En línea

chocola

Desconectado Desconectado

Mensajes: 282



Ver Perfil
Re: Problema con CSS
« Respuesta #4 en: 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.
En línea

‭‭‭‭jackl007


Desconectado Desconectado

Mensajes: 1.403


[UserRPL]


Ver Perfil WWW
Re: Problema con CSS
« Respuesta #5 en: 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.

En línea

chocola

Desconectado Desconectado

Mensajes: 282



Ver Perfil
Re: Problema con CSS
« Respuesta #6 en: 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.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Problema BlueZScanner y problema de conexión
Hacking Mobile
Kasswed 3 6,236 Último mensaje 6 Mayo 2006, 22:04 pm
por Gospel
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines