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: Pandemia 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.
<!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
/*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
<!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
/*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
-
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:
<img src="c:/EJERCICIOS CURSO CSS/simson.jpg">
Ejemplo con url:
<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
-
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
-
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
<!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&&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&&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
/*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;}
-
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
-
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!
-
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
<!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&&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&&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
/*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;}
-
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!
-
Hola Pandemia,
podrias poner todo el codigo junto y así facilitarias que te ayudasemos mas.
Saludos
-
ok, Ogramar me ha quedado todo claro, espero no cometer más fallos
saludos y gracias por tu tiempo