Foros del Web » Creando para Internet » CSS »

Forma de titular

Estas en el tema de Forma de titular en el foro de CSS en Foros del Web. Estimados, alguien sabe como puedo hacer en wordpress algo así: Imagen del post queda en la protada, pero, debajo del título y un texto.... [IMG] ...
  #1 (permalink)  
Antiguo 25/09/2015, 07:42
Avatar de admoro  
Fecha de Ingreso: agosto-2005
Ubicación: Prov. de Bs As. Argentina
Mensajes: 435
Antigüedad: 18 años, 8 meses
Puntos: 3
Pregunta Forma de titular

Estimados, alguien sabe como puedo hacer en wordpress algo así:

Imagen del post queda en la protada, pero, debajo del título y un texto....

[IMG][/IMG]
  #2 (permalink)  
Antiguo 25/09/2015, 14:05
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 19 años, 11 meses
Puntos: 832
Respuesta: Forma de titular

Amigo eso lo logras posicionando los elementos de forma absoluta. Paso tu pregunta a un foro donde te ayudarán mejor.
  #3 (permalink)  
Antiguo 25/09/2015, 20:01
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 7 meses
Puntos: 39
Respuesta: Forma de titular

Otra solución es usando la imagen destacada como fondo de un div con un padding-top de aprox. 100px...
__________________
velarde23.com - Soluciones Web
  #4 (permalink)  
Antiguo 27/09/2015, 13:49
Avatar de admoro  
Fecha de Ingreso: agosto-2005
Ubicación: Prov. de Bs As. Argentina
Mensajes: 435
Antigüedad: 18 años, 8 meses
Puntos: 3
Respuesta: Forma de titular

Gracias amigos, aún no logré quede como deseo, sigo intentando!
  #5 (permalink)  
Antiguo 27/09/2015, 19:54
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: Forma de titular

mira amigo, un ejemplo ;)

Código HTML:
Ver original
  1. <div id="pst">
  2.   <div><img src="//lorempixel.com/300/180" /><span>Texto, Texto, Texto y mas Texto<br>Texto, Texto y mas Texto</span>
  3.     <p>27 Septiembre, 2015</p>
  4.   </div>
  5. </div>

Código CSS:
Ver original
  1. #pst {
  2.   width: 120px;
  3. }
  4.  
  5. #pst div span {
  6.   position: absolute;
  7.   top: 15vh;
  8.   left: 2vw;
  9.   font-size: 1.3em;
  10.   color: #fff;
  11. }
  12.  
  13. #pst div p {
  14.   position: absolute;
  15.   top: 22vh;
  16.   left: 2vw;
  17.   padding-left: 15px;
  18.   background: url(http://cs.angelkrak.hol.es/archivos/clock104.png);
  19.   background-repeat: no-repeat;
  20.   background-size: 12px;
  21.   font-size: .8em;
  22.   color: #ddd;
  23. }

Demo:
http://codepen.io/AngelKrak/pen/ZbBrex

Etiquetas: index, post, wordpress
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:15.