Ayuda con tablas!!

[lizfranco]

Hola todos,
Soy un poco nueva en el uso de las CSS. He estado leyendo estos días bastante, y he usado ejemplos para entender el reemplazo de las tablas con CSS. pero por mas que he intentado hacer un diseño se me corre todo!.

Lo que intento hacer es una tabla como esta para empezar a trabajar:

Código:

<table width="100%"  border="0" cellspacing="5">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>

1ra fila de dos columnas (encabezado)
2da fila de una columna (menu)
3ra fila de dos columnas (contenido-menu)
4ta fila de una columna (pie de página)

Encontré un ejemplo para guiarme en esta página http://www.juque.cl/demos/cochinon/11.html pero al alterarle datos como el ancho y demas se descuadra todo.

Alguien sabe cómo puedo pasar esta tabla a CSS?

* Otra pregunta para los que manejan el uso de CSS. Primero se debe crear las "tablas" como se quiere estructurar la información y después ingresar el contenido en las "celdas"?

Gracias de antemano
Liz

[jesusbet]

1. Para maquetar con CSS debes usar divs en vez de tablas:

<div id="cabecera"><h1>contenido de la cabecera</h1></div>
<div id="menu">
<ul>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
<div id="contenidoprincipal">
<p>contenido principal, notcias, eventos, que sé yo</p>
</div>
<div id="piedepagina"><p>Pie de Página</p></div>

----

ese sería el documento html
ahora pasamos al CSS... el siguiente es un código básico, si te metes más a CSS, vas a poder explotar más las capas [layers]...
------
#cabecera {
position: relative;
width: 100%;
height: 200px;
}

#menu {
position: relative;
width: 10%;
float: left;
}

#contenidoprincipal {
position: relative;
width: 85%;
float: left;
}

#piedepagina {
position: relative;
width: 100%;
clear: both;
}

----

cualquier duda, preguntas...

sobre las tablas, no vas a usarlas mas que para presentar contenido tabular, relaciones o algo así, no para acomodar tu layout...

saludos

[lizfranco]

Gracias jesusbet,
Si había visto varios ejemplos pero n lograba entender el posicionamiento.
Parece que ya estoy entendiendo un poco mas...
Aunque aun me cuesta trabajo manejar bien las dimensiones del ancho de página. En otro mensaje leí que es mejor trabajar con % que px? Pero creo que al igual que las tablas a veces necesito tener un ancho de tabla estático como de 740px y no de 80%...

Voy a seguir trabajando y preguto cualquier cosa.
Gracias!!!!

Liz

[jesusbet]

si, justo lo que dices, a veces tienes layouts en imagenes, y pues necesitas usar px, pero si no, usas %, te duele menos la cabeza, jeje...

claro, cualquier cosa, preguntas acá...

[lizfranco]

Gracias jesusbet,
Tu consejo me ha ayudado bastante. Ya parece mas o menos que estoy entendiendo, aunque tengo que confesar que trabajar con <div> es un poco como trabajar a ciegas no?
Lo que estoy haciendo para no perderme es declararle a todas las separaciones un borde y después se lo borro, mientras me guio en espacios y organización de la información.

Ya que soy nueva en esto quisiera saber lo siguiente, yo uso DreamWeaver para diseñar las páginas. Trabajo Split (Codigo y Diseño) pero hay algunas cosas que en el diseño no se ven bien, como por ejemplo unas capas se suben... Igual le tengo vista preliminar en el navegador... me debo guiar por que se vean bien en el navegador y no en el diseño de DreamWeaver? o en DW debería verse igual que como se va a ver en el navegador?

Gracias de atemano,
bye

Liz

[jesusbet]

sobre los divs, si usas firefox, puedes descargarte la 'navaja suiza' para los desarrolladores:
http://www.chrispederick.com/work/firefox/webdeveloper/

Sobre tu segundo comentario... te debes guiar por el navegador, o sea, por como lo ven los usuarios... si vas a trabajar con CSS, te recomiendo dejar el dreamweaver [recomendación, no obligación] y usar algún coder... yo uso el TSW Webcoder.

saludos

[jesusbet]

ah... en la extensión esa, solo haces click en OUTLINE, despues en OUTLINE BLOCK ELEMENTS y te muestra todos los divs o bloques usados, si quieres mas info, vas a INFORMATION y haces click en DISPLAY BLOCK SIZE y te muestra los bloques y sus medidas...

saludos

[lizfranco]

Gracias jesusbet,
Voy a buscar el TSW Webcoder.
Y el webdeveloper, si yo uso ForeFox, pero tengo problemas instalandolo.. aunque leí la documentación, lo desinstalé y actualicé.. pero nada..
voy a seguir intentando.. por que me parece que tienes razón, DW no es el mas adecuado...

Saludos,
Liz