Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: hymsoft en 24 de Agosto 2016, 16:18
-
Buenas buenas!!!
Dejo la resolución para mi ejercicio CU01029D del tutorial de desarrollo web con CSS desde cero.
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.
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)?
Respuestas:
a) 20px margin left + 60px padding left + 40px border left + 250px width + 10px border right + 45px padding right + 20px margin right = 445px
b) Esta es medio tramposa, asi que veremos que pasa...
- En este caso: 20px margin top + 30px padding top + 15px border top + 16px que mide mi texto + 10px border bottom + 20px margin bottom = 111px
Digo que es tramposa, porque si bien la altura mínima la tengo definida por los margin + padding + border, la altura del div va a depender en general del navegador, yo le sume los 16px de la altura del div del navegador donde hice las pruebas y siempre respetando que esta un div al lado del otro. - Algo un poco mas preciso puede ser: 20px margin top + 30px padding top + 15px border top + 10px border bottom + 20px margin bottom = 95px + el alto del div que no lo sabemos certeramente.
c) En mi caso, al usar los float:left en los dos div, puse uno al lado del otro independientemente del ancho que tenga el navegador, y como los margin verticales son aditivos, la respuesta es 890px.
Ahora mi código:
CU01029D.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Padding y margin - Curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Padding y margin CSS. Top, right, botton, left" />
<meta name="keywords" content="curso, aprender a programar, html, css, padding, margin, (CU01029D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01029D.css"/>
</head>
<body>
<h1 id="ejercicio">Resolución ejercicio CU01029D</h1>
<h2 id="entrega">Entrega número 29</h2>
<div id="div1"> Div 1</div>
<div id="div2"> Div 2</div>
</body>
</html>
CU01029D.css
/* Estilos aplicados al ejercicio entrega N1 26
aprenderaprogramar.com (CU01029D)*/
*{
font-family: Arial, sans-serif;
}
html{
background-color: beige
}
#ejercicio {
text-align: center;
margin: 0;
}
#entrega {
text-align: center;
}
#div1,#div2{
width: 250px;
margin: 20px;
float: left;
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;
}
-
Buenas Hugo muy bien el ejercicio, como dices la pregunta b) es medio tramposa, porque la altura ocupada depende del texto introducido y el ejercicio no dice ni qué texto ni qué tamaño de texto es el que hay que introducir, además al introducir texto los navegadores pueden introducir espacios por defecto, con lo que solo cabe realizar cálculos aproximados. En general en el diseño web se trabaja mucho con medidas y cálculos de anchuras en horizontal mientras que en vertical mucho menos, o incluso ni se hacen cálculos en vertical ???
Salu2