Autor Tema: curso de programación web CSS y HTML propiedad float width ancho cajas CU01036D  (Leído 4142 veces)

sergio80

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 2
    • Ver Perfil
Buenas tardes. Soy principiante, estoy haciendo el curso de programación web con CSS de aprenderaprogramar y no soy capaz de que me salga el ejercicio de este tema (entrega CU01036D del tutorial). No sé cuál es el fallo del código, aquí os lo dejo. Os agradezco vuestros comentarios/sugerencias.


Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title> Ejemplo 4 </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="ejemplo4.css">
</head>
<body>
<header>
<div id="cabecera"> Bienvenidos a la Consulta </div>
</header>
<div id="menu">
<ul> Menú
<li> Cursos </li>
<li> Humor </li>
<li> Divulgación </li>
</ul>
</div>
<div id="novedades"> Conoce nuestras últimas novedades </div>
<div id="articulo"> Artículos sobre cardiopatías </div>
<div id="publicidad"> Espacio reservado para publicidad </div>
<div id="contacto"> Contacta con nosotros </div>
<div id="aviso"> Aviso legal </div>
</body>
</html>


Código CSS:


Código: [Seleccionar]
*{font-family:Arial; margin:0;}
div{border-style:solid;border-width:1px; margin:0;padding:5px;}
#cabecera{text-align:center;background-color:#DEB887;width:1500px; height:49px;}
#menu{width:369px;float:left;height:111px;border-width:0 1px 1px 1px;}
#novedades{background-color:#ADD8E6;width:738px;border-width:0px 1px 1px 0px;float:left; height:50px;}
#articulo{width:738px;height:50px;border-width:0px 1px 1px 0px; float:left;background-color:#90EE90;}
#publicidad{width:369px; height:111px;float:left;}
#contacto{width:744px;height:50px;background-color:#DDA0DD;float:left;}
#aviso{width:744px;height:50px;float:left;border-width:1px 1px 1px 0;}

« Última modificación: 17 de Octubre 2022, 16:25 por Amancio »

Alejandro Cores

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 25
    • Ver Perfil
Re: curso de programación web con CSS y html: entrega CU01036D
« Respuesta #1 en: 14 de Octubre 2022, 19:20 »
Buenas tardes,

Aquí te dejo una posible solución al ejercicio:

Por un lado el código html:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="foro.css" />
      <title>Ejemplo 4</title>
   </head>
   <body>
   
      <div class="cabecera"> Bienvenidos a la Consulta </div>
      <div class="padre">
         <div class="menu">
            <ul> Menú
               <li> Cursos </li>
               <li> Humor </li>
               <li> Divulgación </li>
            </ul>
         </div>
         <div class="caja">
            <div class="novedades"  id="novedades"> Conoce nuestras últimas novedades </div>
            <div class="articulo" id="articulo"> Artículos sobre cardiopatías </div>
         </div>
         <div class="publicidad"> Espacio reservado para publicidad </div>
      </div>
      <div class="final">
         <div class="contacto" id="contacto"> Contacta con nosotros </div>
         <div class="aviso" id="aviso"> Aviso legal </div>
      </div>
   </body>
</html>

Y por otro lado el código css:

Código: [Seleccionar]
.cabecera {
    border: 1px solid black;
    width: 100%;
    display: flex;
    justify-content: center;
    display: flex;
    align-items: center;
    background-color: #DEB887;
}
.padre {
    display: flex;
}
.menu {
    border: 1px solid black;
    width: 25%;
    display: flex;
    justify-content: center;
    display: flex;
    align-items: center;
}

.caja {
    width: 50%;
}
.novedades {
    border: 1px solid black;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ADD8E6;
}

.articulo {
    border: 1px solid black;
    height: 47%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #90ee90;
}

.publicidad {
    border: 1px solid black;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.final {
    display: flex;
}

.contacto {
    border: 1px solid black;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #DDA0DD;
}

.aviso {
    border: 1px solid black;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

Espero que te sirva de ayuda, saludos.

sergio80

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 2
    • Ver Perfil
Re: curso de programación web con CSS y html: entrega CU01036D
« Respuesta #2 en: 14 de Octubre 2022, 20:58 »
Muchas gracias por tu ayuda Alejandro. Tu código es mucho más completo.
Lo que no entiendo es por qué con mi código la div "Publicidad" no ocupa el espacio que debería y se sitúa por debajo. ¿Cuál es el fallo? Una vez más muchas grascias.

Alejandro Cores

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 25
    • Ver Perfil
Re: curso de programación web con CSS y html: entrega CU01036D
« Respuesta #3 en: 15 de Octubre 2022, 13:44 »
Buenas tardes,

El atributo "float" lo que hace es colocar un elemento en el lado izquierdo o derecho de su contenedor según el valor que le des. En su lugar, con "display: flex" ayuda a colocar las cajas como si fueran celdas de tablas, poniendo dicha propiedad en el elemento padre.

Por otro lado, te recomiendo jugar con la herramienta de desarrollador en tu navegador para ir jugando con el css.

Un saludo.

Amancio

  • Moderador Global
  • Sin experiencia
  • *******
  • APR2.COM
  • Mensajes: 2
    • Ver Perfil
Buenas tardes,

Comentar que cuando escribas código en los foros es conveniente que lo hagas haciendo uso de las etiquetas "code", entre otras cosas, tal y como se explica en https://aprenderaprogramar.com/foros/index.php?topic=1460.0

Un saludo.

 

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