Sangria y tipos de letra

Hola, ya esoy de nuevo por el foro con alguna duda.

Se que para poner la sangria en un parrafo, debo poner
#escritos p {text-indent:10px} por ejemplo, pero y si en una carta por ejemplo tengo mas parrafos como puedo hacer que todos ellos tengan la sangria.
Se que si en HTML a cada parrafo lo meto entre p y p me lo haria, pero si tengo toda una carta entre p y p no seria mas facil, si es que se puedo poner algo en HTML para que me lo hicera y no en la hoja de estilos.

La verdad es que no se del todo si me he explicado bien, os pondre los codigos de un ejemplo.

Por otro lado un conejos que tipos de letras me aconsejais para trabjar texto, titulos, etc..... lo digo por los diferentes navegadores, ¿que letras cojen con mas facilidad?

Gracias de nuevo a tod@s.

CODIDOS DEL EJEMPLO
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unidad Pastoral Santa Maria de Olarizu-Caritas</title>
<link rel="stylesheet" href="paginas.css" type="text/css" media="all">
<style type="text/css">
<!--
.Estilo1 {color: #E2E2E2}
-->
</style>
</head>

<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[url="plantilla.html"][img]IMAGENES/logotipoprueba.jpg[/img][/url]</div>
<div id="publicidad">[img]IMAGENES/banner.jpg[/img]</div>
</div>
<div id="navegacion">
<ul>
	[*][url="quesomos.html"]Que somos[/url]
    [*][url="dondeestamos.html"]Donde estamos[/url]
    [*][url="contactos.html"]Contacto[/url]
    [*][url="docinteres.html"]Documentos de interes[/url]
	[*][url="foro.html"]Foro[/url]
	[*][url="plantilla.html"]Inicio[/url]
  [/list]
</div>
<div id="contenido">
	<div id="menu">
 <ul><h1>EDUCACION EN LA FE</h1>
[*] [url="catequesis.html"]Catequesis Familiar[/url]
[*] [url="pastoraljovenes.html"]Pastoral con Jovenes[/url]
[*] [url="pastoraladultos.html"]Pastoral con Adultos[/url]
[*] [url="pastoralfamiliar.html"]Pastoral Familiar[/url] 
<h2>CELEBRACION DE LA FE Y LITURGIA </h2> 
[*] [url="liturgia.html"]Comisi&oacute;n de Liturgia[/url] 
[*] [url="oraciongrupal.html"]Experiencia de oraci&oacute;n grupal[/url] 
<h2>SOCIO CARITATIVA </h2> 
[*] [url="caritas.html"]Caritas[/url] 
[*] [url="social.html"]Comisi&oacute;n Social[/url] 
[*] [url="mayores.html"]Comisi&oacute;n de Mayores y Enfermos[/url] 
[*] [url="misiones.html"]Misiones y Solidaridad[/url] 
[*] [url="penitenciaria.html"]Pastoral Penitenciaria[/url] 
<h2>COORDINACION Y COMUNION</h2> 
[*] [url="economica.html"]Comisi&oacute;n Economica[/url] 
[*] [url="agentes.html"]Agentes de Pastoral[/url] 
[*] [url="consejo.html"]Consejo Pastoral[/url] 
<h2>SERVICIOS</h2> 
[*] [url="limpieza.html"]Ornamentaci&oacute;n y limpieza de las iglesias[/url]
[/list]
 </div>
 <h1></h1>
 <h2>[img]IMAGENES/cruz-titulo.gif[/img]CARITAS</h2>
   <div id="escritos">
     

[url="http://www.caritasvitoria.org/"]Caritas[/url] de la Unidad Pastoral se encuadra en  el marco  de esta  organización de la Iglesia y dentro de ella en el espacio diocesano y asumiendo el objetivo de la Unidad Pastoral de "Tomar conciencia y salir al encuentro de los pobres que viven entre nosotros y hacerles sitio en nuestras comunidades".

       

Para el logro de ese objetivo estudia de la pobreza y sus causas, interviniendo en la realidad,  mediante, formación, sensibilización y denuncia, coordinando el voluntariado y participando en la red diocesana y zonal, mediante diversas acciones:


-	Acogida (atención y apoyo a personas y familias de la zona).


-	Ropero (recogida de ropa para el programa de empleo de Cáritas Diocesana)


-	Comisión de inmigrantes (conversación estructurada para ayudar al conocimiento de la lengua a inmigrantes; tertulia literaria intercultural, como fomento de espacio de diálogo entre culturas; y piso de acogida para hombres extranjeros con especiales situaciones carenciales).


-	Forum sociocultural para personas mayores.

 
-	Participación en la red social de la zona..


</p>
</div>
  </div>
<div id="pie">[img]IMAGENES/webamigas.jpg[/img]
[url="http://www.gazteok.org"][img]IMAGENES/gazteok.jpg[/img][/url][url="http://www.diocesisvitoria.org/"][img]IMAGENES/diocesisvitoria.gif[/img]<a href="http://www.caritasvitoria.org/" target="_blank">[img]IMAGENES/caritas.jpg[/img][/url]</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

CSS
* {margin:0px ; margin:0px; padding:0px ; border: 0px}
p {text-align: justify}
body 	{text-align: center; background-color: #528B8B}
#global {width: 800px ; margin: 4px auto}

#curva-superior {background-image: url(IMAGENES/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; 
                  height: 12px ; overflow : hidden}
				  
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:105px}
#logotipo   {width:260px ; float:left}
#publicidad {width:538px ; float:right}

