Comunidad de diseño web y desarrollo en internet online

CSS: Sangria en DIV

Citar            
MensajeEscrito el 25 Ago 2005 06:05 pm
Pues aqui de nuevo para hincharles :oops: xD
Queria saber como darle sangria a la primera linea de un parrafo de texto que esta en un div...como tambien a un parrafo completo, para poder diferenciar parrafos
Tambien consultar como le hago para separar un texto a 10px por ejemplo de una viñeta
Muchas Gracias :D ;)

PD: CSS me ha funcionado a la perfeccion...Gracias

Por Soundwave

Claber

1728 de clabLevel

5 tutoriales

 

Los Andes CHILE

firefox
Citar            
MensajeEscrito el 25 Ago 2005 08:20 pm
El CSS:

Código :

#seccion1 {width: 600px;}
.primero {text-indent: 10%;}

Significa que el párrafo marcado con la clase primero, tendrá el efecto de la primera línea "indentada", o sea, separada del margen izquierdo, un 10% del ancho del div.

El HTML:

Código :

<div id="seccion1">
<p class="primero">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>


Éxito!

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 25 Ago 2005 10:22 pm
a probar!!! :D ;)
Gracias

Por Soundwave

Claber

1728 de clabLevel

5 tutoriales

 

Los Andes CHILE

firefox
Citar            
MensajeEscrito el 26 Ago 2005 02:22 am
Una forma no muy correcta pero que funciona, puede ser usando la pseudo clase :first-letter.

Código :

p:first-letter { padding-left:10px; }


Ésta pseudo clase es parte del CSS2, no es soportada por el IE, y no es la mejor manera =p

Es algo que se ocurrió mientras experimentaba con las pseudo clases.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 26 Ago 2005 02:45 am

the_NEO_JP escribió:

Una forma no muy correcta pero que funciona, puede ser usando la pseudo clase :first-letter.

Código :

p:first-letter { padding-left:10px; }


Ésta pseudo clase es parte del CSS2, no es soportada por el IE, y no es la mejor manera =p

Es algo que se ocurrió mientras experimentaba con las pseudo clases.
de hecho es de css1 y sí funciona
http://css.nu/examples/dropcap.html

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 26 Ago 2005 02:57 am
uh? Era CSS1? Pero en IE no me lo reconoce.

Editado:
woow, ok entonces ya entiendo porque no funciona, es por estar en display:inline, debido a eso el padding-left no funciona, algo similar a los span. Interesante.

Gracias Fael !

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 26 Ago 2005 04:45 am
yep, hay que flotarlo

para eso estamos!

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 26 Ago 2005 01:21 pm
se agradece a ambos!!! ;)

Por Soundwave

Claber

1728 de clabLevel

5 tutoriales

 

Los Andes CHILE

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.