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: 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
<!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
/*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
-
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
<!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;
}
-
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:
<!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>
-
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