Autor Tema: CSS indentar text-indent white-space pre-line pre-wrap subrayar tachar CU01040D# (Leído 3557 veces)

pedro,, · « **en:** 13 de Septiembre 2015, 12:46 »

Hola, les dejo mi código para el ejercicio CU01040D del tutorial de programación web CSS desde cero.

HTML:

<html>
	<head>
		<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="Ejercicio_estilosCU01040D.css">
		</head>
	<body>
		<div id="caja1">En el API de Java no solo existen clases. Hay bastantes más cosas como clases abstractas o interfaces, de lo que hablaremos 
		más adelante. De momento vamos a <span class="subrayado">centrarnos</span> en las clases y para ello hemos de prestar atención a aquello que nos aparece en el encabezado de la 
		<span class="subrayado">documentación</span> que consultemos.
		En un fichero se encuentran las notas de 35 alumnos <span class="subrayado">de</span> una clase en un array Nota(1), Nota(2), Nota(3), ..., Nota(35), establecidas
		entre cero y 10.
		</div>
		<div id="caja2">El área de programación y desarrollo de <span class="subrayadoEncima">software</span> de aprenderaprogramar.com
		ha pasado a constar en el.
		Joomla Resource Directory (directorio de <span class="subrayadoEncima">recursos</span> para la comunidad Joomla) tras haber 
		superado los requisitos establecidos por el JRD Team, un equipo de la comunidad de software libre Joomla CMS
		que evalúa la calidad 
		de las empresas que aspiran a integrarse en el directorio.</div>
		<div id="caja3">Esta propiedad <span class="tachado">sirve</span> para evitar el uso de las antiguas etiquetas HTML de subrayado  y <span class="tachado">tachado</span> . ¿Por qué no deben usarse estas etiquetas HTML? Porque como               ya hemos comentado con anterioridad en los <span class="tachado">desarrollos</span> web actuales HTML debe usarse exclusivamente para definir la estructura y contenedores del documento, mientras que los estilos deben estar definidos por separado mediante CSS.
		</div>
	</body>
</html>

CSS:

Código: [Seleccionar]

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
div{
	float: left;
	margin: 20px;
	padding: 10px;
	width: 200px;
	height: 400px;
	border: solid 4px;
}
#caja1{
	text-align: center;
	color: #FF6347;
	text-indent: 10%;
}
#caja2{
	text-align: right;
	color: #008080;
	text-indent: 50%;
	white-space: pre-line;
}
#caja3{
	text-align: justify;
	color: #8B4513;
	text-indent: 20%;
	white-space: pre-wrap;
}
.subrayado{text-decoration: underline;}
.subrayadoEncima{text-decoration: overline;}
.tachado{text-decoration: line-through;}

Me surgieron algunas dudas en este ejercicio, en primer lugar cuando aplicamos el indentado el porcentaje se aplica sobre el body. No me queda claro esto.

Y por otra parte en el tercer div en cuanto pongo la linea

Código: [Seleccionar]

white-space: pre-wrap;

la linea

Código: [Seleccionar]

text-align: justify;

pierde su efecto y la alineación queda como si fuera a la izquierda.

Saludos.

Ogramar · « **Respuesta #1 en:** 14 de Septiembre 2015, 10:08 »

Hola Pedro yo veo el código bien y las dudas más que nada tienen que ver con detalles del enunciado del ejercicio que con problemas del código

Los porcentajes como dices están referidos al ancho de un elemento que normalmente es el contenedor. Aquí el contenedor de los div sería el body por lo que nos saca los porcentajes relativos al body. He probado el código y con esos porcentajes el texto se sale de los contenedores, habría que reducir los valores de porcentaje para que quede bien. Si en vez de aplicar text-indent 10%, 50px y 20% usamos 10%, 50px y 2% en mi pantalla ya se ve bien. Otra opción es aplicar estos valores en otras unidades. Cuando usemos porcentajes tenemos que tener cuidado con respecto a qué es el porcentaje.

Los porcentajes vienen en http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=728:unidades-de-medida-css-relativas-o-absolutas-in-cm-mm-pt-pc-pixel-px-porcentaje-em-ex-cu01024d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203 y dice

Citar

Las unidades de medida relativas son aquellas que determinan un tamaño en función de otro tamaño. Por ejemplo si indicamos que el ancho de un elemento como 50%, dicho porcentaje tiene que estar referido al 50% de algo ¿de qué? En el caso de un ancho del 50% puede estar referido normalmente al 50% del ancho que tenga el contenedor del elemento.

La propiedad pre-wrap también observo lo mismo que tú, anula la propiedad text-align. Esto parece algo normal, puesto que pre se usa para mantener el formato "natural" con el que haya escrito el texto. El navegador encuentra aquí un conflicto, por un lado se le dice que ponga formato y por otro lado que no lo ponga, y resuelve el conflicto dándole prevalencia a la regla white-space. Yo aquí vería preferible no tener reglas que entren en conflicto porque cuando esto ocurre nos podríamos encontrar que no se vea bien en algunos navegadores

Salu2

pedro,, · « **Respuesta #2 en:** 14 de Septiembre 2015, 11:02 »

Muchas gracia Ogramar.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: