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

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Ejercicio CU01036D del tutorial de programación web con CSS desde cero.

Código HTML

Código: [Seleccionar]
<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.
« Última modificación: 09 de Mayo 2017, 18:14 por Alex Rodríguez »

Jack_F

  • Visitante
Re:(CU01036D) - Ejercicio resuelto (con dudas)
« 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. :D
« Última modificación: 24 de Febrero 2017, 22:06 por Jorgito Pucheta »

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Re:(CU01036D) - Ejercicio resuelto (con dudas)
« 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

  • Visitante
Re:(CU01036D) - Ejercicio resuelto (con dudas)
« 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

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Re:(CU01036D) - Ejercicio resuelto (con dudas)
« 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

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".