desplazamiento de texto (margen izquierdo)

lsddigital · #1 (**permalink**) 02/08/2005, 03:35

Hola

Necesito crear un estilo que me permita añadir un margen a la izquierda del texto, de manera tal que este parrafo se vea desplazado a la derecha.. algo asi como

Código:

texto normal...
   texto desplazado...
   texto desplazado...
texto normal...

he probado con 'margin' y con 'padding'. en este último me hace el desplazamiento pero solo a la primera linea, si el texto es extenso el resto de las lineas me las coloca sin el margen.

¡¿ se puede hacer esto que necesito con css ?!
Gracias

DarkJ · #2 (**permalink**) 02/08/2005, 04:18

¿A que etiqueta le estas aplicando el paddig? Si lo haces a un span (display: inline), solo te lo hace en la primera linea, si se lo haces a un div o a un p (display: block), te lo hace a todas las lineas. Lo puedes entender si miras el modelo de cajas de CSS.

lsddigital · #3 (**permalink**) 02/08/2005, 05:47

si, lo he hecho a un <span> ... el problema con los <p> es que me dan resultados muy distintos en explorer y en firefox.
al final he probado, y colocando el texto dentro de una tabla, logro obtener resultados mas parecidos en ambos browsers.
eso si.. no intente hacerlo en un <div>

culantrax · #4 (**permalink**) 02/08/2005, 22:01

Hay muchísimas formas, aquí una sencilla que ha funcionado en IE, Firefox y Safari (versiones para Mac, pero al menos Firefox tiene una respuesta muy similar a aquella en otros sistemas operativos).

En tu CSS o en el encabezado del mismo documento:

Código:

<style>
.normal{
	/* cualquier formato que se requiera */
}
.desplazado{
	margin-left: 30px;
}
</style>

Ejemplo ya dentro de <body>

Código:

<body>
<div class="normal">Este es texto con margen normal</div>
<div class="desplazado">Este es un párrafo con el texto desplazado.
En este ejemplo son 30 pixeles, aunque pueden ser más o menos de
acuerdo a las necesidades del sitio</div>
<div class="normal">Continua el texto con tiene margen normal</div>
</body>

¿Si era esto lo que necesitabas?

CORE · #5 (**permalink**) 03/08/2005, 00:01

Hola a ver intenta asi

Código HTML:

p{margin-left:120px;}
p:first-child {margin-left:100px;}

Código HTML:

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</p><p>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<p>

saludos

DarkJ · #6 (**permalink**) 03/08/2005, 04:14

Cita:

el problema con los <p> es que me dan resultados muy distintos en explorer y en firefox.

Claro, porque el explorer se pasa por el arco de triunfo los standards y se inventa un modelo de cajas que hace que lo correcto se vea mal en explorer. Es el tema de como calcula explorer los anchos, hay cientos de post en este foro explicando la cagada de explorer.