Autor Tema: HTML y CSS diseño en columnas si damos ancho en % los bordes descuadran CU01036D (Leído 3160 veces)

Boletos · « **en:** 02 de Febrero 2016, 05:36 »

Hola!! A todos. Va la solución al ejercicio CU01036D. Antes aclarar dos cosas:

1.-Si damos a las cajas centrales unos anchos "width" de 25%, 50% y 25% como se pide en el enunciado, entonces tenemos que quitarles los bordes y no quedaría como la muestra.

2.-En mi solución intenté ajustarme a la muestra propuesta.

Dicho lo cual; ahí va el código:

Código html

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="description" content="Ejercicio 1036"/>
	<meta neme="keyword" content="palabras clave"/>
	<title>Ejercicio 1036 resuelto</title>
	<link rel="stylesheet" type="text/css" href="ejer1036.css"/>
</head>
<body>
	<div class="envoltorio">
		
		<div class="cabecera">
			<p>Bienvenidos a aprenderaprogramar.com (color de fondo:#DEB887)</p>
		</div>
		<div class="menu">
			<p>Menú - Cursos - Humor - Divulgación</p>
		</div>
		<div class="central">
			<div class="articulo">
				<p>Conoce las últimas novedades del lenguaje JavaScript. (color de fondo:#ADD8E6)</p>
			</div>
			<div class="articulo">
				<p>Artículo sobre Gimp; un programa de software libre para el diseño gráfico. (color de
				fondo: #90EE90)</p>
			</div>
		</div>
		<div class="menu">
			<p>Espacio reservado para publicidad</p>
		</div>
		<div class="pie">
			<p>Contacta con nosotros (color de fondo: #DDA0DD)</p>
		</div>
		<div class="pie">
			<p>Aviso legal</p>
		</div>
		<div class="limpiador">
		</div>
	</div>
</body>
</html>

Código css

Código: [Seleccionar]

/*1036 crear un diseño*/
*{margin:0; padding:0;}
p{text-align:center;}
.envoltorio{width:1000px; margin:2px; padding:2px;
	}
.cabecera{border:solid thin; height:30px;
	}
.menu{border-left:solid 1px; border-right:solid 1px;
	border-bottom:solid 1px; height:200px; padding:2px 2px 3px 2px;
	float:left; width:25%;
	}
.central{height:200px; padding-top:2px;
	float:left; width:48.8%;
	}
.articulo{border-bottom:solid 1px; height:100px;
	padding-bottom:1px;}
.pie{border:solid; border-width:0 1px 1px; height:30px;
	width:49.8%; float:left;}
.limpiador{clear:both;}

Un saludo!!

Ogramar · « **Respuesta #1 en:** 03 de Febrero 2016, 09:20 »

Buenas Boletos

Tienes razón con el problema de que si se da el ancho 25%, 50% y 25% con los bordes se descuadra el diseño y habría que hacer ajustes como se hace en https://www.aprenderaprogramar.com/foros/index.php?topic=1647.0.

Veo la maquetación bien realizada, te has ajustado a la muestra propuesta. Te ha faltado incluir los colores, es decir, en la parte donde pone Contacta con nosotros (color de fondo: #DDA0DD) lo que debías hacer era que apareciera Contacta con nosotros y que ese recuadro de la maquetación tuviera el color de fondo indicado, no que se viera el texto.

Salu2

Boletos · « **Respuesta #2 en:** 08 de Febrero 2016, 20:38 »

Hola! Ogramar. Joder! Que patán soy. Ahí va resuelto y con colores.

html:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="description" content="Ejercicio 1036"/>
	<meta neme="keyword" content="palabras clave"/>
	<title>Ejercicio 1036 resuelto</title>
	<link rel="stylesheet" type="text/css" href="ejer1036.css"/>
</head>
<body>
	<div class="envoltorio">
		
		<div class="cabecera">
			<p>Bienvenidos a aprenderaprogramar.com</p>
		</div>
		<div class="menu">
			<p>Menú - Cursos - Humor - Divulgación</p>
		</div>
		<div class="central">
			<div id="art1" class="articulo">
				<p>Conoce las últimas novedades del lenguaje JavaScript.</p>
			</div>
			<div id="art2" class="articulo">
				<p>Artículo sobre Gimp; un programa de software libre para el diseño gráfico.</p>
			</div>
		</div>
		<div class="menu">
			<p>Espacio reservado para publicidad</p>
		</div>
		<div id="pie1" class="pie">
			<p>Contacta con nosotros</p>
		</div>
		<div class="pie">
			<p>Aviso legal</p>
		</div>
		<div class="limpiador">
		</div>
	</div>
</body>
</html>

css:

Código: [Seleccionar]

/*1036 crear un diseño*/
*{margin:0; padding:0;}
p{text-align:center;}
.envoltorio{width:1000px; margin:2px; padding:2px;
	}
.cabecera{border:solid thin; height:30px; background-color:#deb887;
	}
.menu{border-left:solid 1px; border-right:solid 1px;
	border-bottom:solid 1px; height:200px; padding:2px 2px 3px 2px;
	float:left; width:25%;
	}
.central{height:200px;
	float:left; width:48.8%;
	}
.articulo{border-bottom:solid 1px; height:101px;
	padding-bottom:1px;}
#art1{background-color:#add8e6;}
#art2{background-color:#90ee90;}
.pie{border:solid; border-width:0 1px 1px; height:30px;
	width:49.8%; float:left;}
#pie1{background-color:#dda0dd;}
.limpiador{clear:both;}

Un saludo!!

Es que lo de los colores tiene coña: voy y pongo el texto. :oD

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: