« anterior próximo »
Páginas: [1]

Autor Tema: CSS y HMTL propiedades de borde border-width no funciona? shortand CU01027D  (Leído 5444 veces)

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
CSS y HMTL propiedades de borde border-width no funciona? shortand CU01027D
« en: 09 de Febrero 2016, 00:36 »
Aquí os dejo el ejercicio a ver qué os parece, yo lo he probado y funciona bien creo.


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="shortand: notacion css abreviada, border-width y thin, mediun, thick, border-color,
transparent, border">
<meta name="keywords" content="shortand: notacion css abreviada">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos11.css">
<title>shortand: notacion css abreviada</title>

</head>

<body>
<div id="wrapper">
<header>
<h1>Shortand: notación css abreviada</h1>
</header>

<br/><br/>


<div id="div1">
<br/>
<div id="imagen1">
<img src="c:/EJERCICIOS CURSO CSS/niño.jpg">
</div>

<br/>

Primera división

</div>

<br/><br/>

<div id="div2">
<br/>
<div id="imagen2">
<img src="c:/EJERCICIOS CURSO CSS/simson.jpg">

</div>
<br/>
Segunda división

</div>
</div>

</body>
</html>


Este es el 1º html


y ahora el css

Código: [Seleccionar]

/*shortand: notación css abreviada. Ejercicio CU01027D*/

#wrapper{text-align: center;
}

h1{border: solid black 5px;background-color: rgb(71, 219, 21);}

#div1{border-top-style: dotted;border-width: 10px;border-color: green;
border-left-style: dashed;border-width: 2px;border-color: blue;
border-bottom-style: double;border-width: 10px;border-color:#A52A2A;
border-right-style: groove;border-width: 30px;border-color: #2F4F4F;}

#imagen1{display: table;margin: 0 auto;border: solid black;width: 208px;height: 242px;}

#div2{border-top-style: inset;border-width: 30px;border-color: #B22222;
border-left-style: solid; border-width: 22px;border-color: #CAA520;
border-bottom-style: double;border-width: 25px;border-color: #4B0082;
border-right-style: dotted;border-width: 17px;border-color: #808000;
}

#imagen2{display: table;margin: 0 auto;border: solid black;width: 267px;height: 189px;}




ahora el 2º html

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="shortand: notacion css abreviada, border-width y thin, mediun, thick, border-color,
transparent, border">
<meta name="keywords" content="shortand: notacion css abreviada">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos11a.css">
<title>shortand: notacion css abreviada</title>

</head>

<body>
<div id="wrapper">
<header>
<h1>Shortand: notación css abreviada</h1>
</header>

<br/><br/>


<div id="div1">
<br/>
<div id="imagen1">
<img src="c:/EJERCICIOS CURSO CSS/niño.jpg">
</div>

<br/>

Primera división

</div>

<br/><br/>

<div id="div2">
<br/>
<div id="imagen2">
<img src="c:/EJERCICIOS CURSO CSS/simson.jpg">

</div>
<br/>
Segunda división

</div>
</div>

</body>
</html>



Y ahora el segundo CSS

Código: [Seleccionar]

/*Ejercicio 2º de la lección CU01027D shortand: notació css abreviada*/

#wrapper{text-align: center;
}

h1{border: solid black 5px;background-color: rgb(71, 219, 21);}

#div1{border-top: dotted 10px green; border-left: dashed 2px blue;border-bottom: double 10px #A52A2A;border-right: groove 30px #2F4F4F;
}
#div2{border-top: inset 30px #B22222;border-left: solid 22px #CAA520;border-bottom: double 25px #4B0082;
border-right: dotted 17px #808000;}

#imagen1{display: table;margin: 0 auto;border: solid black;width: 208px;height: 242px;}

#imagen2{display: table;margin: 0 auto;border: solid black;width: 267px;height: 189px;}


A ver que os parece... gracias por vuestro tiempo
« Última modificación: 11 de Febrero 2016, 08:45 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:CSS y HMTL propiedades de borde border-width no funciona? shortand CU01027D
« Respuesta #1 en: 11 de Febrero 2016, 08:47 »
Buenas Pandemia

Te repito lo que te comentaban en otro hilo:

Como recomendación, a la hora de tomar imágenes es preferible tomar urls en lugar de rutas locales, ya que las imágenes locales sólo las puedes ver operando desde tu pc, mientras que las urls pueden ser vistas por cualquier persona con conexión a internet.

Ejemplo ruta local:

Código: [Seleccionar]
<img src="c:/EJERCICIOS CURSO CSS/simson.jpg">

Ejemplo con url:

Código: [Seleccionar]
<img src="http://cdnb.20m.es/trasdos/files/2011/07/Simpsons_on_Tracey_Ullman.png">

En el ejercicio 1, en el div 1 y en el div 2 tienes cambiado lo que debía ser el borde izquierdo está como borde derecho y viceversa (en el ejercicio 1 por ejemplo el efecto groove debe estar en el borde izquierdo y no en el derecho).

