problemas con la plantilla!

Hola, perdon por las molestias, pero tengo otr problema, al anterior ya lo pude solucionar, ahora no puedo hacer que la planilla1, o sea la primera, tenga relacion con el estilo2... aca les dejo el html de la planilla:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css">
</head>

<body bgcolor="#FFFFFF">
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>logotipo</td>
<td>banner</td>
</tr>
</table>

<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>titulo</td>
<td>rutas</td>
<td>flechas</td>
</tr>
</table>
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>menu</td>
<td>contenido</td>
</tr>
</table>
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>contador</td>
<td>opciones</td>
<td>flechas</td>
</tr>
</table>
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>fecha</td>
<td>hueco</td>
<td>firma</td>
</tr>
</table>
</body>
</html>

y aca les dejo el diseño de estilo2:

table.99 {width:99% ;}

td.a1{Red ;}
td.a2{Red ;}

td.b1{Red ;}
td.b2{Red ;}
td.b3{Red ;}

td.c1{Red ;}
td.c2{Red ;}
td.c3{Red ;}

td.d1{Red ;}
td.d2{Red ;}
td.d3{Red ;}

td.e1{Red ;}
td.e2{Red ;}
td.e3{Red ;}


Espero que me puedan solucionar el problema, desde ya muchas gracias!



Disculpen las molestias!
Para empezar, cambia el nombre del estilo .99 por ancho99, pues el nombre de un estilo NUNCA puede empezar con un número (fue un fallo que cometí al escribir las lecciones). Es decir, en lugar de:

table.99 {width:99% ;}

pon

table.ancho99 {width:99% ;}

Y cambialo también en la página HTML.


En segundo lugar... en la hoja de estilos tienes definidos un montón de estilos para tabla y celdas, pero en cambio en la página html no usas ninguno de elos estilos definidos en la hoja de estilos. La página está bien relacionada, el problema es que no estas usandola.

En la hoja de estilos no has definido nada para las celdas, pusiste
td.e2{red ;}
que no significa nada. Pone red (rojo), pero qué rojo? el color de fondo? el texto? así no lo entiende el navegador. Te lo dejo vacio abajo, para que le añadas las características que quieras. Y eliminamos td.c3{ ;} pues no existe en la página ninguna celda c3, oki?

Deberias dejarlo así:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css">
</head>

<body bgcolor="#FFFFFF">
<table class="ancho99">
<tr>
<td class="a1">logotipo</td>
<td class="a2">banner</td>
</tr>
</table>

<table class="ancho99">
<tr>
<td class="b1">titulo</td>
<td class="b2">rutas</td>
<td class="b3">flechas</td>
</tr>
</table>

<table class="ancho99">
<tr>
<td class="c1">menu</td>
<td class="c2">contenido</td>
</tr>
</table>

<table class="ancho99">
<tr>
<td class="d1">contador</td>
<td class="d2">opciones</td>
<td class="d3">flechas</td>
</tr>
</table>

<table class="ancho99">
<tr>
<td class="e1">fecha</td>
<td class="e2">hueco</td>
<td class="e3">firma</td>
</tr>
</table>

</body>
</html>
y acá el diseño de estilo2:

table.ancho99 {width:99% ; border:0px; margin:0px ; padding:0px ; }

td.a1{ ;}
td.a2{ ;}

td.b1{ ;}
td.b2{ ;}
td.b3{ ;}

td.c1{ ;}
td.c2{ ;}

td.d1{ ;}
td.d2{ ;}
td.d3{ ;}

td.e1{ ;}
td.e2{ ;}
td.e3{ ;}

Ahora con esto, lo único que verás es que las tablas apareceran centradas, sin borde, y sin margenes internos ni externos, pues es lo unico que hay definido en la hoja de estilos. Para hacer más cambios has de poner las características que quieras entre los corchetes.

Ante cualuquier duda ya sabes donde preguntarnos.

Un abrazo! :wink: