[SOLUCIONADO] Estructura basica para este diseño

jairogill · #1 (**permalink**) 05/04/2016, 09:26

Saludos amigos,

pues bien, queria ver si me podian ayudar a hacer la estructura de codigo para este diseño, soy nuevo en esto pero ya e trabajado con otros sitios web, solo que este se me hace un poco mas complicado...

La pagina va ser full size, o sea que va cubrir el 100% del navegador.

Si necesitan mas detalles me pueden avisar.

Gracias de antemano.

(soy diseñador grafico, en caso que necesiten ayuda con el diseño de pagina web estamos a la orden )

DesgraciadoGabo · #2 (**permalink**) 05/04/2016, 16:53

Claro que sí pero tengo una duda, ¿Qué día me harían el deposito?

¿Algún administrador puede cerrar este tema?

jairogill · #3 (**permalink**) 05/04/2016, 18:55

Cita:

Iniciado por DesgraciadoGabo

Claro que sí pero tengo una duda, ¿Qué día me harían el deposito?

¿Algún administrador puede cerrar este tema?

No entiendo? se supone que deba ser un chiste o algo?

:/

Rafael · #4 (**permalink**) 05/04/2016, 19:19

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.

jairogill · #5 (**permalink**) 05/04/2016, 19:32

Cita:

Iniciado por Rafael

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

xfxstudios · #6 (**permalink**) 06/04/2016, 05:12

y no es más fácil utilizar una librería como bootstrap para maquetar eso y luego vas personalizando reglas css dentro de bootstrap para adaptarla a tu estilo

jairogill · #7 (**permalink**) 06/04/2016, 07:10

Cita:

Iniciado por xfxstudios

y no es más fácil utilizar una librería como bootstrap para maquetar eso y luego vas personalizando reglas css dentro de bootstrap para adaptarla a tu estilo

Nunca he usado bootstrap :/ , en realidad solo se lo basido de html y css