Maquetación con XHTML y CSS

RabidFish · #1 (**permalink**) 13/05/2009, 13:25

Hola a todos.
Antes que nada, puse este tema aquí porque pensé que era mejor ponerlo en XHTML o CSS ya que son muy específicos. Por otra parte, sé que estoy muy lejos de ser el primero en preguntar sobre este tema, pero me parece que mi caso es algo especial y no sé si me recomiendan intentar con div o seguir usando tablas.
El tema es el siguiente: soy uno de los tantos usuarios que deciden probar las capas para reemplazar a las tables, ya que por lo visto, hay muchos argumentos en contra de éstas últimas como única forma de maquetación. He intentado, pero lamentablemente sólo s eve el logo y el resto no aparece; sin dudas me falta mucho por saber para lograrlo, por eso recurro a ustedes.
Dejo una imagen para que vean cómo está formada mi web usando tablas y más abajo explico con más datos:

NOTA: Si se fijan, al sumar los valores de ancho en los menúes, contenido y líneas 1 y 2, se obtiene 758 y no 760, eso es porque quiero dejar un pixel a cada extremo para un borde que engloba toda la página.

Mi web está formada básicamente de un logo en la parte superior (que es sólo una imagen de 760x152 px), otro espacio debajo del mismo muy pequeño que contiene una imagen con un vínculo (línea 3), y 5 columnas debajo que son 2 menúes laterales, el contenido al centro y entre ellos unas líneas que los dividen, las mismas son imágenesp ara darle más decoración.
He intentado pasar de la tabla a div pero se me hace complicado, sólo he visto ejemplos con hasta 3 columnas, pero no tantas como yo busco.
He pensado juntar el logo con la línea 3 que hay debajo (la llamo línea, pero en realidad es un espacio que lleva una imagen como dije antes), y también juntar cada menú lateral con la línea separativa que tienen al lado usando una imagen de fondo en ese div que incluya tanto el fondo del menú como la línea. La verdad suena más sencillo hacerlo como acabo de decir, pero mi intención es diseñar la web tal cual estaba antes, como se ve en la imagen de arriba.
Otro detalle... si se fijan en la imagen que he colocado, en la parte que dice línea 1 hay un pequeño espacio en la parte inferior, esa celda es donde tengo una imagen con flechas que sirven para ir al top de la página (#); supongo que esto no es problema ya que iría un div dentro del div de linea 1.
También me gustaria agregar un pie debajo para el copyright, aunque eso no lo he colocado en la imagen y estaría, visualmente, fuera de la "tabla".
Bueno, para finalizar, dejo el código XHTML y el CSS para que lo analicen, ya sé que debe tener muchos errores y por eso lo dejo, a ver si me pueden ayudar.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titulo</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<div id="contenedor">
    <div id="logo"></div>
    <div id="lineatres"></div>
    <div id="menuizquierdo"></div>
    <div id="lineauno"></div>
    <div id="contenido"></div>
    <div id="lineados"></div>
    <div id="menuderecho"></div>
    <div id="pie"></div>
</div>
<body>
</body>
</html>

NOTA: En el CSS sólo incluyo lo referido a los div, ya que considero innecesario mostrar el formato de a, p, h1, h2, h3, etc. porque no tienen nada raro. Los colores son a modo de ejemplo.

Código css:

Ver originalbody {
    background-color: #000;
    color: #FFF;
    font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
    font-size: 9px;
}
 
#contenedor {
    width: 760px;
    margin: 0px auto;
    text-align: left;
}
 
#logo {
    background-image: url(imagenes/logo.jpg);
    width: 760px;
    height: 152px;
}
 
#lineatres {
    background-image: url(imagenes/linea_3.jpg);
    width: 760px;
    height: 13px;
}
 
#menuizquierdo {
    background-color: #FF0000;
    width: 158px;
    float: left;
}
 
#lineauno {
    background-image: url(imagenes/linea_1.jpg);
    margin-left: 158px;
    width: 17px;
}
 
#contenido {
    background-color: #000;
    width: 484px;
}
 
#lineados {
    background-image: url(imagenes/linea_2.jpg);
    margin-right: 93px;
    width: 9px;
}
 
#menuderecho {
    background-color: #F00;
    width: 93px;
    float: right;
}
 
#pie {
    clear: both;
}

No quiero márgenes entre los div, en la tabla usaba borde 0 y cellspacing igual para dejar todo pegado.
Siento haber sido tan complicado al explicarme, espero que se entienda

Saludos y gracias de antemano.

jomaruro · #2 (**permalink**) 16/05/2009, 06:40

Hola:

Deberías haber puesto tu duda en el foro de CSS, te habrían contestado antes.

Yo te aconsejo que maquetes con CSS como estás intentando y en tu caso compara este código con el que tu tienes:

Código:

body {
    background-color: #000;
    color: #FFF;
    font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
    font-size: 9px;
}
 
#contenedor {
    width: 760px;
    margin: 0px auto;
    text-align: left;
}
 
#logo {
    background-image: url(imagenes/logo.jpg);
    width: 760px;
    height: 152px;
}
 
#lineatres {
    background-image: url(imagenes/linea_3.jpg);
    width: 760px;
    height: 13px;
}
 
#menuizquierdo {
    background-color: #FF0000;
    width: 158px;
    float: left;
}
 
#lineauno {
    background-image: url(imagenes/linea_1.jpg);
    /*margin-left: 158px;*/
    float:left;
    width: 17px;
}
 
#contenido {
    background-color: #000;
    width: 483px;
    float:left;
}
 
#lineados {
    background-image: url(imagenes/linea_2.jpg);
    /*margin-right: 93px;*/
    float:left;
    width: 9px;
}
 
#menuderecho {
    background-color: #F00;
    width: 93px;
    float: left;
}
 
#pie {
    clear: both;
}

En el caso del width del contenido lo he reducido un px porque sino no cabe en los 760px del contenedor y rompe el flujo de la página y se situa a la izquierda. Eso lo adaptas tu según los margin, padding y border que pongas.

Saludos.