Autor Tema: CSS y HTML mostrar espacios dentro de un texto pre-wrap text-indent CU01040D (Leído 3212 veces)

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:

Código: [Seleccionar]

*{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;}

Ogramar · « **Respuesta #1 en:** 20 de Enero 2016, 17:19 »

Buenas JurreNawijn, pega el código completo por favor (incluyendo cabeceras html y todas las etiquetas) así resulta mejor para revisar

Salu2

JurreNawijn · « **Respuesta #2 en:** 20 de Enero 2016, 17:33 »

Listo.

Código: [Seleccionar]

<!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>

Ogramar · « **Respuesta #3 en:** 22 de Enero 2016, 09:00 »

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

JurreNawijn · « **Respuesta #4 en:** 22 de Enero 2016, 14:45 »

Traigo el ejercicio una vez más resuelto.

Código: [Seleccionar]

<!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.

Ogramar · « **Respuesta #5 en:** 22 de Enero 2016, 17:22 »

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

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

Noticias:

Autor Tema: CSS y HTML mostrar espacios dentro de un texto pre-wrap text-indent CU01040D (Leído 3212 veces)

JurreNawijn

CSS y HTML mostrar espacios dentro de un texto pre-wrap text-indent CU01040D

Ogramar

Re:Ejercicio CU01040D curso css desde 0

JurreNawijn

Re:Ejercicio CU01040D curso css desde 0

Ogramar

Re:CSS y HTML mostrar espacios dentro de un texto pre-wrap text-indent CU01040D

JurreNawijn

Re:CSS y HTML mostrar espacios dentro de un texto pre-wrap text-indent CU01040D

Ogramar

Re:CSS y HTML mostrar espacios dentro de un texto pre-wrap text-indent CU01040D

Preguntas y respuestas