Pasar tabla con bordes a CSS

[madrynense]

La verdad es que la maquetacion con CSS no deja de sorprenderme, es increible la cantidad de trabajo que uno se ahorra y lo bien que quedan la paginas.
Les comento que estoy sacando todas las tablas de mi sitio, pero tengo un problema con una que uso para los links, la misma tiene un color de fondo y los bordes de otro color:



Estuve intentando imitar este ejemplo con css pero lo unico que consegui hasta ahora es poner los links en un DIV y centrarlos, pero no logro poner un borde color tanto interno como externo.

Alguna sugerencia.

[thunder.scripts]

Ya que es un menú, podrías usar una lista para que los navegadores que no soportan css muestren algo más legible:

Código HTML:

<ul id="menu">
<li>Inicio</li>
<li>Fotos</li>
<li>Enlaces</li>
<li>Contáctanos</li>
<li>Foro</li>
</ul> 

Y la hoja de estilos:

Código HTML:

<style type="text/css">

#menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 150px;
	border-bottom: 1px solid #000;
}

#menu li {
	display: block;
	border: 1px solid #000;
	border-bottom: 0px none;
	text-align: center;
	line-height: 25px;
	background-color: #FCC;
}


</style> 

Voilá!

Y la gente que navega sin hojas de estilo va a ver una linda lista desordenada.

Suerte
Fede

[baccxus]

No había visto tu respuesta Thunder!

Haces una lista con viñetas de tus links y luego le aplicas un borde a la lista y otro a los links:

Código:

.links ul{
display: inline;
}
.links li {
width: 150px;
text-align: center;
border: 1px solid black;
list-style-type: none;
background-color: #FFFF00;
}
.links a {
display: block;
width: 99%;
height: 99%;
padding: 5px 0;
border: 1px dotted black;
color: #990000;
text-decoration: none;
}
.links a:hover {
background-color: #CCCCCC;
}

yel HTML

Código HTML:

<ul class="links">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Fotos</a></li>
  <li><a href="#">Enlaces</a></li>
  <li><a href="#">Contactarnos</a></li>
  <li><a href="#">Foro</a></li>
</ul> 

Saludos

PD: así se ve con Firefox:

[RoQ]

hola, para eso no necesitas una tabla, puedes usar listas no ordenadas asi:

Código:

<ul>
<li>Inicio</li>
<li>fotos</li>
<li>enlaces</li>
<li>Contactanos</li>
<li>foro</li>
</ul>

aca hay un tutorial acerca de eso
http://www.cristalab.com/tutoriales/...-usando-listas
y aca hay otro:
http://www.buayacorp.com/archivos/me...-css-y-listas/

[thunder.scripts]

¿Ahhh la línea punteada también era parte del diseño? Yo pensé que era una captura de algún WYSIWYG que hacen este tipo de lineas alrededor de las celdas de una tabla =P

Suerte
Fede

[madrynense]

Mil gracias por la solucion y los enlaces :) andubo genial, pero me surgio otro inconveniente.

Cuando creo un menu de link

<ul id="menu">
<li><a href="documentos/doc.htm>CSS</a></li>
</ul>

El ancho de las celdas se adapte automaticamente al texto. Porque en el ejemplo que postearon el ancho se da en la declaracion "width: 400px" y cuando pones poco texto queda demasiado ancho y si el texto es muy largo queda en dos renglones.

Me imagino que seria una solucion para CSS liquino no?

[baccxus]

puedes cambiar las medidas por porcentajes (%), tamaños relativos(em, ex), poner más pixeles (px), lo que quieras o se te adapte.

Saludos

[thunder.scripts]

Podés sacar directamente la propiedad width.

Suerte
Fede

[madrynense]

Mil gracias, funciono de maravilla, otro dolor de cabeza menos :)