de tablas a css

destor77 · #1 (**permalink**) 28/07/2008, 11:06

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

Raulmmmm · #2 (**permalink**) 28/07/2008, 13:55

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>

destor77 · #3 (**permalink**) 28/07/2008, 19:03

Raulmmmm, muchisimas gracias funciono a la perfeccion

Charliechin · #4 (**permalink**) 12/12/2008, 05:30

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>

kurroman · #5 (**permalink**) 12/12/2008, 06:23

En este mismo foro tienes posteado como importante un manual de paso de tablas a css muy completo hecho por Mikmoro