En el ejercicio 1 tienes los estilos mal aplicados:

#div1{border-top-style: dotted;border-width: 10px;border-color: green;
border-left-style: dashed;border-width: 2px;border-color: blue;
border-bottom-style: double;border-width: 10px;border-color:#A52A2A;
border-right-style: groove;border-width: 30px;border-color: #2F4F4F;}

Estás repitiendo varias veces la propiedad border-width. El resultado es que todos los bordes quedan con el ancho establecido en último lugar, es decir, todos los bordes quedan con border-width: 30px;

Para establecer anchos de bordes para cada lado tienes que usar border-top-with, border-right-width, border-bottom-width y border-left-width

Lo mismo ocurre con border-color. Revisa las explicaciones y el resumen de bordes que aparece en la entrega del curso.

Te recomiendo tener en cuenta todo lo indicado y repetir el ejercicio

Salu2
En línea

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Re:CSS y HMTL propiedades de borde border-width no funciona? shortand CU01027D
« Respuesta #2 en: 19 de Febrero 2016, 20:21 »
Ok. Ogramar  me acabo de dar  cuenta de todos los fallos lo explicas muy bien, he repasado la ultima parte de las explicaciones del capitulo y lo veo claro. Perdón por la tardanza en contestar es que he estado ingresado 10 días en el hospital bastante malito  y hasta hoy no me he podido poner, también me ha quedado claro lo de las imágenes en forma urls para que las podáis verlas todos.Muchas gracias por tu tiempo y me pongo a repetir el ejercicio.

Gracias

saludos     
En línea

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
CU01027D curso CSS ejercicio repetido por fallos
« Respuesta #3 en: 19 de Febrero 2016, 21:47 »
Buenas noches como me recomendaste he vuelto a realizar el ejercicio CU01027D del curso CSS, a ver qué tal ha quedado ahora con tus indicaciones.
gracias por tu tiempo me estas ayudando mucho.

Gracias Saludos

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="shortand: notacion css abreviada, border-width y thin, mediun, thick, border-color,
transparent, border">
<meta name="keywords" content="shortand: notacion css abreviada">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos11.css">
<title>shortand: notacion css abreviada</title>

</head>

<body>
<div id="wrapper">
<header>
<h1>Shortand: notación css abreviada</h1>
</header>

<br/><br/>


<div id="div1">
<br/>
<div id="imagen1">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSmPwCfPcig90Bj0vaHUEl_ODDou6T8duvTmgLzXzt0z4X3ATcUQQ" data-sz="f" name="OU4t24407I93LM:" class="rg_i" alt="Resultado de imagen de imagenes bonitas" jsaction="load:str.tbn" onload="google.aft&amp;&amp;google.aft(this)" style="width: 196px; height: 196px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
</div>

<br/>

Primera división

</div>

<br/><br/>

<div id="div2">
<br/>
<div id="imagen2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU59TOLE2eQ8lGOWSThCjYwMrD1-Quy2y8nXBaY4Eebxm_Kiin" data-sz="f" name="iAxQ34EqkSfJ3M:" class="rg_i" alt="Resultado de imagen de imagenes bonitas" jsaction="load:str.tbn" onload="google.aft&amp;&amp;google.aft(this)" style="width: 154px; height: 179px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">

</div>
<br/>
Segunda división

</div>





</div>

</body>
</html>


y ahora el CSS

Código: [Seleccionar]

/*shortand: notación css abreviada. Ejercicio CU01027D*/

#wrapper{text-align: center;
}

h1{border: solid black 5px;background-color: rgb(71, 219, 21);}

#div1{border-top-style: dotted;border-top-width: 10px;border-top-color: green;
border-left-style: groove;border-left-width: 20px;border-left-color: blue;
border-bottom-style: double;border-bottom-width: 10px;border-bottom-color:#A52A2A;
border-right-style: dashed;border-right-width: 30px;border-right-color: #2F4F4F;}

#imagen1{display: table;margin: 0 auto;border: solid black;width: 196px;height: 196px;}

#div2{border-top-style: inset;border-top-width: 30px;border-top-color: #B22222;
border-left-style: dotted; border-left-width: 22px;border-left-color: #CAA520;
border-bottom-style: double;border-bottom-width: 25px;border-bottom-color: #4B0082;
border-right-style: solid;border-right-width: 17px;border-right-color: #808000;
}

#imagen2{display: table;margin: 0 auto;border: solid black;width: 267px;height: 189px;}


« Última modificación: 21 de Febrero 2016, 18:13 por César Krall »
En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:CU01027D curso CSS ejercicio repetido por fallos
« Respuesta #4 en: 21 de Febrero 2016, 18:12 »
Hola! Cuando se trata de un ejercicio ya planteado en los foros una nueva propuesta para corregir una anterior debe escribirse en el mismo hilo que la propuesta original

