Autor Tema: CSS y HTML ancho total ocupado por un div incluido bordes y rellenos CU01029D (Leído 2508 veces)

Jack_F · « **en:** 02 de Febrero 2017, 07:37 »

Ejercicio del manual básico de programación web con CSS desde cero

Padding y margin CSS. Top, right, bottom, left. Margin negativo y centrar con margin auto. Ejemplos (CU01029D)

Citar

EJERCICIO

Crea un documento HTML con 2 elementos div de anchura 250 píxeles, con un margen de 20px en todas direcciones y uno junto al otro (en horizontal). En cada div introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde y relleno a ambos elementos. Color de fondo #FFB6C1. La parte superior con borde de puntos redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La parte derecha con borde de trazos o segmentos rectangulares, grosor 10 píxeles, color verde y relleno de 45 píxeles. La parte inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0 píxeles. La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.

Código HTML

Código: [Seleccionar]

<!DOCTYPE html>
<html>
        <head>
		          <title>Ejercicio CU01029D hecho por, Jorgito Pucheta</title>
				    <meta charset="utf-8" />
					   <link rel="stylesheet" type="text/css" href="estilos.css" />
		   </head>
		     <body>
			           <div class="Div1">DIV 1</div>
					      <div class="Div2">DIV 2</div>
			   </body>
</html>

Código CSS

Código: [Seleccionar]

/*Ejercicio CU01029D de aprenderaprogramar.com*/
}
div.Div1, div.Div2 {
	width:250px;
	  margin:20px;
}


/*Border y rellenos*/
div.Div1, div.Div2{
	background-color:#FFB6C1;
	   border-top:dotted 15px #DC143C;
		   border-right:dashed 10px green;
			     border-bottom:double 10px #FF00FF;
					   border-left:ridge 40px #2F4F4F;
						   padding:30px 45px 0px 60px;
}

Citar

Responde a las siguientes preguntas:

a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?

b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?

c) ¿Cuál es el ancho total desde el límite izquierdo del borde del div más a la izquierda hasta el límite derecho del borde del div más a la derecha (teniendo en cuenta márgenes, bordes y rellenos)?

a)445px
b)345px no estoy seguros si es esta cantida, porque el div no se ven tan alto, o porque solo le pusimos ancho(width) y, no altura (height).
c)890px

pedro,, · « **Respuesta #1 en:** 03 de Febrero 2017, 20:17 »

Hola Jorgito.

Tus div aparecen uno debajo del otro, y el enunciado pide que estén uno seguido del otro.

Las respuestas a y c son correctas.

La respuesta b, dependerá del tamaño de letra, del número de líneas, etc.

Saludos.

Jack_F · « **Respuesta #2 en:** 04 de Febrero 2017, 09:08 »

Hola, pedro, me olvide sobre los div. Y gracias por decir como es la respuesta (b) gracias.

Un saludo

alefaletti · « **Respuesta #3 en:** 11 de Febrero 2017, 13:40 »

Hola! muchas gracias por la respuesta.
Estuve viendo que para que un div me fiigure al lado del otro de manera horizontal, se puede aplicar "float". Les paso el codigo CSS por si les sirve, a mí me esta funcionando.

Código: [Seleccionar]


div#primero {border: solid 6px blue; width:250px; margin:20px; float:left;}
div#segundo {border: solid 6px blue; width:250px; margin:20px; float:left;}

Abrazo y gracias por tanta ayuda!

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

Noticias: