Hacer sobresalir un texto de un div contenedor

gReStLe #1 Mar '11

Hola a todos:

Dentro de una web tengo esto:

<div id="firstnew">
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p>
</div>

Bien, el p.content tiene que tener un formato determinado y el div.firstnew sirve para darle un fondo distinto a este p.content.
El caso es que quiero que la primera letra del texto por arriba del fondo que da el div.firstnew.

Para hacer la primera letra más grande he utilizado:

p.content:first-letter{
	color: red;
	font-size: 2.8em;
	font-weight: bold;
}

No puedo:
Usar imágenes, el fondo es un color.
No puedo acotar la altura, el texto es variable.

El efecto que tiene la "L"

A ver si veis alguna forma de hacerlo porque yo no la encuentro.

eXtreM3 #2 Mar '11

<div id="firstnew" style="padding-top:-10px;">

1 respuesta

gReStLe #3 Mar '11

#2
Un padding negativo no funciona, si eso un margin pero aún así no consigo el resultado que busco.

Os dejo el código por si le quereis echar un vistazo, yo no he visto la forma:
CSS: http://pastebin.com/jBghwYLY
HTML: http://pastebin.com/iFGvU0nJ

Tengo que hacerla lo más parecido posible a esta imagen:

Y creo que lo único que falla es el efecto de la L

Un saludete!

oho #4 Mar '11

#1 has probado con posición relativa?

#firstnew p.content {
      	
  	position: relative;
  	top: -8px;
  	
  }

1 respuesta

gReStLe #5 Mar '11

#4
Sí y no funciona, el problema creo que estan en que al mover div.firstnew también hace que su contenido (lógico) cambien de sitio.

Esque no sé si realemte algo así puede hacerse (la imagen que veis representa que esta hecha únicamente con CSS), como puedo hacer un <p> más grande que el div que lo contiene?

1 respuesta

oho #6 Mar '11

#5 pues lo he probado ahora mismo y me funciona :S no es este el efecto que quieres conseguir?

fijate si lo has aplicado con este selector #firstnew p.content

se le aplica al contenido para que se mueva sin alterar el contenedor, te lo digo porque si se lo aplicas a la capa #firstnew se mueve el contenido tambien.

1 respuesta

gReStLe #7 Mar '11

#6
Tendras que perdonarme, pero supongo que ayer estaba medio dormido y lo probé en el div y no en el p.

Aún así fíjate que el fondo gris no termina con las letras, sigue un poco más hacia abajo, el div guarda el espacio necesario para el texto aunque este empiece unos px antes.
Sabes como arreglar esto?

1 respuesta

NeB1 #8 Mar '11

#7 en el p, margin-bottom:-3px aprox, no?

1 respuesta

gReStLe #9 Mar '11

#8
No, el p tiene la mida correcta, termina donde termina el texto.
El problema es el div.firstnew, que tiene la altura necesaria para mostrar el p.content pero este al empezar unos píxeles antes deja un espacio vacio y se queda con el fonde gris cuando no debería.

No se si me explico bien.

1 respuesta

NeB1 #10 Mar '11

#9 por eso lo digo, al ponerle al <p> un margin-bottom negativo se debería acercar al siguiente elemento que es el div, no?

1 respuesta

gReStLe #11 Mar '11

#10 Pues no me funcionaba así, la próxima clase le preguntaré al profesor como lo hizo.

Tema aparte, los que habeis visto el css, cómo lo veis? Quiero decir, intento hacerlo lo más adaptable posible y quizás lo hago demasiado, no lo sé. Si teneis alguna sugerencia para próximos trabajos (en plan, no le metas un % en el menu, siempre tiene que tener un tamaño fijo..) os lo agradecería

1 respuesta

NeB1 #12 Mar '11

#11 vaya, pues puede ser que no funcione... Donde puedo ver los CSS al completo?? (para opinar )

1 respuesta

gReStLe #13 Mar '11

#12
Lo dejé en #3, creo que hice algún cambio pero básicamente es ese.

Hacer sobresalir un texto de un div contenedor

Usuarios habituales

Tags