Autor Tema: Ejercicio resuelto del curso CSS padding y margin cómo calcular anchos CU01029D (Leído 3449 veces)

Pandemia · « **en:** 23 de Febrero 2016, 22:04 »

Buenas noches saludos a todos, aquí os dejo este ejercicio que he realizado, me he liado un poco con los cálculos pero creo que al final ha salido bien, os agradecería que le echarais un vistazo.

Gracias de antemano. Saludos

Código: [Seleccionar]

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

<head>
<title>padding y margin css</title>
<meta name="description" content="padding y margin en css. margin negativo y centrar con margin auto">
<meta name="keywords" content="padding y margin en css">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos12.css">
</head>

<body>
		<div id="wrapper">
		<header>
			<h1>Padding y Margin CSS</h1>
		</header>
		</div>
		
		<div id="div1">
		
		Este es el div 1
		
		</div>
		<div id="div2">
		Este es es el div 2
		</div>
</body>
</html>

Y ahora el CSS

Código: [Seleccionar]

/*padding y margin en css */
#wrapper{text-align: center;}

#div1{float: left;width: 250px;margin: 20px;background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-right-style: dashed;border-right-width: 10px;border-right-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px; 
border-left-style: ridge;border-left-width: 40px;border-left-color: #2F4F4F;padding: 60px;
}

#div2{float: left;width: 250px;margin: 20px; background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-right-style: dashed;border-right-width: 10px;border-right-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px; 
border-left-style: ridge;border-left-width: 40px;border-left-color: #2F4F4F;padding: 60px;
}

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

250px ancho interior + 10px borde izquierdo + 45px relleno izquierdo + 40px borde derecho + 60px relleno derecho : total 405px

Mas el margin: 40px total respuesta a)445px

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

El alto será variable dependiendo del contenido del div. Si no especificamos nada lo pondrá el navegador por defecto.

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)?

El ancho total para los dos div sera de 890px

Pandemia · « **Respuesta #1 en:** 24 de Febrero 2016, 20:49 »

He encontrado unos errores que e retocado ( left : derecha right: izquierda ) que me me hacia unos lios que no te digo, pensaba que funcionaban en el código al revés righ era para la parte derecha de la pantalla, de todas maneras en el ejercicio no logro poner el estyle dashed y ridge en su sitio y no se porque, lo he probado todo y para que quede con trazos rectangulares lo tengo que poner en la izda.

haber si me podéis ayudar.

saludos y gracias por vuestro tiempo

Código: [Seleccionar]


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

<head>
<title>padding y margin css</title>
<meta name="description" content="padding y margin en css. margin negativo y centrar con margin auto">
<meta name="keywords" content="padding y margin en css">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos12.css">
</head>

<body>
		<div id="wrapper">
		<header>
			<h1>Padding y Margin CSS</h1>
		</header>
		</div>
		
		<div id="div1">
		
		Este es el div 1
		
		</div>
		
		<div id="div2">
		
		Este es es el div 2
		
		</div>



		
</body>

</html>



/*padding y margin en css */

#wrapper{text-align: center;
}

#div1{float: left;width: 250px;margin: 20px;background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-left-style: dashed;border-left-width: 10px;border-left-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px; 
border-right-style: ridge;border-right-width: 40px;border-right-color: #2F4F4F;padding: 60px;
}





#div2{float: left;width: 250px;margin: 20px; background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-left-style: dashed;border-left-width: 10px;border-left-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px; 
border-right-style: ridge;border-right-width: 40px;border-right-color: #2F4F4F;padding: 60px;
}

bermartinv · « **Respuesta #2 en:** 24 de Febrero 2016, 23:25 »

Hola Pandemia, a lo que me referia que pusieras todo el codigo junto es que el código CSS lo metieras dentro del head, sin tener que enlazarlo con un archivo.
Como recomendación, pon cada característica CSS en cada fila, es la norma al escribir CSS.
Te adjunto como me saldría a mi el primer div:

Código: [Seleccionar]

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

<head>
<title>padding y margin css</title>
<meta name="description" content="padding y margin en css. margin negativo y centrar con margin auto">
<meta name="keywords" content="padding y margin en css">
<meta charset="utf-8">
<style>
    /*padding y margin en css */

#wrapper{text-align: center;
}

#div1{
    width: 250px;
    margin: 20px;
    float: left;
    background-color:#FFB6C1;
    border-top-style: dotted;
    border-top-width: 15px;
    border-top-color: #DC143C;
    padding-top: 30px;
    border-right-style: dashed;
    border-right-width: 10px;
    border-right-color: green;
    padding-right: 45px;
    border-bottom-style: double;
    border-bottom-width: 10px;
    border-bottom-color: #FF00FF;
    padding-bottom: 0px;
    border-left-style: ridge;
    border-left-width: 40px;
    border-left-color: #2F4F4F;
    padding-left: 60px;
}





#div2{float: left;width: 250px;margin: 20px; background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-left-style: dashed;border-left-width: 10px;border-left-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px;
border-right-style: ridge;border-right-width: 40px;border-right-color: #2F4F4F;padding: 60px;
}
</style>
</head>

<body>
		<div id="wrapper">
		<header>
			<h1>Padding y Margin CSS</h1>
		</header>
		</div>
		
		<div id="div1">
		
		Este es el div 1
		
		</div>
		
		<div id="div2">
		
		Este es es el div 2
		
		</div>



		
</body>

</html>

Pandemia · « **Respuesta #3 en:** 25 de Febrero 2016, 01:30 »

vale bermartinv ya lo he entendido hoy ya lo he empezado ha hacer así, es que cogí la mania de crear el archivo css al principio del curso y hasta hoy y la verdad es que va mucho mejor y es más rápido.

muchas gracias me has ayudado mucho

saludos

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

Noticias:

Autor Tema: Ejercicio resuelto del curso CSS padding y margin cómo calcular anchos CU01029D (Leído 3449 veces)

Pandemia

Ejercicio resuelto del curso CSS padding y margin cómo calcular anchos CU01029D

Pandemia

Re:Ejercicio CU01029D del curso CSS padding y margin css

bermartinv

Re:Ejercicio CU01029D del curso CSS padding y margin css

Pandemia

Re:Ejercicio CU01029D del curso CSS padding y margin css

Preguntas y respuestas