« anterior próximo »
Páginas: [1]

Autor Tema: Diseño web CSS dos, tres, cuatro columnas float evitar descuadres caja CU01036D  (Leído 2577 veces)

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
Diseño web CSS dos, tres, cuatro columnas float evitar descuadres caja CU01036D
« en: 04 de Septiembre 2017, 19:22 »
Buenas tardes. Este es el enunciado del ejercicio CU01036D del curso básico de desarrollo web con CSS desde cero:

Citar
Define un documento HTML donde a través del uso de la propiedad float y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:



Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Diseños web css - aprenderaprogramar.com"/>
        <meta name="keywords" content="diseño, css, columnas, float, cursos, aprenderaprogramar.com, CU01035D"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01036B.css"/>
    </head>
    <body>


<div id="cabecera">Bienvenidos a aprenderaprogramar.com</div>

<div id="menu">
<p>Menú</p>
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>
</div>

<div id="a1">Conoce las últimas novedades del lenguaje JavaScript.</div>
<div id="a2">Artículo sobre Gimp, un programa de software libre para el diseño gráfico.</div>

<div id="publicidad">Espacio reservado para publicidad</div>
<div id="contacto">Contacta con nosotros</div>
<div id="aviso">Aviso legal</div>

    </body>
</html>


Acá la hoja de estilos css:
Código: [Seleccionar]
*{
    font-family: arial;
    margin:0;
    padding:0;
}

div{
    border: 2px solid;
    padding:4px;
}

#contenedor{
   
    margin: 0 auto;
}

#cabecera{
    margin: 2px 2px 0.5px 2px;
    border-bottom-width:thin;
    width:99%;
    background-color:#DEB887;
    text-align:center;
}

#menu{
    width:20%;
    text-align:center;
    float:left;
    border-width:thin;
    padding:15px;
    height:126px;
}

#menu p{
margin:4px 0 0 4px;
}

#a1{
    width:48.54%;
    float:left;
    margin-left:0.4px;
    border-width:thin;
    padding:30px;
    text-align:center;
    background-color:#ADD8E6;
}

#a2{
    width:48.54%;
    margin-left:0.4px;
    margin-top:0.9px;
    float:left;
    border-width:thin;
    padding:30px;
    text-align:center;
    background-color:#90EE90;
}

#publicidad{
    width:22.1%;
    text-align:center;
    float:right;
    border-width:thin;
    padding:15px;
    position:relative; bottom:79px;
    height:126px;
   
}
#contacto{
    float:left;
    width:48.7%;
    text-align:center; 
    position:relative;bottom:1px;
    border-width:thin;
    background-color:#DDA0DD;
}

#aviso{
    float:right;
    width:50%;
    position:relative; left:335px; bottom:28px;
    border-width:thin;
    text-align:center;
}


Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
« Última modificación: 19 de Octubre 2017, 18:09 por Alex Rodríguez »
En línea

KOFFERO

  • Principiante
  • **
  • Mensajes: 78
    • Ver Perfil
Re:Diseño web CSS dos, tres, cuatro columnas float CU01036D
« Respuesta #1 en: 12 de Septiembre 2017, 20:53 »
Hola, tú ejercicio esta bien. Pero algunas cajas se salen de dicho lugar.

Aquí te dejo una posible solución: https://www.aprenderaprogramar.com/foros/index.php?topic=5215.msg20775#msg20775

Un saludo. :) :)
En línea
¡Me encanta aprender!

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
Re:Diseño web CSS dos, tres, cuatro columnas float CU01036D
« Respuesta #2 en: 14 de Septiembre 2017, 04:31 »
Buenas noches. A continuación, la corrección del código:

Acá el código html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <meta name="author" content="EnigmaticNerd"/>
        <meta name="description" content="Diseños web css - aprenderaprogramar.com"/>
        <meta name="keywords" content="diseño, css, columnas, float, cursos, aprenderaprogramar.com, CU01035D"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01036B.css"/>
    </head>
    <body>

<div id="contenedor">
<header>
<p>Bienvenidos a aprenderaprogramar.com</p>
</header>
<div id="cuerpo">
<div id="menu">
<p>Menú</p>
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>
</div>

<div id="c1">
<p>Conoce las últimas novedades del lenguaje JavaScript.</p>
</div>
<div id="c2">
<p>Artículo sobre Gimp, un programa de software libre para el diseño gráfico.</p>
</div>

<div id="publi">
<p>Espacio reservado para publicidad</p>
</div>
</div>
<footer>
<div id="contacto">
<p>Contacta con nosotros</p>
</div>
<div id="aviso">
<p>Aviso legal</p>
</div>
</footer>
</div>
    </body>
</html>

Acá la hoja de estilos CSS:
Código: [Seleccionar]
/*Estilos para el ejercicio CU01036D*/
*{
    margin:0;
    padding:0;
}

header{
    margin:10px 10px 1px;
    padding:25px;
    text-align:center;
    border:solid thin black;
    background-color:#DEB887;
}

#menu{
    float:left;
    text-align:center;
    margin:-1px 9.5px;
    border:solid thin black;
    width:30%;
    height:159px;
    line-height:1.5;
}

#menu p{
    margin-top:20px;
}

#c1{
    float:left;
    text-align:center;
    width:39.9%;
    margin:-1px -10px;
    border:solid thin black;
    padding:25px;
    background-color:#ADD8E6;
}

#c2{
    float:left;
    width:40.1%;
    padding:24px;
    margin-top:2px;
    margin:1px -10px;
    border:solid thin black;
    background-color:#90EE30;
}

#publi{
    float:left;
    border:solid thin black;
    width:22.3%;
    padding:15px;
    height:127.4px;
    margin:-70px 10px;
}

#publi p{
    width:210px;
    text-align:center;
 
    margin:20px 50px;
}

#contacto{
    float:left;
    border:solid thin black;
    padding:10px;
    margin:-2px 0px 0 10px;
    width:50%;
    text-align:center;
    background-color:#DDA0DD;
}

#aviso{
    float:left;
    border:solid 1px black;
    padding:10px;
    margin:-1.8px 0px 0 -1px;
    width:45.4%;
    text-align:center;
}

Gracias por la corrección.
En línea
Páginas: [1]
« anterior próximo »
 

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