#navegacion {background-color: #003366 ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
#navegacion ul { margin-left: 60px}
#navegacion a         {color:white; text-decoration:none }
#navegacion a:link    {}
#navegacion a:visited {}
#navegacion a:hover   {color:#9ACD32; text-decoration:none }
#navegacion a:active  {color:#9ACD32}

#contenido {width:798px; height: 600px; background-color: #FFFFFF; border-left: black 1px solid ; border-right: black 1px solid}

#menu 	 {float:left; background-color:#FFFFFF; width: 180px; text-align:left; margin-top:10px; margin-left:12px; margin-right:12px; 
	  	  background-image: url(IMAGENES/menu-parte-inferior-1.gif) ; background-position: bottom ; padding-bottom:20px}
#menu li { list-style:none ; font-size:14px; margin: 4px 8px 4px 6px; line-height:14px; font-family:"Garamond"}
#menu h1 {text-align: center; text-decoration:none ; font-size:11px ; background-image: url(IMAGENES/menu-curva-superior-1.gif) ; padding-top:11px ; 		          color:black; font-family:"Garamond"}
#menu h2 {text-align: center; text-decoration:none ; font-size:11px ; padding-top:11px ; color:#000000; font-family:"Garamond"}

#escritos {width: 550px ; float:left; margin: 20px 8px 20px 8px}
#escritos h2 {text-decoration:none ; font-size:30px ; padding-top:11px ; color:black; font-family:"Garamond"}
#escritos p {text-align: left; padding-left:6px; font-size:13px; font-family:"Arial"}

#grupo1 {width: 200px; height: 150px; float:left; padding-left:35px; padding-right:40px}
#grupo2 {width: 200px; height: 150px; float:left; padding-left:40px}
#grupo3 {width: 200px; height: 150px; float:left; padding-left:35px; padding-top:40px; padding-right:40px}
#grupo4 {width: 200px; height: 150px; float:left; padding-top:40px; padding-left:40px}

#pie {width: 798px; height: 75px; background-color:#FFFFFF; padding-top:4px; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid}
#pie img{float: left; margin-right:6px}

#curva-inferior { background-image: url(IMAGENES/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden}

#menu a {color: #551A8B; text-decoration: none}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color: #000000; text-decoration: underline; background-color: #D3D3D3}
#menu a:active
#pie a         {color: blue; text-decoration:none }
#pie a:link    {}
#pie a:visited {}
#pie a:hover   {color:black ; text-decoration:none ; background-color: white }
#pie a:active  {color:black}
#escritos a {color:#FF0000; text-decoration: none}
#escritos a:link {}
#escritos a:visited {}
#escritos a:hover {color:#FFFFFF; text-decoration: underline; background-color:#4F4F4F}
#escritos a:active

Creo que con los codigos lo entendereis mejor. La idea es que despues de los
los parrafos empezasen con SANGRIA.

GRACIAS
aqui

p {text-align: justify}

es lo que indica al parrafo, es decir, lo que encierres entre


y </p>

ahora puedes ponerle el text-indent
asi

p {text-align: justify; text-indent:10px}

saludos
Pon cada párrafo dentro de su propia etiqueta "

" y quita esos "
".

Esa sería la manera correcta de hacerlo.'





Bye.
Buenas.
#curva-superior {background-image: url(IMAGENES/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ;
height: 12px ; overflow : hidden}
Has nombrado una carpeta con mayusculas. No pasa nada siempre que lo recuerdes y siempre que pongas también las rutas en mayuscula. Al final es un lio y por eso recomiendo siempre llamar a todos los archivos y carpetas con minusculas "SIEMPRE", que diga, "siempre".

