[Ovillo] Una página de menu --- cómo manejar u na estructura no basada en tablas?

[webmaster]

Hola buenos días gente,

Quisiera solicitarles un poco de ayuda para tratar de maquetar una página 
usando css en lugar de una tabla.

La página en cuestión cómo esta ahora, es una tabla de 2 columnas, la primera 
con un ancho de 100 px y la segunda con un ancho de 500px.

Cada fila contiene en la primer celda una imagen, en la segunda celda contiene 
el titulo del tema y luego una descripción. Así para cada ítem, formando un 
menú que funciona cómo página principal. Digamos algo asi:


filacelda1Imagen/celda1celda2h2titulo/h2pdescripción/p/celda2/fila

Etc.

Siento que esto no deberia de ser máquetado de esta manera, asi que por favor 
todas las ideas y posibles soluciones son bienvenidas.


Por favor no se asusten demasiado, con la página es un recuerdito que me 
dejaron heredado.

http://www.negociosenguatemala.com/comercio-exterior-v2/

Saludos,

Vlad

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Re: [Ovillo] Una página de menu --- cómo manejar u na estructura no basada en tablas?

[Manuel Razzari]

Algo así, con un LI por cada item:

ul
  li id=oyd
h2Oportunidades de Negocios:/h2
pConozca las Ofertas y Demandas con oportunidades
de negocios para su empresa./p
  /li
  li id=euro
h2Eurocentro:/h2
pEspacio de promoción de oportunidades de negocio entre las
PYMES de Guatemala, América Latina y Europa./p
  /li
/ul

Luego en los estilos:

h2 { margin: 0; font-weight: normal; color: #66; }
p { margin: 0; }
li { background: url(botones/small/generico.jpg) no-repeat left center;
list-style: none;
padding-left: 100px; /* Este sería el ancho de tu primera columna */
min-height: 59px; /* Usas min-height para asegurarte de que la imagen
no se corte*/
}
* html li {min-height: auto; height: 59px; } /* Min-height para IE */

/* Para cada item le agregas un ID y le asignas la imagen */
#oyd { background-image: url(botones/small/oyd.jpg); }
#euro { background-image: url(botones/small/oyd.jpg); }

También podrías usar DD/DL/DT, pero creo que así está bien y será más sencillo..

Espero que sirva, avísame si no se entiende, saludos!


-- 
Manuel Razzari
YO   - http://ultimorender.com.ar/funkascript
CVAM - http://conVistaAlMar.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo