Foros del Web » Creando para Internet » CSS »

Pasar de Tabla a CSS

Estas en el tema de Pasar de Tabla a CSS en el foro de CSS en Foros del Web. Hola, tengo una pequeña tabla en la que simulo un nivel de pasos para un proceso, el tipico, Paso 1...Paso 2... - - algo asi, ...
  #1 (permalink)  
Antiguo 21/12/2005, 15:00
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Pasar de Tabla a CSS

Hola, tengo una pequeña tabla en la que simulo un nivel de pasos para un proceso, el tipico, Paso 1...Paso 2...
--

algo asi, ahora lo tengo en una tabla asi:
Código:
<TABLE WIDTH="105" BORDER="0" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" STYLE="margin-bottom:10px; margin-top:5px">
    <TR>
        <TD style="width:25px; HEIGHT:25px"><IMG SRC="images/paso1.png" ALT="Paso 1" WIDTH="25" HEIGHT="25"></TD>
        <TD style="width:15px"><div style="height:8px; background-color:<%if paso=2 then response.write "#FF0000" else response.write "#CCCCCC"%>"></div></TD>
        <TD style="width:25px; HEIGHT:25px"><IMG SRC="images/paso2<%if paso=2 then response.write "" else response.write "b"%>.png" ALT="Paso 2" WIDTH="25" HEIGHT="25"></TD>
        <TD style="width:15px"><div style="height:8px; width:15px; background-color:#CCCCCC"></div></TD>
        <TD style="width:25px; HEIGHT:25px"><IMG SRC="images/paso3b.png" ALT="Paso 3" WIDTH="25" HEIGHT="25"></TD>
    </TR>
</TABLE>
Estoy tratando de aprender CSS y quisiera saber como podria hacer ese tipo de tablas, esta en especifico con CSS y sin tablas...y si seria mas conveniente usar CSS o tablas...saludos y espero ayuda, gracias...

Esta tabla no me quitara el sueño en si, pero si me gustaria saber como hacerlo para despues cosas mas grandes
  #2 (permalink)  
Antiguo 21/12/2005, 16:37
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
el codigo seria algo asi (es orientativo ya que no entendi muy bien lo que hacia el codigo ASP, asi que le puse que se remarque la opcion a la que era igual la variable paso).

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#pasos {
	list-style:none;
	margin:0;
	padding:0;
}
#pasos li {
	float:left;
	width:25px;
	height:25px;
	margin: 3px;
}

#p1 {background: #FFF url(images/paso1.png) no-repeat top center;}
#p2 {background: #FFF url(images/paso2.png) no-repeat top center;}
#p3 {background: #FFF url(images/paso3.png) no-repeat top center;}
#pasos li.viendo { background-position: -25px;}

-->
</style>
</head>
<body>
<ul id="pasos">
	<li id="p1" <%if paso=1 then response.write "class='viendo'"%> >Paso 1</li>
	<li id="p2" <%if paso=2 then response.write "class='viendo'"%> >Paso 2</li>
	<li id="p3" <%if paso=3 then response.write "class='viendo'"%> >Paso 3</li>
</ul>
</body>
</html>
Para este caso lo que deberias hacer es una imagen para cada paso que contenga los dos estados (el naranja y el blanco) uno arriba de otro (osea.. tendria 25px de ancho y 50 de alto).

Lo que tiene a favor esta forma es que si quieres cambiarle algo de la apariencia solo tocas el codigo CSS y no el codigo del contenido de la pagina. Y por otro lado si alguien tiene desactivado para ver imagenes en su explorador (o bien es un no vidente y usa lector de pantalla) va a poder leer el contenido
__________________
oohh... quisiera ser godines!!!
  #3 (permalink)  
Antiguo 22/12/2005, 19:13
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
pues he probado eso y tanto en Firefox como en IE el resultado es algo feo...vere si puedo adaptarlo
  #4 (permalink)  
Antiguo 23/12/2005, 10:49
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
disculpa me falto el "codigo" para que el texto desaparesca:

Código:
#pasos li {
	float:left;
	width:25px;
	height:25px;
	margin: 3px;
	text-indent: -10000px;
}
Probá ahora y fijate si se ve bien
__________________
oohh... quisiera ser godines!!!
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 08:47.