Como bien dice Yaneth, coloca eso en esta linea:
#escritos p {text-align: left; padding-left:6px; font-size:13px; font-family:"Arial"}
dejandola así:
#escritos p {text-align: justify; text-indent:10px; padding-left:6px; font-size:13px; font-family:"Arial"}

Respecto a esto:

Caritas de la Unidad Pastoral se encuadra en el marco de esta organización de la Iglesia y dentro de ella en el espacio diocesano y asumiendo el objetivo de la Unidad Pastoral de "Tomar conciencia y salir al encuentro de los pobres que viven entre nosotros y hacerles sitio en nuestras comunidades".



Para el logro de ese objetivo estudia de la pobreza y sus causas, interviniendo en la realidad, mediante, formación, sensibilización y denuncia, coordinando el voluntariado y participando en la red diocesana y zonal, mediante diversas acciones:


- Acogida (atención y apoyo a personas y familias de la zona).


- Ropero (recogida de ropa para el programa de empleo de Cáritas Diocesana)


- Comisión de inmigrantes (conversación estructurada para ayudar al conocimiento de la lengua a inmigrantes; tertulia literaria intercultural, como fomento de espacio de diálogo entre culturas; y piso de acogida para hombres extranjeros con especiales situaciones carenciales).


- Forum sociocultural para personas mayores.


- Participación en la red social de la zona..


</p>
Te recomiendo que uses cada cosa para lo que es realmente. Entre

y </p> encierra un párrafo, pero no todo un texto! je je. Tú separas un párrafo de otro con el </br> pero así el siguiente no va a indentarse, pues no es el principio de otro párrafo, sino que sigue siendo el mismo hasta que lo cierres con </p>. Entiendes?
Además, si haces una lista, porqué no usas una lista?

Yo lo dejaría así:

Caritas de la Unidad Pastoral se encuadra en el marco de esta organización de la Iglesia y dentro de ella en el espacio diocesano y asumiendo el objetivo de la Unidad Pastoral de "Tomar conciencia y salir al encuentro de los pobres que viven entre nosotros y hacerles sitio en nuestras comunidades".</p>