Muevo el hilo para unir las propuestas en un mismo tema
En línea
Responsable de departamento de producción aprenderaprogramar.com

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:CSS y HMTL propiedades de borde border-width no funciona? shortand CU01027D
« Respuesta #5 en: 21 de Febrero 2016, 18:23 »
Sobre el ejercicio tienes que revisar los colores que se piden, por ejemplo para la parte derecha del div 1 se pide color azul y sin embargo el color azul lo tienes en el lado izquierdo y con otros colores pasa igual

Saludos!
En línea
Responsable de departamento de producción aprenderaprogramar.com

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Re:CSS y HMTL propiedades de borde border-width no funciona? shortand CU01027D
« Respuesta #6 en: 21 de Febrero 2016, 19:50 »
Buenas perdona por mi torpeza pero no me ha quedado claro como tengo que tratar un ejercicio ya planteado en los foros no se como meterlo en el mismo hilo, te agradecería que me lo explicases para hacerlo correctamente.

He vuelto ha retocar el ejercicio CU01027D y creo que ahora está todo bien te agradecería que le echases un vistazo
gracias por tu tiempo y perdona por las molestias ocasionadas
Saludos

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="shortand: notacion css abreviada, border-width y thin, mediun, thick, border-color,
transparent, border">
<meta name="keywords" content="shortand: notacion css abreviada">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos11.css">
<title>shortand: notacion css abreviada</title>

</head>

<body>
<div id="wrapper">
<header>
<h1>Shortand: notación css abreviada</h1>
</header>

<br/><br/>


<div id="div1">
<br/>
<div id="imagen1">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSmPwCfPcig90Bj0vaHUEl_ODDou6T8duvTmgLzXzt0z4X3ATcUQQ" data-sz="f" name="OU4t24407I93LM:" class="rg_i" alt="Resultado de imagen de imagenes bonitas" jsaction="load:str.tbn" onload="google.aft&amp;&amp;google.aft(this)" style="width: 196px; height: 196px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
</div>

<br/>

Primera división

</div>

<br/><br/>

<div id="div2">
<br/>
<div id="imagen2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU59TOLE2eQ8lGOWSThCjYwMrD1-Quy2y8nXBaY4Eebxm_Kiin" data-sz="f" name="iAxQ34EqkSfJ3M:" class="rg_i" alt="Resultado de imagen de imagenes bonitas" jsaction="load:str.tbn" onload="google.aft&amp;&amp;google.aft(this)" style="width: 154px; height: 179px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">

</div>
<br/>
Segunda división

</div>





</div>

</body>
</html>

Y ahora  el CSS

Código: [Seleccionar]

/*shortand: notación css abreviada. Ejercicio CU01027D*/

#wrapper{text-align: center;
}

h1{border: solid black 5px;background-color: rgb(71, 219, 21);}

#div1{border-top-style: dotted;border-top-width: 10px;border-top-color: green;
border-left-style: groove;border-left-width: 20px;border-left-color: #2F4F4F;
border-bottom-style: double;border-bottom-width: 10px;border-bottom-color:#A52A2A;
border-right-style: dashed;border-right-width: 30px;border-right-color: blue;}

#imagen1{display: table;margin: 0 auto;border: solid black;width: 196px;height: 196px;}

#div2{border-top-style: inset;border-top-width: 30px;border-top-color: #B22222;
border-left-style: dotted; border-left-width: 22px;border-left-color: #808000;
border-bottom-style: double;border-bottom-width: 25px;border-bottom-color: #4B0082;
border-right-style: solid;border-right-width: 17px;border-right-color: #DAA520;
}

#imagen2{display: table;margin: 0 auto;border: solid black;width: 267px;height: 189px;}


En línea

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:CSS y HMTL propiedades de borde border-width no funciona? shortand CU01027D
« Respuesta #7 en: 24 de Febrero 2016, 09:49 »
Hola!

left es izquierda y right es derecha

El ejercicio pide para el div 1 "La parte derecha con borde de trazos o segmentos rectangulares, grosor 20 píxeles y color azul."

¿Por qué escribes border-right-width: 30px;? Aquí estás diciendo que el borde derecho tenga 30px cuando el ejercicio dice que tenga 20px ¿Por qué?

Sobre los ejercicios en los foros:

- Cuando quieras pegar el código sobre un ejercicio nuevo abres un nuevo tema.

- Si tienes que hacer cambios o replantear el código de un ejercicio que ya hayas puestos en los foros pulsa en "Responder" dentro de ese mismo tema (no abras un tema nuevo)

Saludos!
En línea
Responsable de departamento de producción aprenderaprogramar.com

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:CSS y HMTL propiedades de borde border-width no funciona? shortand CU01027D
« Respuesta #8 en: 24 de Febrero 2016, 14:25 »
Hola Pandemia,
podrias poner todo el codigo junto y así facilitarias que te ayudasemos mas.
Saludos
En línea

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Re:CSS y HMTL propiedades de borde border-width no funciona? shortand CU01027D
« Respuesta #9 en: 24 de Febrero 2016, 20:03 »
ok, Ogramar me ha quedado todo claro, espero no cometer más fallos

saludos y gracias por tu tiempo
En línea
Páginas: [1]
« anterior próximo »
 

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