Autor Tema: HTML y CSS Crear un Diseño con columnas para una página web CU01036D  (Leído 1952 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Queridos; les paso el código del ejercicio CU01036D del curso de programación web con CSS.

(si alguien logra que el mismo no se "rompa" al achicar el navegador, le agradezco me diga como hace. Muchas gracias.

HTML

Código: [Seleccionar]

<html>

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

<body>

<div id="cabecera"> Cabecera </div>
<div id="columna1"> Columna izquierda </div>
<div id="centro"> Espacio central </div>
<div id="derecho"> Espacio derecho </div>

</body>

</html>


CSS

Código: [Seleccionar]

div {border-style:solid; text-align:center;}
#cabecera   {border-color:red; width:99.68%;}
#columna1   {border-color:blue; float:left; width:20.50%; height:100px; margin-top:5px;}
#centro     {border-color:green; float:left; height:100px; width:57.75%; margin: 5 1 0 1px;}
#derecho    {border-color:orange; float:right; height:100px; margin-top:5px; width:20.50%;}

« Última modificación: 14 de Mayo 2017, 14:19 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola alefaletti, en el navegador donde lo he probado no se ve bien (el espacio derecho se ve desplazado debajo). Mira estos enlaces donde hay algunas explicaciones sobre este ejercicio:

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

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

Saludos

 

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".