Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: pedro,, en 30 de Agosto 2015, 23:53
-
Esta es la solución que propongo para este ejercicio...
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)?
Código HTML:
<html>
<head>
<title>W3C Validator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos_ejercicioCU01029D.css">
</head>
<body>
<div>div 1</div>
<div>div 2</div>
</body>
</html>
Código CSS:
div {
display:inline-block;
font-size: 100px;
margin: 20px;
padding: 30px 45px 0px 60px;
width: 250px;
background-color: #FFB6C1;
border-style: dotted dashed double ridge;
border-color: #DC143C green #FF00FF #2F4F4F;
border-width: 15px 10px 10px 40px
}
a) 405px
b) Dependerá del tamaño de letra que se aplique.
c) 850px
Saludos.
-
Hola pedro
Para el apartado a) confirmamos el resultado de otro hilo
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)
Por tanto correcto
El apartado b) como indicas depende del tamaño de letra, del número de líneas, etc.
La pregunta c)
La pregunta c) si por cada caja hemos de sumar 20 px por la izquierda y 20 px por la derecha me salen 405+405 +40 +40 = 890 px
¿La diferencia puede estar en que no hayas considerado incluidos los margin más a la izquierda y más a la derecha?
Saludos
-
En realidad los que no había contado son los que quedaban en el interior.
Gracias por la corrección.
Saludos.
RESUMEN FINAL DE CÓMO QUEDA EL EJERCICIO:
PREGUNTA A
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) Por tanto 445 px respuesta para la pregunta a)
PREGUNTA B
El alto ocupado será variable dependiendo del número de líneas, tamaño de letra dentro del div, etc. es la respuesta para la b)
PREGUNTA C
Como respuesta para la c) tenemos que para los dos div el ancho total ocupado es el doble que para un div, Total para los dos div: 890 px es el ancho total ocupado por los dos div