Para el logro de ese objetivo estudia de la pobreza y sus causas, interviniendo en la realidad, mediante, formación, sensibilización y denuncia, coordinando el voluntariado y participando en la red diocesana y zonal, mediante diversas acciones:</p>
  • Acogida (atención y apoyo a personas y familias de la zona).
  • Ropero (recogida de ropa para el programa de empleo de Cáritas Diocesana)
  • Comisión de inmigrantes (conversación estructurada para ayudar al conocimiento de la lengua a inmigrantes; tertulia literaria intercultural, como fomento de espacio de diálogo entre culturas; y piso de acogida para hombres extranjeros con especiales situaciones carenciales).
  • Forum sociocultural para personas mayores.
  • Participación en la red social de la zona..

    </p>

  • Qué me dices?
    Todo lo que tenga que ver con el aspecto, debe ir en la hoja de estilo, y el contenido puro y duro en el Html. Es por eso que una sangria, que no es contenido, se deberia especificar tan solo en la hoja de estilo. Así se evitan problemas varios.

    Como bien dices, no se entiende muy bien tu pregunta. Quizás quieres que todos los párrafos tengan unas características concretas? Entonces puedes decirle a la hoja de estilos que todos los párrafos de dentro de la capa contenido sean de tal y tal modo así:

    #contenido p {todo lo que quieras para ellos}

    De ese modo no hay que indicar nada en el Html. Todo párrafo de dentro de la capa contenido (incluidos los de la capa menu, claro, pero no hay ninguno por suerte) serán así.

    Si solo quieres esas propiedades para algunos, define una clase de estilo, así por ejemplo

    .escrito {lo que quieras para los parrafos de clase escrito}

    y en el html indicas a esos parrafos concretos, que han de tomar esa forma. Eso se hace así:

    <p class="escrito">Este lleva las propieades de la clase escrito</p>


    Este es normal</p>

    Hui te dejo, me llora Carlitos!!!
    Vale ok, muchas gracias, me imaginaba que tendrai que ser asi despues de leer y leer, pero tenia la esperanza de que no....... y de que hubiera algo menos costos para hacerlo. No pasa nada me armare de paciencia poreuq no hace 2 meses que empece en esto y la pagina qeuda muy chula, claro que no a sido solo por mi, si no tambien po muchos de vosotr@s que me habeis ayudadado muchisimo.

    Jorgens, una pregunta ¿es mejor hacer la lista que dices? o como he realizado yo que he copiado el texto de word y lo he pegado directamente.

    Por otro lado no me ayudais con los tipos de letras, Que me decis??

    Gracias por todo y os sigo leyendo.
    Una lista la puedes hacer con varios párrafos colocando un guión, o con una lista, pero lo mejor es usar una lista pues para eso están inventadas, es decir, con UL y LI. Pero vamos, que no pasa nada si la haces de algún otro modo, claro.

    Sobre los tipos de letra no controlo mucho. Lo mejor es usar las que todos los navegadores interpretan igual, pero no se muy bien cuales son. Si lo adivinas nos lo cuentas, oki?
    Gracias Jorgens, he realizado la lista, queda todo el texto genial, pero para darle algo de separación a los parrafos les he tendio que poner un


    A las listas como no me hacian caso los
    les he puesto en CSS padding-bottom:8px, pero..........

    Al hacer la lista en IE7 se ve genial, pero en Firefox 3.0.5 los puntos de la llista que me gustan, (no quedan mal) se quedan pegados al menu de la izquierda, te diris que se salen del DIV.

    Puedes ayudarme con este ultimo tema.

    Te pego un resumen de como ha quedado.

    HTML
    <div id="escritos">
         
    
    [url="http://www.caritasvitoria.org/"]Caritas[/url] de la Unidad Pastoral se encuadra en el marco de esta organización de la Iglesia y dentro de ella en el espacio diocesano y asumiendo el objetivo de la Unidad Pastoral de "Tomar conciencia y salir al encuentro de los pobres que viven entre nosotros y hacerles sitio en nuestras comunidades".</p>
    
    
    
    Para el logro de ese objetivo estudia de la pobreza y sus causas, interviniendo en la realidad, mediante, formación, sensibilización y denuncia, coordinando el voluntariado y participando en la red diocesana y zonal, mediante diversas acciones:</p>
     
    [*]Acogida (atención y apoyo a personas y familias de la zona). 
    [*]Ropero (recogida de ropa para el programa de empleo de Cáritas Diocesana)
    [*]Comisión de inmigrantes (conversación estructurada para ayudar al conocimiento de la lengua a inmigrantes; tertulia literaria intercultural, como fomento de espacio de diálogo entre culturas; y piso de acogida para hombres extranjeros con especiales situaciones carenciales). 
    [*]Forum sociocultural para personas mayores. 
    [*]Participación en la red social de la zona.. 
    [/list] 
    </div>


    CSS
    #escritos {width: 550px ; float:left; margin: 20px 8px 20px 8px}
    #escritos h2 {text-decoration:none ; font-size:30px ; padding-top:11px ; color:black; font-family:"Garamond"}
    #escritos p {text-align:left; text-indent:15px; padding-left:6px; font-size:13px; font-family:"Arial"}
    #escritos li {text-align:left; padding-bottom:8px; padding-left:6px; font-size:13px; font-family:"Arial"}
    Los
    no son buena solución para los elementos de listas. PAra separar un Li de otro Li es mejor usar los estilos que para eso están :wink:

    Haz pruebas colocando valores a margin-top y margin-bottom. Eso debe ir bien.

    Para separar los Li (elementos de la lista) de la izquierda lo tienes facil, usa un margin-left.

    Creo recordar (hablo de cabeza) que si pones un margin-left te crea un margen entre el lateral izquierdo de la página y el principio del punto ese que dices, mientras que si usar un padding-left lo que hace es separar el punto del texto de ese elemento de lista... no recuerdo bien si era así o al revés. Pero pruebalo y nos cuentas, oki?
    :cry: Todo sigue igual, en Firefox 3.0.5 los puntos de la lista no quedan bien.

    Seguire probando cosas, pero si se os ocurre algo me decis.

    Gracias
    Hola Santa,

    veo que estás avanzando y bien con tu web. Hombre!!! pero, por lo menos, puedes decirme cómo lograste ponerle más espacio entre la fecha y la fotito, porque a mí, no me ha salido.

    Mucho agradeceré tu respuesta, saludos :D
    ATRÉVETE A VIVIR SIN VIOLENCIA
    Hoala peugeot, si ya creo que te puse que el erroe estaba en que tu metias el div fecha entre el div noticias y misas y yo lo meti entre el div actualidad y noticias, entonces todo se coloco correctamente y luego juge con los padding.

    Al menos eso es lo que recuerdo porque como suelo hacer algunas pruebas al final casi no se como lo hago :lol:

    Te pego los codigos para que lo veas mejor.
    HTML
    <div id="actualidad"> 
           
    
    [img]IMAGENES/iconoticias.gif[/img] Actualidad </p>
        </div>
    	<div id="fecha"> 
                       <script languaje="JavaScript"> 
              
    var mydate=new Date() 
    var year=mydate.getYear() 
    if (year < 1000) 
    year+=1900 
    var day=mydate.getDay() 
    var month=mydate.getMonth() 
    var daym=mydate.getDate() 
    if (daym<10) 
    daym="0"+daym 
    var dayarray=new Array("Domingo,","Lunes,","Martes,","Miércoles,","Jueves,","Viernes,","Sábado,") 
    var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre") 
    document.write("[size="1"]<align='left'><font color='white' face='Arial'>"+dayarray[day]+" "+daym+" de "+montharray[month]+" del "+year+"</font>[/size]") 
    </script> 
      </div>
    	
    	<div id="noticias">
          <ul>
    	  [*]<a class="uno" href="#">[img]IMAGENES/actualizadas.jpg[/img]
    	    <h2>28 de Enero</h2>
    		
    
    Actualizadas las paginas de Misiones y Soliraridad - Pastoral penitenciaria - Comisi&oacute;n econ&oacute;mica - Ornamentaci&oacute;n y limpieza de las iglesias y Donde estamos.</p>
    	  </a>
    	  [*]<a class="dos" href="#">[img]IMAGENES/actualizadas.jpg[/img]
    	  <h2>27 de Enero</h2>
    	  
    
    Actualizadas las paginas de Pastoral Familiar - Comisión de Liturgia - Experiencia de oración grupal - Caritas - Comisi&oacute;n Social y Comisi&oacute;n de Mayores. </p>
    	  </a>
    	  [*]<a class="uno" href="#">[img]IMAGENES/actualizadas.jpg[/img]
    	  <h2>26 de Enero</h2>
    	  
    
    Actualizadas las paginas de Catequesis Familiar - Pastoral con j&oacute;venes y Pastoral con adultos.</p>
    	  </a>
    	  [*][url="#"][img]IMAGENES/en construccion.jpg[/img]<h2>En Construcci&oacute;n</h2>[/url]
    	  [*][url="#"][img]IMAGENES/en construccion.jpg[/img]<h2>En Construcci&oacute;n</h2>[/url]
          [/list]
    	</div>
    	 
    	<div id="misa">[url="horariomisas.html"][img]IMAGENES/horariomisas.jpg[/img][/url]</div>

    CSS
    #actualidad   {float:left; background-image: url(IMAGENES/fondo023.jpg); width: 360px; height:30px; text-align:justify; margin-top:10px; border-bottom:black 2px solid}
    #actualidad p {padding: 5px 10px 5px 10px}
    
    #fecha {float:right; width:210px; height:25px; background-color:#9ACD32; margin-right:12px; margin-top:10px; padding-top:6px}
    
    #noticias {float:left; width: 358px ; margin-top:10px; margin-right:12px; border: gray 1px solid}
    #noticias h2 {color:#696969; font:bold 10px verdana, sans-serif, arial; padding-left:55px; text-align:left}
    #noticias p {font:bold 11px verdana, sans-serif, arial; padding-top:5px; padding-right:4px; padding-left:55px; text-align:left} 
    #noticias li{list-style:none}
    a.uno {height:80px; color:#000000; padding-left:9px; padding-top:4px; text-decoration:none; 
           display:block; background-color:#F5DEB3} 
    a.uno:link {} 
    a.uno:visited {} 
    a.uno:hover {color:#FFFFFF; text-decoration:none; background-color:#D2B48C} 
    a.uno:active {} 
    a.dos {height:80px; color:#000000; padding-left:9px; padding-top:4px; text-decoration:none ; 
           display: block; background-color:#CFCFCF} 
    a.dos:link {} 
    a.dos:visited {} 
    a.dos:hover {color:#FFFFFF; text-decoration:none; background-color:#B5B5B5} 
    a.dos:active {}
    
    #misa  {width: 210px ; height: 132px; float:left; text-align:justify; margin-top:10px; margin-bottom:10px; border: gray 1px solid}
    #misa1 {width: 210px ; height: 100px; float:left; text-align:justify; margin-bottom:10px; border: gray 1px solid}
    #misa2 {width: 210px ; height: 100px; float:left; text-align:justify; margin-bottom:10px; border: gray 1px solid}
    #misa3 {width: 210px ; height: 100px; float:left; text-align:justify; margin-bottom:10px; border: gray 1px solid}

    Pero claro nada que tu no me hayas enseñado :wink:

    Salu2,