Autor Tema: Maquetar con div Diseño web CSS dos, tres, cuatro columnas con float (CU01036D) (Leído 3757 veces)

freddychpo · « **en:** 24 de Octubre 2015, 16:02 »

Citar

Define un documento HTML donde a través del uso de la propiedad float y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:

(...)

html:

Código: [Seleccionar]

<html>
	<head>
		<title>Ejercicio 36 - CSS</title>
		<link rel="stylesheet" href="styleExer36.css">
		<meta charset="utf-8">
	</head>
	<body>
		<div id="cajaCabecera">
		<br> <br> <br> 
			Bienvenidos a aprenderaprogramar.com
		</div>
		 
		<div id="cajaMenu">
				Menu: 
				<br> <br>
				- Cursos 
				<br> <br>
				- Humor 
				<br> <br>
				- Divulgacion
				<br> <br>
				- Etc
		</div>
		
		<div id="cajaPublicidad">
			<br> <br> <br> <br> <br> <br>
			Espacio reservado para publicidad 
		</div>
		
		<div id="cajaContenido1"> 
			<br> <br> <br> 
			Conoce las últimas novedades del lenguaje JavaScript.
		</div>

		<div id="cajaContenido2">
			<!--Artículo sobre Gimp, un programa de software libre para el diseño gráfico. -->
		
		</div>
		
		<div id="cajaContacto" style="font-size:15px;">
			Contacta con nosotros
		</div>
		
		<div id="cajaFooter">Aviso legal</div>
	</body>
</html>

css:

Código: [Seleccionar]

 
*{
	margin:0px; 
	padding:0px;
	font-family:arial;
	font-size:20px;
}

#cajaCabecera{
	width:100%;
	height:20%;
	background-color:#DEB887;
	text-align:center;
}

#cajaMenu{
	width:20%;
	height:75%;
	background-color:#FBE13A;
	float:left;
}

#cajaContenido1{
	background-color:#ADD8E6;
	width:60%;
	height:37.5%;
	float:left;
	text-align:center;
}

#cajaPublicidad{
	width:20%;
	height:75%;
	background-color:green;
	float:right;
	text-align:center;	
}


#cajaContenido2{
	width:60%;
	height:37.5%;
	background-color:#90EE90;
	float:right;
}

#cajaContacto{
	width:50%;
	height:5%;
	background-color:#DDA0DD;
	clear:right;
	float:left;
	
}

#cajaFooter{
	width:50%;
	height:5%;
	float:left;
	background-color:grey;
}

César Krall · « **Respuesta #1 en:** 26 de Octubre 2015, 12:18 »

Hola!

¿Por qué tienes comentada la línea esta?



Al probar a visualizar no se veía bien como pedía el ejercicio, para lograr que se vea como pedía el ejercicio he tenido que cambiar el clear de #cajaContacto dejándolo así:

#cajaContacto{
   width:50%;
   height:5%;
   background-color:#DDA0DD;
   clear:both;
   float:left;
}

Hay algunas cosas que no se visualizan bien al menos en mi navegador por ejemplo la cajaContenido2

En #cajaContenido2 definir height parece que no tiene ningún efecto

Este es el código que he probado

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
		<style>

*{
	margin:0px;
	padding:0px;
	font-family:arial;
	font-size:20px;
}

#cajaCabecera{
	width:100%;
	height:20%;
	background-color:#DEB887;
	text-align:center;
}

#cajaMenu{
	width:20%;
	height:75%;
	background-color:#FBE13A;
	float:left;
}

#cajaContenido1{
	background-color:#ADD8E6;
	width:60%;
	height:37.5%;
	float:left;
	text-align:center;
}

#cajaPublicidad{
	width:20%;
	height:75%;
	background-color:green;
	float:right;
	text-align:center;	
}


#cajaContenido2{
	width:60%;
	/*height:37.5%;*/
	background-color:#90EE90;
	float:right;
}

#cajaContacto{
	width:50%;
	height:5%;
	background-color:#DDA0DD;
	clear:both;
	float:left;	
}

#cajaFooter{
	width:50%;
	height:5%;
	float:left;
	background-color:grey;
}


		</style>

	</head>
