Autor Tema: HTML y CSS Líneas separadores, etiqueta <hr> propiedad border-style CU00716B  (Leído 7535 veces)

Eva l

  • Sin experiencia
  • *
  • Mensajes: 14
    • Ver Perfil
 Hola!

Tengo un problema con el Ejercicio de la Clase CU00716B del Curso de HTML de aprenderaprogramar. Sucede que al ejecutar el código corrigiendo con CSS, el resultado no es el mismo que el que se mostraba con código original. Me aparecen dos líneas horizontales finitas en gris, es decir sin formato.

Este es el código:

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de separadores - aprenderaprogramar.com</title>
</head>
<body>
<p>A continuación insertamos un separador.</p>
<hr style="size:8px;color:black;" />
<p>A continuación seguimos escribiendo debajo del separador.</p>
<hr style= "size:2px;color:black;" />
</body>
</html>

GRACIAS
« Última modificación: 08 de Julio 2017, 12:27 por Ogramar »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:html - Clase16 - Ejercicio etiqueta <HR>
« Respuesta #1 en: 15 de Junio 2017, 22:22 »
Hola Eva.

En primer lugar recomendarte leer el siguiente enlace con las normas básicas de publicación en el foro, entre otras temas, se explica como insertar adecuadamente el código en tus mensajes.
https://www.aprenderaprogramar.com/foros/index.php?topic=1460.msg7784#msg7784

Para aumentar el grosor de las líneas usando instrucciones CSS debes de usar "height" y no "size" y para el color de fondo "background-color" en vez de "color".


Saludos. ;D

Eva l

  • Sin experiencia
  • *
  • Mensajes: 14
    • Ver Perfil
Re:html - Liíneas separadores, etiqueta <hr> CU00716B
« Respuesta #2 en: 16 de Junio 2017, 00:24 »
No sabía de como insertar código. Gracias por esa recomendación.  :D

 #1

Por otro lado. Me confundí de código. El que tenía problemas es este:

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejercicio 3 - Ejemplo 1 - Uso de separadores Clase 16</title>
</head>
<body>
<p>A continuación insertamos un separador.</p>
<hr style = " heigth:5px; width:50%; text-align:center;margin-right:0px; background-color:red;color:red;"/>

</body>
</html>



Al ejecutar ese código no me muestra la línea horizontal roja, y me muestra una línea gris finita.


#2

EL otro problema que ahora me surgió es que en el siguiente código, se muestra una linea verde y no roja como deberíá ser.

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejercicio 3 - Ejemplo 1 - Uso de separadores Clase 16</title>
</head>
<body>
<p>A continuación insertamos un separador.</p>
<hr size=”5px” width= “50%” align=”center” color=”red”/>

</body>
</html>

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:html - Liíneas separadores, etiqueta <hr> CU00716B
« Respuesta #3 en: 16 de Junio 2017, 10:11 »
Buenas.

En la primer problema, es debido a que escribiste mal "height".

El segundo problema es debido a que estás usando un formato de comillas que el intérprete html no reconoce.
Estas usando ”” cuando deberías usar ""


Saludos. ;D

Eva l

  • Sin experiencia
  • *
  • Mensajes: 14
    • Ver Perfil
Re:html - Liíneas separadores, etiqueta <hr> CU00716B
« Respuesta #4 en: 16 de Junio 2017, 19:27 »
Gracias! Corregí esos errores y funcionó :D

Pero ahora tengo otro problema. Es de la misma clase (CU00716B del Curso de html). El siguiente código no funciona correctamente. Muestra una linea gris finita. No sé que está mal, tuve en cuenta las comillas "" y puse el equivalente en CSS de la tabla de la clase CU00716B. Tenia que escribir usando CSS lo siguiente:

<hr size=”2px” width=”80%” noshade=“noshade” align=“right” />

Este es el código:


Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejercicio 4 - Ejemplo 1 - Uso de separadores Clase 16</title>
</head>
<body>
<p>A continuación insertamos un separador.</p>
<hr style="height:2px;width:80%;border-style:1px solid #000;text-align:right;margin-right:0px;" />

</body>
</html>


pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:html - Liíneas separadores, etiqueta <hr> CU00716B
« Respuesta #5 en: 17 de Junio 2017, 17:18 »
Buenas.

Estás aplicando incorrectamente la propiedad border-style, en esta propiedad solo se puede establecer el diseño que tendrá el borde, no puedes indicar grosor ni color.

Prueba con esto:
Código: [Seleccionar]
<hr style="height:2px;width:80%;border-style:none; margin-right:0;" />
Saludos. ;D

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".