Ver Mensaje Individual
  #5 (permalink)  
Antiguo 05/04/2016, 19:32
jairogill
 
Fecha de Ingreso: marzo-2016
Mensajes: 9
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Estructura basica para este diseño

Cita:
Iniciado por Rafael Ver Mensaje
jairogill es que se vé nulo esfuerzo de tu parte.

La estructura básica tú mismo verbalízala.

- Hay una columna a la izquierda.

- A la derecha ese espacio tiene una cabecera y abajo hay espacio para el contenido.

Pues eso mísmo ponlo en código html y luego le das formato con css.
Perdon es que la verdad al momento de tirar el post nisiquira me tome la molestia de empezar el codigo... tiene toda la razon en lo que me dice. pero volviendo al tema pues he hecho un pequeño avanze



Este es el codigo:

Código HTML:
<!DOCTYPE html>
 
<html lang="es">
 
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
 
<body>
    <header>
       <a href="index.html" class="logo">Condominios</a>
    </header>
    <nav>
        <ul>
            <li><a href="index.html" tittle="home">Home</a></li>
        </ul>
    </nav>
    <section>
       <article>
           <h2>Titilo de contenido</h2>
           <p> Contenido</p>
       </article>
    </section>
    <aside>
       <h3>Titulo de contenido</h3>
           <p>contenido</p>
    </aside>
    <footer>
        Creado
    </footer>
</body>
</html> 
Código:
*{
	 font-family: Arial;
}

body{
	background: url(bg.jpg) no-repeat;
    background-size: 100%;
	height: auto;
    width: 850px;
    margin: 0 auto;
    background-attachment:scroll;
    background-position: center;
}

header{
    background: #343843;
    color: white;
    height: 80px;
}

header a{
    color: #24272e;
    background: aqua;
    text-decoration: none;
    padding: 60px 40.5px;
}

nav{
    background: #24272e;
    color: white;
    height: 30px;
    width: 675px;
    float: right;

}

nav ul{
    margin: 0;
    padding: 0;
}

nav ul li{
    list-style: none;
    display: inline-block;
    padding: 5px 10px;
    margin-left: -10;
}

nav ul li a{
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
}

section{
    background: #ffffff;
    color: darkgray;
    width: 675px;
    float: right;
}

article{
    background: #fff;
    color: #000;
    
}

aside{
    background: #343843;
    float: left;
    width: 175px;
    height: 100%;
    display: inline-block;
    margin-top: -30px;
}

footer{
    background: #20232a;
    position: relative;
    margin-top: -65px;
    clear: both;
    width: 100%;
}