Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: JurreNawijn en 18 de Enero 2016, 04:29
-
Aquí la posible respuesta al ejercicio mencionado anteriormente en el título.
HTML:
<div id="caja1">
Hola, ¿Cómo estas? <span id="subrayado">Soy caja número 1</span> y vine hacer nuevos amigos en este vecindario.
</div>
<div id="caja2"> <p>Un texto <span id="subrayadoporencima">
suficientemente</span> largo para elaborar cosas extrañas de manera injusta :v</p>
</div>
<div id="caja3"> <p>¿Por qué siempre somos el villano del cuento? ¿No podemos ser el héroe? 15 </p>
</div>
CSS:
*{font-family: arial;}
div {width: 200px; height: 400px; margin: 20px; padding: 10px; border-style:solid; border-width: 4px; display:inline-block; vertical-align:top;}
#caja1 {text-align:center; color: #FF6347; text-indent: 10%;}
#subrayado {text-decoration: underline;}
#caja2 {text-align: right; color: #008080; text-indent: 50px; white-space:pre-line;}
#subrayadoporencima {text-decoration: overline;}
#caja3 {text-align: justify; color: #8B4513; text-indent: 20%; white-space: pre-warp;}
-
Buenas JurreNawijn, pega el código completo por favor (incluyendo cabeceras html y todas las etiquetas) así resulta mejor para revisar
Salu2
-
Listo.
<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial;}
div {width: 200px; height: 400px; margin: 20px; padding: 10px; border-style:solid; border-width: 4px; display:inline-block; vertical-align:top;}
#caja1 {text-align:center; color: #FF6347; text-indent: 10%;}
#subrayado {text-decoration: underline;}
#caja2 {text-align: right; color: #008080; text-indent: 50px; white-space:pre-line;}
#subrayadoporencima {text-decoration: overline;}
#caja3 {text-align: justify; color: #8B4513; text-indent: 20%; white-space: pre-warp;}
</style>
</head>
<body>
<div id="caja1">
Hola, ¿Cómo estas? <span id="subrayado">Soy caja número 1</span> y vine hacer nuevos amigos en este vecindario.
</div>
<div id="caja2"> <p>Un texto <span id="subrayadoporencima">
suficientemente</span> largo para elaborar cosas extrañas de manera injusta :v</p>
</div>
<div id="caja3"> <p>¿Por qué siempre somos el villano del cuento? ¿No podemos ser el héroe? 15 </p>
</div>
</body>
</html>
-
Buenas JurreNawijn
En este ejercicio lo que te diría que tienes que mejorar es el concepto de uso de id para identificar partes del documento html. El id es un identificador único, que se entiende que no puede o no va a existir en otras partes de la web. Por ello no es adecuado usar un id como id="subrayado" porque se entiende que un subrayado puede existir en distintas partes de una web. Para estos casos lo adecuado es usar class, que sí es un atributo pensado para delimitar partes que pueden aparecer varias veces en una web.
En el div 3 te ha faltado introducir algunas palabras tachadas
Además en el div 3 no se muestran los espacios en blanco porque has escrito white-space: pre-warp; cuando debe ser white-space: pre-wrap; esto lo puedes detectar tú mismo simplemente comparando lo que hace el código con lo que pide el ejercicio!
Salu2
-
Traigo el ejercicio una vez más resuelto.
<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial;}
div {width: 200px; height: 400px; margin: 20px; padding: 10px; border-style:solid; border-width: 4px; display:inline-block; vertical-align:top;}
#caja1 {text-align:center; color: #FF6347; text-indent: 10%;}
.subrayado {text-decoration: underline;}
#caja2 {text-align: right; color: #008080; text-indent: 50px; white-space:pre-line;}
.subrayadoporencima {text-decoration: overline;}
.tachado {text-decoration: line-through;}
#caja3 {text-align: justify; color: #8B4513; text-indent: 20%; white-space:pre-wrap;}
.espacio {outline: 1px dashed red;}
</style>
</head>
<body>
<div id="caja1">
Hola, ¿Cómo estas? <span class="subrayado">Soy caja número 1</span> y vine hacer nuevos amigos en este vecindario.
</div>
<div id="caja2"> <p>Un texto <span class="subrayadoporencima">
suficientemente</span> largo para elaborar cosas extrañas de manera injusta :v</p>
</div>
<div id="caja3"> <p>¿Por qué <span class="tachado">siempre somos</span> el villano del cuento? ¿No podemos ser el héroe? Apartir de acá se empiezan a contar los 15 espacios:<span class="espacio"> </span>Listo</p>
</div>
</body>
</html>
Pero no comprendo lo de white-space: pre-warp. En ese caso lo he puesto para que mantenga los 15 espacios y salte de línea cuando el contenedor llega a su borde.
-
Ahora lo veo perfecto. Lo del pre-wrap era solo que en el primer código había un error de escritura y ponía warp en lugar de wrap
Salu2