Problema Maquetacion

fedeclav · #1 (**permalink**) 22/10/2012, 06:24

Hola, buen dia

eh estado leyendo tutoriales y estoy intentando hacer una maquetacion, y no me queda como quiero, queria saber cual es el error que tengo
les muestro una imagen que es como quiero mi pagina

http://www.subirimagenes.com/otros-indexmaqueta-8074006.html

Código:

</head>

<body>


<body>

<div id="todo">
     
	  <div id="encabezado">
        	  
	  </div>
	  
	  <div id="menu">
	  
	         <ul>
			      <li><a href="">Noticias</a></li>
				
				  <li><a href="">Categorias</a></li>
			 
			 </ul>		 	
				  
	   </div>	
       
       <div id="cajadesplazamiento">
       
           
        </div>
       
          
	    <div id="contenido">
              		
	         
				
		     	   	  </div>

            <div id="barraderecha">



              </div>

        
        <div id="pie">



              </div>


  </div>

</body>
</html>

Código:

#todo{ 

  width: 1000px;     
  margin: 0 auto;    
  background-color: #F00;   
  overflow: hidden;
       }
	   
body{
        background-color: #0F0  ;  
	  }

#encabezado{
           height: 100px;        
           }
		   
#menu{  
      height: 50px;             
	  background: #000000; 
	  
	  }
	  
#menu ul {

           padding: 0 px;
		   margin: 0px;
            list-style: none;             
			list-style-image:none;          
			list-style-type: none;           
			
			}
			
#menu ul li{

             list-style: none;
			 list-style-image: none;
			 list-style-type: none;
			 padding: 10px;
			 margin: 0px;
			 float: left;
			 margin-left: 50px;
			 color: #66FF00;
			 font-style: 14px;
			 font-weight: bold;
			 
			 }
			 
#menu ul li:Hover {

             background: #FF0000;    
			 
			 }
			 
			 
#menu ul li a {

             color: #FFFFFF ;       
			 text-decoration: none;    
			 
			 }
			 
#cajadesplazamiento {
	
	  
	  width: 1000px;    
  margin: auto 0;
   background-color: #00F;  
  overflow: hidden;
   height: 150px;
  
       }
	   
#contenido {
	
	  
	  width: 600px;     
  margin: left;
   background-color: #000;   
  overflow: hidden;

  
       }	   
	   
	   	   
	 	   
#barraderecha {
	
	  
	  width: 400px;  
  margin: right;
   background-color: #FF0;   
  overflow: hidden;
  
       }	 
	   
	   
		 	   
#pie{
	
	  
	  width: 1000px;     
  margin: 0 auto;
   background-color: #F66;   
  overflow: hidden;
  
       }

Espero que puedan ayudarme, ya que estoy haciendo mi pagina web y no soy muy habil en el tema

tutorias · #2 (**permalink**) 22/10/2012, 11:08

Un saludo. Te recomiendo entrar al estándar html5. En cuanto a CSS, debes utilizar las propiedad "display: inline-block;" para que el bloque no ocupe toda la linea.

Su maqueta:

Código HTML:

<!DOCTYPE html>
<html lang="es-CO">
<head>
  <meta charset="UTF-8">
  <title>tutorias.co</title>
  <style type="text/css">
    header{
      border        : 1px solid #ccc;
      margin        : 0 auto;
      max-width     : 1000px;
      position      : relative;
      vertical-align: top;
    }
    section{
      border        : 1px solid #ccc;
      margin        : 0 auto;
      max-width     : 1000px;
      position      : relative;
      vertical-align: top;
    }
    article, aside{
      border        : 1px solid #ccc;
      display       : inline-block;
      min-width     : 75%;
      padding       : .5em;
      vertical-align: top;
    }
    ul li{
      display:inline-block;
    }
    footer{
      border        : 1px solid #ccc;
      margin        : 0 auto;
      max-width     : 1000px;
    }
    .contentHeader{
      border        : 1px solid #ccc;
      display       : inline-block;
      max-width     : 60%;
      padding       : .5em;
      vertical-align: top;
    }
    .cajaImagenes{
      border   : 1px solid #ccc;
      margin   : 0 auto;
      max-width: 1000px;
    }
  </style>
</head>
<body>
  <header>
      <div class="contentHeader" style="width:10%"><img src="logo.jpg" alt="logo" /></div>
      <div class="contentHeader">
        <nav>
          <ul>
              <li><a href="">Noticias</a></li>
              <li><a href="">Categorias</a></li>
          </ul>
        </nav>
      </div>
  </header>
  <div class="cajaImagenes">
      <img src="img1.jpg" alt="img1" /><img src="img2.jpg" alt="img2" /><img src="img3.jpg" alt="img3" />
  </div>
  <section>
    <article>
       contenido
    </article>
    <aside style="min-width:21%">
       barra derecha
    </aside>
  </section>
  <footer>
       Pie
  </footer>
</body>
</html>