Autor Tema: CSS y HTML Crear una o varias columnas con float uso propiedad position CU01036D (Leído 2808 veces)

alefaletti · « **en:** 24 de Febrero 2017, 02:15 »

Ejercicio CU01036D del tutorial de programación web con CSS desde cero.

Código HTML

<html>
	<head>
	<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="CSS-5(37).css">
</head>

<body>

		<div id="bienvenidos"> 
		Bienvenidos a aprenderaprogramar.com (color de fondo: #DEB887)
		</div>
		
		<div id="publicidad">
		<div id="letra"> Espacio reservado para la publicidad </div>
		</div>
		
		<div id="menu">
			<div id="letras2"> 
				<ul>
					<li> <a href="https://www.aprenderaprogramar.com"> Cursos </a> </li>
					<li> <a href="https://www.aprenderaprogramar.com"> Humor <//a> </li>
					<li> <a href="https://www.aprenderaprogramar.com"> Divulgación </a> </li>
				</ul>
			</div> 
		</div>
		
		<div id="javascript"> 
		Conoce las últimas novedades del lenguaje JavaScript (color de fondo: #ADD8E6)
		</div>
		
		<div id="gimp"> 
		Artículo sobre Gimp, un programa de software libre para el diseño gráfico (color de fondo: #90EE90)
		</div>
	
		<div id="contacta"> 
		Contacta con nosotros (color de fondo: #DDA0DD)
		</div>
		
		<div id="legal"> 
		Aviso legal
		</div>
		
		</div>
</body>

</html>

CSS

Código: [Seleccionar]


/* Curso CSS estilos aprenderaprogramar.com*/

div#letra
{margin-top:25px; 
}
div#letras2
{margin-bottom:20px; 
}
div#bienvenidos
{text-align:center;
border-style:solid; border-width:1px;
width:99.88%; height:20px; 
background-color:#DEB887; 
}

div#menu
{text-align:left;
border-style:solid; border-width:0 1 1 1;
float:left;
width:10%; height:80px; 
background-color:yellow;
}

div#javascript
{text-align:center;
border-style:solid; border-width:0 1 1 1;
float:none;
width:75%; height:30px; 
background-color:#ADD8E6; 
padding-top:9px; 
}

div#publicidad
{text-align:center;
border-style:solid; border-width:0 1 1 1; 
display:inline;
float:right;
width:25%; height:80px; 
background-color:yellow; 

}

div#gimp
{text-align:center;
border-style:solid; border-width:0 0 1 0; 
float:none;
width:80%; height:31px; 
background-color:#90EE90; 
padding-top:9px; 
}

div#contacta
{text-align:center;
border-style:solid; border-width:0 0 1 1; 
float:left; display:inline;
width:50%; height:20px; 
background-color:#90EE90; 
padding-top:2px; 
}

div#legal
{text-align:center;
border-style:solid; border-width:0 1 1 0.1;
width:49.82%; height:20px; 
float:right;
background-color:#90EE90; 
padding-top:2px; 
}

Si la visualización la dejo en mi monitor de 1080 x 1920 se ve correctamente. Al achicar la pantalla el diseño se rompe. Como puede solucionarse?

Muchas gracias.

Jack_F · « **Respuesta #1 en:** 24 de Febrero 2017, 21:57 »

Hola alefaletti.

Revise tu ejercicio y note un error en el código HTML. En el menú la segunda de las listas "<li>", cuando cerraste la etiqueta "<a>", cerraste con dos //. Y cuando vizualiso tu código en el navegador el contenedor de "Aviso Legal" se sale para bajo, eso lo podes solucionar con la propiedad position: relative o absolute, aunque absolute no se usa cuando utilizas float.

Tambien podes cambiar la alura del contenedor "Contacta con nosotros (color de fondo: #DDA0DD) " por 30px, y el de aviso legal también. Y hay podes usar la propiedad relative por ejemplo:

Código: [Seleccionar]

position:relative; bottom:33px;.

Ve a este link como lo resolvio unos de tus compañero:https://www.aprenderaprogramar.com/foros/index.php?topic=5215.msg20775#msg20775

Un saludo.

alefaletti · « **Respuesta #2 en:** 25 de Febrero 2017, 16:28 »

Muchas gracias Jorgito por tu ayuda!

Probé lo que me dijiste, el tema es que ahora cuando agrando mi navegador se rompe el esquema. Te paso mi codigo CSS:

Código: [Seleccionar]


div#legal
{text-align:center;
border-style:solid; border-width:0 1 1 0.1;
width:49.82%; height:30px; 
display:inline;
float:right;
position:relative; bottom:33px;
background-color:#90EE90; 
padding-top:2px; 
}

Si podes te agradecería tu respuesta. Muchas gracias!

Jack_F · « **Respuesta #3 en:** 26 de Febrero 2017, 05:33 »

Hola de nuevo.

Bueno con el código que dejaste note que esta la propiedad "display" y, con valor "inline". Pero la caja se sale igual.
Entonces probe esta manera y se me acomodo la caja, te paso el código para que lo pruebes.

Código: [Seleccionar]

div#legal
{text-align:center;
border-style:solid; border-width:0 1 1 0.1;
width:49.82%; height:20px; 
float:right;
background-color:#90EE90; 
padding-top:2px;
position: relative; bottom: 23px; 
}

Normalmente la propiedad position se usa para el elemento padre.

alefaletti · « **Respuesta #4 en:** 27 de Febrero 2017, 15:22 »

Gracias Jorgito de nuevo por tu ayuda.
Vos sabes que lo pruebo y al irme al %100 del explorador, se rompe.

Estoy haciéndolo de nuevo a ver si puedo encontrar finalmente la solución.
Gracias y lo subo si tengo éxito.

pd; me dicen algunos con mayor experiencia que arreglar estas cosas es mas facil con bootstrap

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

Noticias:

Autor Tema: CSS y HTML Crear una o varias columnas con float uso propiedad position CU01036D (Leído 2808 veces)

alefaletti

CSS y HTML Crear una o varias columnas con float uso propiedad position CU01036D

Jack_F

Re:(CU01036D) - Ejercicio resuelto (con dudas)

alefaletti

Re:(CU01036D) - Ejercicio resuelto (con dudas)

Jack_F

Re:(CU01036D) - Ejercicio resuelto (con dudas)

alefaletti

Re:(CU01036D) - Ejercicio resuelto (con dudas)

Preguntas y respuestas