Foros del Web » Creando para Internet » CSS »

de tablas a css

Estas en el tema de de tablas a css en el foro de CSS en Foros del Web. Hola tengo el siguiente codigo: Código HTML: <table> <tr> <td> <a href= "?controlador=portada &amp; accion=index" > Portada </td> <td> <a href= "?controlador=noticias &amp; accion=index" > ...
  #1 (permalink)  
Antiguo 28/07/2008, 12:06
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 13 años, 1 mes
Puntos: 43
de tablas a css

Hola tengo el siguiente codigo:
Código HTML:
<table>
		<tr>
			<td><a href="?controlador=portada&amp;accion=index">Portada</td>
			<td><a href="?controlador=noticias&amp;accion=index">Noticias</td>
			<td><a href="?controlador=recitales&amp;accion=index">Recitales</td>
			<td><a href="?controlador=discos&amp;accion=index">Dicografia</td>
			<td><a href="?controlador=mensajes&amp;accion=index">Mensajes</td>
		</tr>
		
		<tr>
			<td><a href="?controlador=biografia&amp;accion=index">Biografia</td>
			<td><a href="?controlador=reconocimientos&amp;accion=index">Reconocimientos</td>
			<td><a href="?controlador=link&amp;accion=index">Links</td>
			<td><a href="?controlador=libros&amp;accion=index">Libros/Dvd</td>
			<td><a href="?controlador=integrantes&amp;accion=index">Integrantes</td>
		</tr>
		
		<tr>
			<td><a href="?controlador=reportajes&amp;accion=index">Reportajes</td>
			<td><a href="?controlador=fotos&amp;accion=index">Fotos</td>
			<td><a href="?controlador=fotos&amp;accion=categorias">Alb&uacute;m fotos</td>
			<td><a href="?controlador=link&amp;accion=categorias">Categorias Links</td>
			<td><a href="?controlador=usuarios&amp;accion=index">Configuracion Usuarios</td>
		</tr>
		
		<tr>
			<td><a href="?controlador=index&amp;accion=salir">salir</></td>
		</tr>
	
	</table> 
y me gustaria saber si me conviene pasarlo a css y no usar las criticadas "tablas", el tema es que nose bien como maquetarlo para que quede de la misma forma, alguien me puede guiar un poco....

desde ya muchas gracias
  #2 (permalink)  
Antiguo 28/07/2008, 14:55
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: de tablas a css

Yo creo que la mejor forma es usando listas:

CSS:
Código:
#enlaces { list-style: none; margin: 0; padding: 0; }
#enlaces li { width: 20%; float: left;}
HTML:
Código HTML:
<ul id="enlaces">
	<li><a href="?controlador=portada&amp;accion=index">Portada</li>
	<li><a href="?controlador=noticias&amp;accion=index">Noticias</li>
	<li><a href="?controlador=recitales&amp;accion=index">Recitales</li>
	<li><a href="?controlador=discos&amp;accion=index">Dicografia</li>
	<li><a href="?controlador=mensajes&amp;accion=index">Mensajes</li>
</ul>
		
<ul id="enlaces">
	<li><a href="?controlador=biografia&amp;accion=index">Biografia</li>
	<li><a href="?controlador=reconocimientos&amp;accion=index">Reconocimientos</li>
	<li><a href="?controlador=link&amp;accion=index">Links</li>
	<li><a href="?controlador=libros&amp;accion=index">Libros/Dvd</li>
	<li><a href="?controlador=integrantes&amp;accion=index">Integrantes</li>
</ul>
		
<ul id="enlaces">
	<li><a href="?controlador=reportajes&amp;accion=index">Reportajes</li>
	<li><a href="?controlador=fotos&amp;accion=index">Fotos</li>
	<li><a href="?controlador=fotos&amp;accion=categorias">Alb&uacute;m fotos</li>
	<li><a href="?controlador=link&amp;accion=categorias">Categorias Links</li>
	<li><a href="?controlador=usuarios&amp;accion=index">Configuracion Usuarios</li>
</ul>
		
	<a href="?controlador=index&amp;accion=salir">salir</a> 
Completo:
Código HTML:
<!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>Menú usando listas</title>
<link rel="shortcut icon" href="favicon.ico" />
<style type="text/css">
#enlaces { list-style: none; margin: 0; padding: 0; }
#enlaces li { width: 20%; float: left;}
</style>
</head>
<body>
<ul id="enlaces">
	<li><a href="?controlador=portada&amp;accion=index">Portada</li>
	<li><a href="?controlador=noticias&amp;accion=index">Noticias</li>
	<li><a href="?controlador=recitales&amp;accion=index">Recitales</li>
	<li><a href="?controlador=discos&amp;accion=index">Dicografia</li>
	<li><a href="?controlador=mensajes&amp;accion=index">Mensajes</li>
</ul>
		
<ul id="enlaces">
	<li><a href="?controlador=biografia&amp;accion=index">Biografia</li>
	<li><a href="?controlador=reconocimientos&amp;accion=index">Reconocimientos</li>
	<li><a href="?controlador=link&amp;accion=index">Links</li>
	<li><a href="?controlador=libros&amp;accion=index">Libros/Dvd</li>
	<li><a href="?controlador=integrantes&amp;accion=index">Integrantes</li>
</ul>
		
<ul id="enlaces">
	<li><a href="?controlador=reportajes&amp;accion=index">Reportajes</li>
	<li><a href="?controlador=fotos&amp;accion=index">Fotos</li>
	<li><a href="?controlador=fotos&amp;accion=categorias">Alb&uacute;m fotos</li>
	<li><a href="?controlador=link&amp;accion=categorias">Categorias Links</li>
	<li><a href="?controlador=usuarios&amp;accion=index">Configuracion Usuarios</li>
</ul>
		
	<a href="?controlador=index&amp;accion=salir">salir</a>


</body>
</html> 
  #3 (permalink)  
Antiguo 28/07/2008, 20:03
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 13 años, 1 mes
Puntos: 43
Respuesta: de tablas a css

Raulmmmm, muchisimas gracias funciono a la perfeccion
  #4 (permalink)  
Antiguo 12/12/2008, 05:30
 
Fecha de Ingreso: junio-2007
Mensajes: 4
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: de tablas a css

No puedes aplicar varias ids con el mismo nombre, el código en cuestión que nos ha puesto Raul, aprobado por W3C sería el siguiente.

CSS

Código:
.enlaces { list-style: none; margin: 0; padding: 0; }
.enlaces li { width: 20%; float: left;}
HTML

Código:
<ul class="enlaces">
	<li>Portada</li>
	<li>Noticias</li>
	<li>Recitales</li>
	<li>Dicografia</li>
	<li>Mensajes</li>
</ul>
		
<ul class="enlaces">
	<li>Biografia</li>
	<li>Reconocimientos</li>
	<li>Links</li>
	<li>Libros/Dvd</li>
	<li>Integrantes</li>
</ul>
		
<ul class="enlaces">
	<li>Reportajes</li>
	<li>Fotos</li>
	<li>Alb&uacute;m fotos</li>
	<li>Categorias Links</li>
	<li>Configuracion Usuarios</li>
</ul>
<p>
<a href="#">Salir</a>
</p>
  #5 (permalink)  
Antiguo 12/12/2008, 06:23
 
Fecha de Ingreso: junio-2004
Mensajes: 266
Antigüedad: 13 años, 5 meses
Puntos: 8
Respuesta: de tablas a css

En este mismo foro tienes posteado como importante un manual de paso de tablas a css muy completo hecho por Mikmoro
__________________
WebSenior
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 12:59.