Foros del Web - Pasar tabla con bordes a CSS

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Pasar tabla con bordes a CSS (http://www.forosdelweb.com/f53/pasar-tabla-con-bordes-css-355466/)

madrynense

06/12/2005 10:26

Pasar tabla con bordes a CSS

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:

http://img.photobucket.com/albums/v2...s/Corel001.jpg

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

06/12/2005 10:51

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

06/12/2005 11:01

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:
http://usuarios.lycos.es/baccxus/menu.gif

RoQ	06/12/2005 11:06

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

06/12/2005 11:07

¿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

07/12/2005 10:15

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

07/12/2005 10:27

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

07/12/2005 10:30

Podés sacar directamente la propiedad width.

Suerte
Fede

madrynense

11/12/2005 20:00

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

La zona horaria es GMT -6. Ahora son las 15:36.