Ayuda Maquetacion Layout Css

[EL_CID_CAMPEADOR]

Saludos!!!

Me gustaria hacer un layout con las siguientes cajas (en css) correctamente ordenadas.



el caso esque yo kiero un layout ke kede tal que asi:


------------- HEADER -------MENU1
------------ HEADER 2 -------------
- BOX 1 ------- BOX 2 ------- MENU 2 -
- BOX 3 ------- BOX 4 ------- MENU 2 -
- BOX 5 ------- BOX 6 ------- MENU 2 -
- BOX 7 ------- BOX 8 ------- MENU 2 -
------------- FOOTER --------------
------------- FOOTER 2 ------------



Pero solo consigo k me kede asi:

------------- HEADER --------------
------------ HEADER 2 -------------
BOX 1 ------- BOX 2 ------- BOX 3 - MENU 1
BOX 3 BOX 3 BOX 3 BOX 3 BOX 3 MENU 2 MENU 1
BOX 4 ----- BOX 5 BOX 3 BOX 3 MENU 2
BOX 6 BOX 6 BOX 6 BOX 6 BOX 6
------------- FOOTER --------------
------------- FOOTER 2 ------------




Alguien me podria echar una mano?

si pudieses pegarme un codigo rapido, os lo agradeceria con toda mi alma. yebo to la mañana intenntando corregir esto, pero no puedorl !! mis conocimientos no me dan pa mas!!!

[Aresillo]

Yo estoy empezando y no creo que te lo pueda resolver, aunque lo intento que así practico...
Lo que estaría bien, es que pusieras el código que ya tienes porque trabajaríamos menos...
A ver si lo consigo...
Por cierto, como lo quieres con pixeles...con tantos por cientos... centrado... a la izda...

Aresillo!!

[Aresillo]

Bueno, pues al final si que he podido...aunque llevo una hora...
Te pongo el código, como no has dicho nada lo he hecho para 800 px.
Aquí el html:

Código PHP:

  <div id="contenedor">
    <div id="titulo">
        <div id="header"> HEADER</div>
        <div id="menu">   
        <ul>
          <li><a href="#">Enlace 1</a>
          <li><a href="#">V&#237;nculo 2</a>
          <li><a href="#">Otro enlace</a>
          <li><a href="#">Link chulo</a>
        </ul>
       </div>
   </div>
   <div id="header2">Header 2</div>
   <div id="cuerpo">
       <div id="boxodd">
       <h2 class="titlat">BOX 1</h2>
        <div id="registro" class="cuerpolateral">
        Contenido caja.
        </div><h2 class="titlat">BOX 3</h2>
        <div id="registro" class="cuerpolateral">
        Contenido caja.
        </div><h2 class="titlat">BOX 5</h2>
        <div id="registro" class="cuerpolateral">
        Contenido caja.
        </div>
        <h2 class="titlat">BOX 7</h2>
        <div id="registro" class="cuerpolateral">
        Contenido caja.
        </div></div>
      <div id="menu2"><ul>
             <li><a href="#">Enlace 1</a>
             <li><a href="#">V&#237;nculo 2</a>
             <li><a href="#">Otro enlace</a>
             <li><a href="#">Link chulo</a>
             <li><a href="#">M&#225;s enlaces</a>
             <li><a href="#">Otro &#250;ltimo</a>
      </ul></div>
       <div id="boxeven"><h2 class="titlat">BOX 2</h2>
        <div id="registro" class="cuerpolateral">
        Contenido caja.
        </div><h2 class="titlat">BOX 4</h2>
        <div id="registro" class="cuerpolateral">
        Contenido caja.
        </div><h2 class="titlat">BOX 6</h2>
        <div id="registro" class="cuerpolateral">
        Contenido caja.
        </div><h2 class="titlat">BOX 8</h2>
        <div id="registro" class="cuerpolateral">
        Contenido caja.
        </div></div>
  </div>
    <div id="footer">
       &#169; 2008 patatin patatan
    </div>
    <div id="footer2">
       &#169; 2008
    </div>
</div>  
   

Aquí el css:

