06-dic-2005, 09:26
|
#1 (permalink) |
 Fecha de Ingreso: diciembre-2004
Mensajes: 12
|
Pasar tabla con bordes a CSS
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. |
|
|
|
06-dic-2005, 09:51
|
#2 (permalink) |
 
Fecha de Ingreso: febrero-2005
Mensajes: 646
|
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> 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> Y la gente que navega sin hojas de estilo va a ver una linda lista desordenada. Suerte Fede |
|
|
|
|
06-dic-2005, 10:01
|
#3 (permalink) |
Fecha de Ingreso: mayo-2005
Ubicación: Panamá
Mensajes: 750
   |
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:
yel HTML.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;
}
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> PD: así se ve con Firefox: 
__________________
En la caja decía "Instalar Windows XP o superior", pues le instalé Ubuntu! In a world without frontiers, why you need Gates and Windows? Última edición por baccxus; 06-dic-2005 a las 10:14. |
|
|
|
|
06-dic-2005, 10:06
|
#4 (permalink) |
Fecha de Ingreso: abril-2005
Mensajes: 763
|
hola, para eso no necesitas una tabla, puedes usar listas no ordenadas asi:
Código:
aca hay un tutorial acerca de eso<ul> <li>Inicio</li> <li>fotos</li> <li>enlaces</li> <li>Contactanos</li> <li>foro</li> </ul> http://www.cristalab.com/tutoriales/...-usando-listas y aca hay otro: http://www.buayacorp.com/archivos/me...-css-y-listas/ |
|
|
|
|
07-dic-2005, 09:15
|
#6 (permalink) |
|
Fecha de Ingreso: diciembre-2004
Mensajes: 12
|
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? |
|
|
|
|
07-dic-2005, 09:27
|
#7 (permalink) |
|
Fecha de Ingreso: mayo-2005
Ubicación: Panamá
Mensajes: 750
|
puedes cambiar las medidas por porcentajes (%), tamaños relativos(em, ex), poner más pixeles (px), lo que quieras o se te adapte.
Saludos
__________________
En la caja decía "Instalar Windows XP o superior", pues le instalé Ubuntu! In a world without frontiers, why you need Gates and Windows? |
|
|
|
Mode Lineal
