migrar tablas a capas

[tyo100]

Tengo una web hecha en con tablas, ahora estoy empezando a meterme en CSS y quisiera pasarla a capas, solo se me ha presentado 1 problema, hay una parte donde las tablas estan asi



esto va en la parte superior de la pagina y va centrado, he estado moviendole pero no me queda, se ponen una sobre otra o de plano brincan un renglon, haber si alguien me puede dar una ayudadita

[programeitor]

<div style="width:50%;height:100px;margin:auto;">
<div style="float:left;width:50%;height:100%;background:gray; ">1</div>
<div style="float:right;width:50%;height:40%;background:r ed;">2</div>
<div style="float:left;width:15%;height:60%;background:bl ue;">3</div>
<div style="float:right;width:35%;height:60%;background:aqua; ">4</div>
</div>

[tyo100]

muchas gracias :D y pues me varan varias veces por aqui

[baccxus]

Hola tyo100.

Viendo la respuesta de programeitor, tengo otra opción, porque mejor no pones el código de lo que tienes en ese encabezado para darte mi respuesta, para que no "abuses" de las divisiones, pues el diseño con CSS no se hace igual que con las tablas.

Porque veo que tienes un espacio como para un logotipo y unas divisiones que me parecen enlaces, se podría hacer de otra manera que no use tantas divisiones, pero claro, tendríamos que ver cual es el contenido.

Saludos.

[tyo100]

Todavia no tiene codigo estoy haciendo una plantilla para implementarla con PHP+MySQL+AJAX

Div1 = un logo
Div2 = un menu
Div3 = mostrara imagen aleatoria
Div4 = mostrara iniciar Sesion para usuarios y/o cerrar sesion(segun el caso) tambien le mostrara por ejemplo 1 partidas pendientes

La plantilla la hice en con tablas ahora la pase a divs, en que aspectos se abusa de de las divisiones

[baccxus]

Solo necesitas una división, o sea (esto lo estoy haciendo directamente aquí):

Código HTML:

<div id="header"><!--Corregido gracias a Ramm -->
<img src="tulogotipo.png" alt="tupagina.com"/>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<ul>
<span class="random"><script de imagen aleatoria>...</script></span>
<form .....>....</form></div> 

Esto es a grandes rasgos tu código, ahora el CSS:

Código:

#header {width: 100%;
height: 150px; /*por ejemplo*/
}
#header ul {/*el menu*/
position: relative;
width: 60%;
float: right;
}
#header li {display: inline;
}
#header img {*/el logotipo*/
position: relative;
float: left;
margin: 5px;
}
#header a {
color: black;
text-decoration: none;
}
.random {
}
form {
}...

Esto es a grandes rasgos, solo lo condicionas a tu página.

Saludos,

[ramm]

Si se me permite, corregire unos detalles:

Código HTML:

<div id="header"><!--(lo llamas header en el CSS)-->
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<ul>
<span class="random"><script de imagen aleatoria>...</script></span>
<form .....>....</form></div> 

Código:

#header {width: 100%;
height: 150px; /*por ejemplo*/
background-image:url(logo.jpg);
background-repeat:no-repeat;
}
#header ul {/*el menu, los position:relative no son necesarios.*/
width: 60%;
float: right;
}
#header li {display: inline;
}
*/#header img {todo esto lo pongo como comentario, el logo es parte del layout, por lo tanto no debe ir como contenido.
position: relative;
float: left;
margin: 5px;
}*/
#header a {
color: black;
text-decoration: none;
}
.random {
}
form {
}...

De resto debe funcionar bien.

[baccxus]

Ya corregí el error más grave que era el nombre del id encabezado por header.

Por otra parte, lo del logotipo depende de cada uno, tu lo usas como layout, yo lo utilizo como contenido y por lo general le pongo un link hacia la página principal, además alguién que tenga desactivado el css podrá verlo, o en caso de no usar las imágenes o usar un lector de pantalla podrá usar el texto alternativo para referenciarse, igual si se imprime la página el logotipo no aparecerá (en donde trabajo es norma que se imprima), puesto que los backgrounds no se imprimen.

Saludos,