Escribir con padding solo en un párrafo

javierflti · #1 (**permalink**) 02/11/2012, 02:36

Hola, tengo una web con este diseño en el principio del cuerpo

¿Cómo puedo hacer que el texto aparezca más a la izquierda como esto?

La solución que se me ocurre es tener otro estilo css para ese párrafo con más padding, pero si en ese párrafo escriben demasiado se vería mal.

La otra solución sería partir ese cuadro en otra imagen y así que no la toque no?

Por otra parte, en el pié de página, tengo esto

Para escribir en el pié, abajo del todo(por debajo de lo marrón) yo utilizo el padding-top, pero tienen que ser por lo menos 120px y me pregunto si hay otras formas de hacerlo.
Además en caso de que utilicen dos párrafos, el segundo se va 120px más abajo, aunque eso no sería mucho problema, pero bueno.
¿La otra solución sería poner ese trozo negro en otro div para que cuando escriban puedan escribir varios párrafos sin problemas??
PD: Me viene bien escribirlo, porque se me ocurren algunas ideas mientras lo pongo aquí

javierflti · #2 (**permalink**) 02/11/2012, 02:54

Más o menos lo he conseguido de la siguiente manera.

Lo de arriba, está dentro de la imagen de la cabecera, así que en el h3 de la cabecera he puesto el padding y listo.

En el pié lo he puesto de la segunda forma, he creado un nuevo div con fondo negro justo debajo de la imagen.
Así si ponen dos o 3 líneas de fondo no hay problema, el código css se ve un poco peor, pero el resultado es mucho mejor.

furoya · #3 (**permalink**) 02/11/2012, 10:50

Pero el padding de la cabecera te va a afectar a todas las líneas, no sólo a la primera que es la que tiene que coincidir con esa parte de la imagen de fondo.
Hay varias formas de hacer eso. pero deberías leer algún manual de CSS.

Si en verdad el alto de esa oreja de papel es igual al alto de la fuente, lo podés arreglar así.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
p {background: url(http://static.forosdelweb.com/fdwtheme/images/buttons/viewpost.gif) 
silver no-repeat; font-size: 12px; width: 50%; text-indent: 14px; }
</style>
</head>
<body>
<p>QWERTYUIOP ASDFGHJKLÑ ZXCVBNM QWERTYUIOP ASDFGHJKLÑ ZXCVBNM 
QWERTYUIOP ASDFGHJKLÑ ZXCVBNM QWERTYUIOP ASDFGHJKLÑ ZXCVBNM <br>
QWERTYUIOP ASDFGHJKLÑ ZXCVBNM </p>
</body>
</html>

Otra forma rebuscada sería

Código:

...
p:first-letter {padding-left: 14px; }
...

Para navegadores viejos que no interpretan el psudoelemento, o si hay que hacer ajuste de tamaño en el navegador, podés usar una imagen transparente al comienzo del párrafo, que tenga el mismo tamaño que la oreja. Así forzás el indentado.

javierflti · #4 (**permalink**) 05/11/2012, 09:54

Gracias, lo miraré