Código PHP:

  BODY {
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0;
    padding:0;
    text-align: center;
    background-color: #ebebeb;
}
#contenedor{
    text-align: left;
    width: 800px;
    margin: auto;
} 
#titulo{
    margin: 0;
    height:150px;
}
#header{
    text-align: center;
    width: 600px;
    height:150px;
    margin: auto;
    float:left;
    background-color: #00CCFF;
    color: #333300;
    font-size:12pt;
    font-weight: bold
}
#menu{
   width: 200px;
   height:150px;
   background-color: #0099FF;
   float:right;
   text-align:center;
}
#menu ul{
   margin : 0 0 0 0px;
   padding: 0 0 0 0px;
   list-style: none;
}
#menu li{
   background-color: #0099FF;
   margin: 2 2 2 2px;
   padding: 2 2 2 2px;
   font-weight: bold;
}
#menu a{
   color: #3333cc;
   text-decoration: none;
}
#header2{
    background-color: #d0d0ff;
    color: #333300;
    font-size:12pt;
    font-weight: bold;
    padding:0px;
    text-align:center;
}
#cuerpo{
    margin: 0;
    background-color:#ffffcc;
}
#boxodd{
    width: 275px;
    float: left;
    margin:0;
    background-color: #99FFFF;
}
.titlat{
background-color:#68729E;
color:#ffffff;
font-size:8pt;
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}
.cuerpolateral{
padding: 5px 4px 13px 10px;
} 
#menu2{
    width: 250px;
    background-color: #999999;
    float:right;
    margin:0;
    text-align:center;
}
#menu2 ul{
    margin : 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
}
#menu2 li{
    background-color: #ffffcc;
    margin: 2 2 2 2px;
    padding: 2 2 2 2px;
    font-weight: bold;
}
#menu2 a{
    color: #3333cc;
    text-decoration: none;
}
#boxeven{
    margin-left: 275px;
    background-color: #ffffff;
    width: 275px;
}
#footer{
    background-color: #cccccc;
    text-align:right;
    clear: both;
} 
#footer2{
    background-color: #cccccc;
    text-align:right;
    clear: both;
}  
   

Y aquí el resultado:
http://cursos.anfap.com/60user0874/fdw/prueba.html

A ver si te convence...
Seguro que estos jefales...lo pueden hacer mejor y con menos código pero aquí hasta donde puedo llegar yo... y a duras penas...

Un saludo!

Aresillo!!
PD: Acabo de ver que con el explorer se descoyunta un poco...a ver si alguien sabe resolverlo...puto explorer!! lo odio!

[Null_]

Prueba este codigo , como no dijiste dimensiones, imaginé que eran 700px

<html><head>

<style type="text/css">
<!--
body {font-family:Trebuchet MS;font-size:12px;}

#estructura {width:700px;}

#header1
{background-color:#000;color:#FFF;}

#menu1
{background-color:#CCC;float:right;}

#header2
{background-color:#888;}

#contenedor {margin-right:200px;}

#contenido1
{background-color:#900;color:#FFF;width:250px;float:left;}

#contenido2
{background-color:#009;color:#FFF;margin-left:250px;}

#menu2
{background-color:#066;float:right;width:200px;}


#footer1
{background-color:#E84;}

#footer2
{background-color:#000;color:#FFF;}
-->
</style>

</head>
<body>


<div id="estructura">

<div id="menu1">Contactanos | Foro | Login</div>
<div id="header1">Cabecera<br />Cabecera<br />Cabecera<br /></div>


<div id="header2">Cabecera Numero Dos</div>


<div id="menu2">
Articulos<br />
Comentarios<br />
Informaciones<br />
Aportanos<br />
</div>

<div id="contenedor">

<div id="contenido1">
Este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero

uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido

numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el

contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este...
</div>

<div id="contenido2">
Este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero

dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido

numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el

contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es

el contenido numero dos este...
</div>

</div>

<div id="footer1">Pie de Pagina?</div>
<div id="footer2">Copyright © Todos los derechos Reservados</div>

</div>

</body>
</html>

Suerte :D

[EL_CID_CAMPEADOR]

Muxisimas Gracias!!!!

[Aresillo]

Que guay! mucho mas claro que el mio!
Gracias Null!

Aresillo!!

[EL_CID_CAMPEADOR]

Aresillo, Me gusto mas el tuyo :P Muchas gracias A los dos Por las molestias

[EL_CID_CAMPEADOR]

aunke tb voi a usar el tuyo Null

[Null_]

Gracias y suerte en tu web