Foros del Web » Creando para Internet » CSS »

Pasar tabla con bordes a CSS

Estas en el tema de Pasar tabla con bordes a CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/12/2005, 10:26
 
Fecha de Ingreso: diciembre-2004
Mensajes: 12
Antigüedad: 19 años, 3 meses
Puntos: 1
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:



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.
  #2 (permalink)  
Antiguo 06/12/2005, 10:51
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 19 años, 1 mes
Puntos: 0
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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #3 (permalink)  
Antiguo 06/12/2005, 11:01
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 18 años, 10 meses
Puntos: 17
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:
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 06/12/2005 a las 11:14
  #4 (permalink)  
Antiguo 06/12/2005, 11:06
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 18 años, 11 meses
Puntos: 0
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/
  #5 (permalink)  
Antiguo 06/12/2005, 11:07
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 19 años, 1 mes
Puntos: 0
¿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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #6 (permalink)  
Antiguo 07/12/2005, 10:15
 
Fecha de Ingreso: diciembre-2004
Mensajes: 12
Antigüedad: 19 años, 3 meses
Puntos: 1
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?
  #7 (permalink)  
Antiguo 07/12/2005, 10:27
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 18 años, 10 meses
Puntos: 17
puedes cambiar las medidas por porcentajes (%), tamaños relativos(em, ex), poner más pixeles (px), lo que quieras o se te adapte.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #8 (permalink)  
Antiguo 07/12/2005, 10:30
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 19 años, 1 mes
Puntos: 0
Podés sacar directamente la propiedad width.

Suerte
Fede
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #9 (permalink)  
Antiguo 11/12/2005, 20:00
 
Fecha de Ingreso: diciembre-2004
Mensajes: 12
Antigüedad: 19 años, 3 meses
Puntos: 1
Mil gracias, funciono de maravilla, otro dolor de cabeza menos :)
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 14:29.