<body>
		<div id="cajaCabecera">
		<br> <br> <br>
			Bienvenidos a aprenderaprogramar.com
		</div>
		
		<div id="cajaMenu">
				Menu:
				<br> <br>
				- Cursos
				<br> <br>
				- Humor
				<br> <br>
				- Divulgacion
				<br> <br>
				- Etc
		</div>
		
		<div id="cajaPublicidad">
			<br> <br> <br> <br> <br> <br>
			Espacio reservado para publicidad
		</div>
		
		<div id="cajaContenido1">
			<br> <br> <br>
			Conoce las últimas novedades del lenguaje JavaScript.
		</div>

		<div id="cajaContenido2">
			Artículo sobre Gimp, un programa de software libre para el diseño gráfico.
		
		</div>
		
		<div id="cajaContacto" style="font-size:15px;">
			Contacta con nosotros
		</div>
		
		<div id="cajaFooter">Aviso legal</div>
	</body>
</html>

Revisa hilos de otros compañeros para obtener ideas:

https://www.aprenderaprogramar.com/foros/index.php?topic=2585.0

https://www.aprenderaprogramar.com/foros/index.php?topic=2870.0

https://www.aprenderaprogramar.com/foros/index.php?topic=2453.0

https://www.aprenderaprogramar.com/foros/index.php?topic=1647.0

Saludos!

freddychpo · « **Respuesta #2 en:** 28 de Octubre 2015, 02:52 »

Hola

La linea me olvide de descomentarla.

En mi navegador se ve bien, no especificamente con los valores que me dicen que use en la nota pero se asemeja.

En mi caso se ve igual el ejercicio con valor both o right para mi propiedad clear de #cajaContacto.

Para el caso de la #cajaContenido2 le di valor de height:37.5% por lo siguiente:

#cajaCaecera tiene height : 20%
#cajaContenido1 tiene height: 37.5%
#cajaContenido2 tiene height: 37.5%
#cajaContacto tiene height : 5%

Sumando height de cada elemento tengo lo sgte:
20% + 37.5% + 37.5% + 5% = 100%

En mi caso si comento el height de mi #cajaContacto se reduce el height.

Revisando y probando el codigo que usaste, me parece que se muestra diferente la pagina cuando usas todo el codigo en un archivo (como el que probaste) frente a un archivo html en donde llamas a un archivo css (como lo que use yo). Pero, la pregunta es ¿por que?

Me parece que la propiedad height toma otros valores pero no estoy seguro.

De todas maneras te dejo un link con la imagen de mi ejercicio.

https://www.dropbox.com/s/34191wqn6lm5u31/ejer36.png?dl=0

Agradeceria la respuesta.

Muchas gracias

César Krall · « **Respuesta #3 en:** 29 de Octubre 2015, 08:55 »

Hola!

Si el código es el mismo no debe haber diferencias en la visualización cuando se tiene en dos archivos (html por un lado y css por otro) respecto a cuando se tiene en uno.

En la imagen que has puesto con cómo visualizas el ejercicio, lo que se ve es lo que pedía el ejercicio.

Pero en mi navegador no se ve así. Para asegurarte de la corrección del código, es conveniente que lo pruebes al menos en dos navegadores.

Hay una cosa que no está bien en tu código: estás usando <br/> como forma de colocar los elementos. Esto no es aconsejable ya que no se trata de maquetación basada en css.

Cuando se usa float puede haber problemas con height por lo que se explica en http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=740:clear-css-both-ifloat-no-funciona-iel-texto-no-envuelve-una-imagen-html-por-que-de-problemas-cu01035d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203 pienso que ahí puede estar el problema ya que distintos navegadores pueden interpretarlo distinto

Saludos!

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

Noticias:

Autor Tema: Maquetar con div Diseño web CSS dos, tres, cuatro columnas con float (CU01036D) (Leído 3757 veces)

freddychpo

Maquetar con div Diseño web CSS dos, tres, cuatro columnas con float (CU01036D)

César Krall

Re:Maquetar con div Diseño web CSS dos, tres, cuatro columnas con float (CU01036D)

freddychpo

Re:Maquetar con div Diseño web CSS dos, tres, cuatro columnas con float (CU01036D)

César Krall

Re:Maquetar con div Diseño web CSS dos, tres, cuatro columnas con float (CU01036D)

Preguntas y respuestas