Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: ANGEL44 en 01 de Agosto 2014, 11:41
-
¿ Cómo puedo poner los dos elementos div en horizntal, cúal es el código del ejercicio propuesto en la entrega 29 del tutorial de programador CSS cuyo código es CU01029D?. Este es el documento html del ejercicio
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="ejercicio margin padding css.css">
</head>
<body>
<div>
<div class="uno">
<p>La cerveza (del celtolatín cerevisĭa1 ) es una bebida alcohólica, no destilada, de sabor amargo que se fabrica con granos de cebada u otros cereales cuyo almidón es fermentado en agua con levadura (básicamente Saccharomyces cerevisiae o Saccharomyces pastorianus) y frecuentemente aromatizado con lúpulo, entre otras plantas.1 2</p>
</div>
</div>
<div>
<div class="dos">
<p>De ella se conocen múltiples variantes con una amplia gama de matices debidos a las diferentes formas de elaboración y a los ingredientes utilizados. Generalmente presenta un color ambarino con tonos que van del amarillo oro al negro pasando por los marrones rojizos. Se la considera «gaseosa» (contiene CO2 disuelto en saturación que se manifiesta en forma de burbujas a la presión ambiente) y suele estar coronada de una espuma más o menos persistente. Su aspecto puede ser cristalino o turbio. Su graduación alcohólica puede alcanzar hasta cerca de los 30 % vol., aunque principalmente se encuentra entre los 3 % y los 9 % vol.</p>
</div>
</div>
</body>
<html/>y este es el codigo css/*Curso CSS estilos aprenderaprogramar.com*/
div {background-color:#FFB6C1; border: solid thick black; width:445px;}
div.uno{width:250px; margin:20px}
div.dos{width:250px; margin:20px}
div div.uno{border-top:15px dotted #DC143C; padding-top:30px;}
div div.uno{border-right:10px dashed green; padding-right:45px;}
div div.uno{border-bottom:10px double #FF00FF; padding-bottom:0px;}
div div.uno{border-left:40px ridge #2F4F4F; padding-left:60px;}
div div.dos{border-top:15px dotted #DC143C; padding-top:30px;}
div div.dos{border-right:10px dashed green; padding-right:45px;}
div div.dos{border-bottom:10px double #FF00FF; padding-bottom:0px;}
div div.dos{border-left:40px ridge #2F4F4F; padding-left:60px;}
-
Hola, el código HTML quedaría así:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<div class="uno">
<p>La cerveza (del celtolatín cerevisĭa1 ) es una bebida alcohólica, no destilada, de sabor amargo que se fabrica con granos de cebada u otros cereales cuyo almidón es fermentado en agua con levadura (básicamente Saccharomyces cerevisiae o Saccharomyces pastorianus) y frecuentemente aromatizado con lúpulo, entre otras plantas.1 2</p>
</div>
<div class="dos">
<p>De ella se conocen múltiples variantes con una amplia gama de matices debidos a las diferentes formas de elaboración y a los ingredientes utilizados. Generalmente presenta un color ambarino con tonos que van del amarillo oro al negro pasando por los marrones rojizos. Se la considera «gaseosa» (contiene CO2 disuelto en saturación que se manifiesta en forma de burbujas a la presión ambiente) y suele estar coronada de una espuma más o menos persistente. Su aspecto puede ser cristalino o turbio. Su graduación alcohólica puede alcanzar hasta cerca de los 30 % vol., aunque principalmente se encuentra entre los 3 % y los 9 % vol.</p>
</div>
</body>
<html/>
He eliminado los div que envuelven a div porque el enunciado solo pide crear dos div.
Para que los div queden en horizontal hay que usar la propiedad display:inline-block;
El código CSS quedaría así:
/*Curso CSS estilos aprenderaprogramar.com*/
div {background-color:#FFB6C1; border: solid thick black;
width:250px; margin:20px;
display:inline-block; /*Para ponerlos en horizontal*/
border-top:15px dotted #DC143C;
padding-top:30px;
border-right:10px dashed green;
padding-right:45px;
border-bottom:10px double #FF00FF; padding-bottom:0px;
border-left:40px ridge #2F4F4F; padding-left:60px;}
Si te fijas, hay una cosa que estabas planteando mal: estabas repitiendo propiedades para los distintos div uno y div dos cuando en realidad el enunciado dice "aplícale los siguientes estilos de borde y relleno a ambos elementos"
Si las propiedades son comunes, deben especificarse una sola vez, repetirlas es una mala práctica de programación.
Como las propiedades son comunes a los div, las definimos una sola vez para los elementos div.
Tienes que intentar crear un código lo más corto y más sencillo posible, eso se considera ir en la línea de la buena programación. Las repeticiones solo serían adecuadas en casos muy específicos cuando no queda otro remedio.
Saludos.
-
Muchas gracias por la solución, para mi que no soy informatico cuesta un poco más aplicar las buenas practicas de programación pero me imagino que con el tiempo lo lograré.
-
Sí, puedes estar seguro... todo es cuestión de práctica ;D