Foros del Web » Creando para Internet » CSS »

Rediseño de Página Web usando DIVs y CSS

Estas en el tema de Rediseño de Página Web usando DIVs y CSS en el foro de CSS en Foros del Web. Amigos, vean este código: HTML: <table> <tr> <td></td> <td colspan="25"><img id="logocoes" src="imagenes/logocoes_min.gif" alt="" /></td> <td colspan="3"><img src="imagenes/peru_gs.gif" alt="" /></td> </tr> <tr><td colspan="29"></td></tr> <tr> <td></td> <td></td><td ...
  #1 (permalink)  
Antiguo 26/04/2005, 07:20
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 20 años, 7 meses
Puntos: 0
De acuerdo Rediseño de Página Web usando DIVs y CSS

Amigos, vean este código:

HTML:

<table>
<tr>
<td></td>
<td colspan="25"><img id="logocoes" src="imagenes/logocoes_min.gif" alt="" /></td>
<td colspan="3"><img src="imagenes/peru_gs.gif" alt="" /></td>
</tr>
<tr><td colspan="29"></td></tr>
<tr>
<td></td>
<td></td><td class="Bd1"></td><td colspan="2"></td>
<td></td><td class="Bd1"></td><td colspan="2"></td>
<td></td><td class="Bd1"></td><td colspan="2"></td>
<td></td><td class="Bd1"></td><td colspan="2"></td>
<td></td><td class="Bd1"></td><td colspan="2"></td>
<td></td><td class="Bd1"></td><td colspan="2"></td>
<td></td><td class="Bd1"></td><td colspan="2"></td>
</tr>
<tr class="cont">
<td width="10"></td>
<td class="Bd1"></td>
<td id="sel"><a href="http://www.coes.org.pe/" target="_parent">Principal</a></td>
<td class="Bd1"></td><td width="5">&nbsp;</td><td class="Bd1"></td>
<td class="azul" onmouseover="this.className='cell_over1';" onmouseout="this.className='cell_out1';"><a href="http://www.coes.org.pe/coes/est2003/anual.htm" target="_parent">Estadística Anual</a></td>
<td class="Bd1"></td><td width="5">&nbsp;</td><td class="Bd1"></td>
<td class="azul" onmouseover="this.className='cell_over1';" onmouseout="this.className='cell_out1';"><a href="http://www.coes.org.pe/coes/Estadistica/Mensual.asp" target="_parent">Estadística Mensual</a></td>
<td class="Bd1"></td><td width="5">&nbsp;</td><td class="Bd1"></td>
<td class="azul" onmouseover="this.className='cell_over1';" onmouseout="this.className='cell_out1';"><a href="http://www.coes.org.pe/coes/Estadistica/Semanal.asp" target="_parent">Estadística Semanal</a></td>
<td class="Bd1"></td><td width="5">&nbsp;</td><td class="Bd1"></td>
<td class="azul" onmouseover="this.className='cell_over1';" onmouseout="this.className='cell_out1';"><a href="http://www.coes.org.pe/coes/Estadistica/Diario.asp" target="_parent">Estadística Diaria</a></td>
<td class="Bd1"></td><td width="5">&nbsp;</td><td class="Bd1"></td>
<td class="azul" onmouseover="this.className='cell_over1';" onmouseout="this.className='cell_out1';"><a href="http://www.coes.org.pe/coes/sicoes.htm" target="_parent">SICOES</a></td>
<td class="Bd1"></td><td class="Bd3">&nbsp;</td><td class="Bd1"></td>
<td class="azul" onmouseover="this.className='cell_over1';" onmouseout="this.className='cell_out1';"><a href="http://www.coes.org.pe/Sic/ptos_iccp_ora/scada.asp" target="_parent">SCADA</a></td>
<td class="Bd1"></td>
<td width="10"></td>
</tr>
<tr><td colspan="29" id="rayazul"></td></tr>
</table>


CSS:

body {font-family:Tahoma;}
a {font-size:11px; color:#008; text-decoration:none;}

.espa {width:4px;}

/* Tabla contenedora de la cabecera */
table {width:750px; border: none; border-collapse: collapse; border-spacing: 0; margin-left:auto; margin-right:auto;}
td {padding:0;}
.cont {height:25px; vertical-align:middle; text-align:center;}
.Bd1 {background-color:#041EB3; width:1px; height:1px;}
#Bd2, #td, .azul {background-color:#CCC;}
.Bd3 {width:5px;}
#rayazul {height:3px;} /* Linea base de la cabecera */
#td a:hover {background-color:#C9E4FC; display:block; height:25px; padding-top:6px; color:#F00; text-decoration:underline;}
#act, #rayazul, #sel {background-color:#3D5B96;}
#act2 {color:#fff;}
#act2:hover {color:#F00; text-decoration:underline;}
.azul {padding-bottom:1px;}
#sel a {font-size: 11px; color: #FFF;}
#sel a:hover {color:#F00;}

/* Rollover de tabs de la cabecera */
.cell_over1 {background-color: #C9E4FC}
.cell_out1 {background-color: #CCC;}

/* Logo Principal */
#logocoes {width: 120px; height: 39px;}


Yo quiero que mi página sea con puros DIVs, sin usar tablas. Como lo haría?
  #2 (permalink)  
Antiguo 27/04/2005, 02:54
Avatar de the_NEO_JP  
Fecha de Ingreso: abril-2005
Mensajes: 61
Antigüedad: 18 años, 11 meses
Puntos: 0
Empieza a leer muuchos tutoriales y libros. ;)
__________________
by. NEO_JP // Aburrimiento Total
  #3 (permalink)  
Antiguo 28/04/2005, 09:59
n2h
 
Fecha de Ingreso: octubre-2004
Mensajes: 163
Antigüedad: 19 años, 5 meses
Puntos: 0
Estas por el camino equivocado, lo importante o util, no es cambiar tablas por divs, sino darle un sentido semantico a tu codigo.
Osea, al titulo introducirlo en un h1, a los parrafos en p, a las listas en ol, etc.
Luego en el CSS le das un estilo a cada elemento.

Podrias considerar una forma de medir que tan bueno es un codigo maquetado con CSS por cuantos divs uses. Cuantos menos, mejor.
  #4 (permalink)  
Antiguo 29/04/2005, 10:21
Usuario no validado
 
Fecha de Ingreso: agosto-2003
Ubicación: Lima
Mensajes: 50
Antigüedad: 20 años, 7 meses
Puntos: 0
Gracias n2h, tienes razón, mira, he elaborado una página de prueba, el link es:

http://www.coes.org.pe/coes/prueba.htm

Creo que está mejor que el anterior no? Solo un problema, con Netscape, Mozilla Firefox e Internet Explorer se ve OK, en cambio en Opera se pierde el efecto en el tab de azul, no muestra la letra. Porqué puede ser?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:27.