Error en maqueta HTML

JimmyBrain · #1 (**permalink**) 12/05/2015, 09:36

Hola tengo el siguiente codigo :

Código HTML:

Ver original<!doctype html>
<html lang="en">
<head>
    <link href="css/principal.css"type="text/css" rel="stylesheet"/>
</head>
<body>
 
<div class="contenedor">
    <br>
    <div class="logo">
        <div class="borde_redondo">
 
        </div>
    </div>
    
    <div class="seccion_header">
        <div class="primera_parte">
            <header>
                dsadsadsadasdadas
            </header>
            <header>
                dsdsadasdadasd          
            </header>
            <nav>
            <center>
 
            </nav>
        </div>
    </div>
 
    <div class="otro_menu">
        <ul>
            <li><a href="#">Link7</a></li>
            <li><a href="#">Link8</a></li>
            <li><a href="#">Link9</a></li>
            <li><a href="#">Link10</a></li>
            <li><a href="#">Link11</a></li>
            <li><a href="#">Link12</a></li>
            <li><a href="#">Link12</a></li>
            <li><a href="#">Link12</a></li>
            <li><a href="#">Link12</a></li>
            <li><a href="#">Link12</a></li>
        </ul>
    </div>
    <div class="contenido">
        
    </div>
    
    <br><br><br>
    <footer>
        <p>Contact : [email protected] Telefono : 44564562 Direccion : XXX</p>
    </footer>
</div>
</body>

Código CSS:

Ver originalbody {
    background-color:gray;
    color:black;
    font-family:helvetica,arial,sans-serif;
}
 
 
.contenedor { 
    display:inline-block;
    width:100%;
    min-height:750px;
    border:2px solid #333;
}
 
.logo {
    display:inline-block;
    width:20%;
    height:200px;
    text-align:center;
    border:2px solid #333;  
}
    
.borde_redondo {
    display:inline-block;
    border:4px solid #000000;
    width:90%;
    min-height:150px;
    background-color:red;      
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;     
         
}
 
.seccion_header {
    display:inline-block;
    width:79%;
    min-height:200px;
    border:2px solid #333;  
 
}
 
.primera_parte {
    display:inline-block;
    width:70%;
    min-height:200px;
 
}
 
header {
    border:2px solid #333;  
    text-align:center;
}
 
nav {
    border:2px solid #333;
    text-align:center;  
}
 
.otro_menu {
    display:inline-block;
    width:20%;
    min-height:400px;
    border:2px solid #333;
}
 
.contenido {
    display:inline-block;
    width:50%;
    min-height:400px;
    border:2px solid #333;
}
 
footer {
    display:inline-block;
    width:90%;
    min-height:50px;
    border:2px solid #333;
}
 
footer p { color: blue; }

El problema es que nunca cordinan los bloques div , el primero se ve bien , pero el segundo se ve mucho mas abajo , el tercero div se ve muy abajo y el cuarto se ve bien , ¿ alguien me podria ayudar a que se vea bien la maqueta ?

AngelKrak · #2 (**permalink**) 12/05/2015, 13:25

exactamente cual es el error por k no entendi bien ._.? y si puedes muestra con una imagen tu error :D

fede5426 · #3 (**permalink**) 12/05/2015, 19:33

El error está en que tiene todos los elementos con display: inline-block;.

Si lo que querias lograr es algo como esto:

Tenés que meter en un contenedor lo que quieras a la izquierda, y en otro contenedor lo que quieras a la derecha, y solamente a esos 2 le aplicas display: inline-block; junto con vertical-align:top; para que estén alineados por la parte superior.

Algo asi:

Código HTML:

Ver original<div class="contenedor">
  <div class="izquierda">
    <div class="logo"></div>
    <div class="menu"></div>
  </div>
  <div class="derecha">
    <header></header>
    <header></header>
    <nav></nav>
    <div class="contenido"></div>
  </div>
  <footer></footer>
</div>

Código CSS:

Ver original.izquierda,
.derecha{
  width:25%;
  display:inline-block;
  vertical-align:top;
}
 
.derecha{
  width:75%;
}

http://codepen.io/anon/pen/yNOewM

Te lo dejo armado en un codepen para que lo revises.. pero no está del todo terminado, lo hice muy rápido sólo para que te des una idea de más o menos cómo va.