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

sergio80 · « **en:** 13 de Octubre 2022, 15:14 »

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;}

Alejandro Cores · « **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 · « **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 · « **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 · « **Respuesta #4 en:** 17 de Octubre 2022, 16:34 »

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.

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

Noticias:

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

sergio80

curso de programación web CSS y HTML propiedad float width ancho cajas CU01036D

Alejandro Cores

Re: curso de programación web con CSS y html: entrega CU01036D

sergio80

Re: curso de programación web con CSS y html: entrega CU01036D

Alejandro Cores

Re: curso de programación web con CSS y html: entrega CU01036D

Amancio

Re: curso de programación web CSS y HTML propiedad float width ancho cajas CU01036D

Preguntas y respuestas