Tema: Error en maqueta HTML
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/05/2015, 09:36
JimmyBrain
 
Fecha de Ingreso: noviembre-2014
Mensajes: 46
Antigüedad: 10 años
Puntos: 0
Error en maqueta HTML
Hola tengo el siguiente codigo :

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <link href="css/principal.css"type="text/css" rel="stylesheet"/>
  5. </head>
  6. <body>
  7.  
  8. <div class="contenedor">
  9.     <br>
  10.     <div class="logo">
  11.         <div class="borde_redondo">
  12.  
  13.         </div>
  14.     </div>
  15.     
  16.     <div class="seccion_header">
  17.         <div class="primera_parte">
  18.             <header>
  19.                 dsadsadsadasdadas
  20.             </header>
  21.             <header>
  22.                 dsdsadasdadasd          
  23.             </header>
  24.             <nav>
  25.             <center>
  26.  
  27.             </nav>
  28.         </div>
  29.     </div>
  30.  
  31.     <div class="otro_menu">
  32.         <ul>
  33.             <li><a href="#">Link7</a></li>
  34.             <li><a href="#">Link8</a></li>
  35.             <li><a href="#">Link9</a></li>
  36.             <li><a href="#">Link10</a></li>
  37.             <li><a href="#">Link11</a></li>
  38.             <li><a href="#">Link12</a></li>
  39.             <li><a href="#">Link12</a></li>
  40.             <li><a href="#">Link12</a></li>
  41.             <li><a href="#">Link12</a></li>
  42.             <li><a href="#">Link12</a></li>
  43.         </ul>
  44.     </div>
  45.     <div class="contenido">
  46.         
  47.     </div>
  48.     
  49.     <br><br><br>
  50.     <footer>
  51.         <p>Contact : [email protected] Telefono : 44564562 Direccion : XXX</p>
  52.     </footer>
  53. </div>
  54. </body>


Código CSS: 
Ver original
  1. body {
  2.     background-color:gray;
  3.     color:black;
  4.     font-family:helvetica,arial,sans-serif;
  5. }
  6.  
  7.  
  8. .contenedor { 
  9.     display:inline-block;
  10.     width:100%;
  11.     min-height:750px;
  12.     border:2px solid #333;
  13. }
  14.  
  15. .logo {
  16.     display:inline-block;
  17.     width:20%;
  18.     height:200px;
  19.     text-align:center;
  20.     border:2px solid #333;  
  21. }
  22.     
  23. .borde_redondo {
  24.     display:inline-block;
  25.     border:4px solid #000000;
  26.     width:90%;
  27.     min-height:150px;
  28.     background-color:red;      
  29.     -webkit-border-radius: 15px;
  30.     -moz-border-radius: 15px;
  31.     border-radius: 15px;     
  32.          
  33. }
  34.  
  35. .seccion_header {
  36.     display:inline-block;
  37.     width:79%;
  38.     min-height:200px;
  39.     border:2px solid #333;  
  40.  
  41. }
  42.  
  43. .primera_parte {
  44.     display:inline-block;
  45.     width:70%;
  46.     min-height:200px;
  47.  
  48. }
  49.  
  50. header {
  51.     border:2px solid #333;  
  52.     text-align:center;
  53. }
  54.  
  55. nav {
  56.     border:2px solid #333;
  57.     text-align:center;  
  58. }
  59.  
  60. .otro_menu {
  61.     display:inline-block;
  62.     width:20%;
  63.     min-height:400px;
  64.     border:2px solid #333;
  65. }
  66.  
  67. .contenido {
  68.     display:inline-block;
  69.     width:50%;
  70.     min-height:400px;
  71.     border:2px solid #333;
  72. }
  73.  
  74. footer {
  75.     display:inline-block;
  76.     width:90%;
  77.     min-height:50px;
  78.     border:2px solid #333;
  79. }
  80.  
  81. 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 ?