Pasar de Tabla a CSS

sjam7 · #1 (**permalink**) 21/12/2005, 15:00

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

safe · #2 (**permalink**) 21/12/2005, 16:37

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

sjam7 · #3 (**permalink**) 22/12/2005, 19:13

pues he probado eso y tanto en Firefox como en IE el resultado es algo feo...vere si puedo adaptarlo

safe · #4 (**permalink**) 23/12/2005, 10:49

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