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: jimmorrison en 18 de Abril 2015, 22:45
-
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)?
html
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_margin_padding.css">
</head>
<body>
<div id="caja_1" class="cajas">
caja1
</div>
<div id="caja_2" class="cajas">
caja 2
</div>
<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;
}
body{background-color: #FA5858;}
footer{
text-align: center;
font-family: Arial;
}
.cajas{
text-align: center;
font-size: 2em;
background-color: #FFB6C1;
border-top: dotted #DC143C 15px;
border-right: dashed green 10px;
border-bottom: double #FF00FF 10px;
border-left: ridge #2F4F4F 60px;
padding-top: 30px;
padding-right: 45px;
padding-bottom: 0px;
padding-left: 60px;
}
#caja_1{
width: 250px;
margin: 20px;
display: inline-block;
}
#caja_2{
width: 250px;
margin: 20px;
display: inline-block;
}
respuestas
a) el ancho de cada caja (div) es 425px
b)es el alto total del div55
c)el total con margin padding div y borde de izquierda a derecha son : 720
este si me costo sacar las cuentas jaja ahora si necesito su sabiduria por favor.
tengo mas duda en el alto de la caja por el texto
-
Hola para evitar la repetición
#caja_1{
width: 250px;
margin: 20px;
display: inline-block;
}
#caja_2{
width: 250px;
margin: 20px;
display: inline-block;
}
Es mejor
#caja_1, #caja_2{
width: 250px;
margin: 20px;
display: inline-block;
}
El ejercicio decía La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.
border-left: ridge #2F4F4F 60px; aquí tendría que haber sido border-left: ridge #2F4F4F 40px;
La pregunta a) tenemos 250 px (no contamos el margin) a lo que hay que añadir 45+60 px por padding left y right, suman 355, y añadiendo 70 px 50 px por los border nos suma 425 405 px
La pregunta b) el alto depende del navegador que utilices porque depende del tamaño de letra que asigne, y no es fácil de saber, hay que mirarlo con alguna herramienta de análisis. En mi navegador sale 37+30 + 15+10 = 92 (incluyendo bordes y rellenos pero no el margin), no nos sale igual
La pregunta c) si por cada caja hemos de sumar 20 px por la izquierda y 20 px por la derecha me salen 425+425 +40 +40 = 930 px 405+405 +40 +40 = 890 px, no nos sale igual y aquí sí nos debería salir igual porque aquí no afecta el texto
Salu2
-
Una consulta Ogramar,
Para la pregunta a) Por que le sumas 70px? De donde sale el 70px? No seria solo 50px? Grosor del borde por izquierda 10px y grosor del borde por derecha 40px, lo que nos resulta como suma 50px.
Y seria 250px + 45px+60px + 50px= 405px.
Agradeceria tu respuesta, gracias.
-
Hola lo he revisado y parece que tienes razón, ahora mismo ya no recuerdo y debí confundirme.
div1: 250 px interior + 45 px relleno derecha + 60 px relleno izquierda + 10 px borde derecho + 40 px borde izquierdo
TOTAL div 1: 405 px (añadiendo el margin tendríamos 445 px)
He editado el mensaje para corregirlo
Gracias por indicarlo!
Salu2