Crear lista con indice y subindice

chalchis · #1 (**permalink**) 22/01/2009, 14:00

hola amigos estoy buscando la forma de hacer una lista con indice y subindice
y encontre esto

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
	    
		/*the important stuff for this example */
		ol { 
		    counter-reset: section;
		    list-style-type: none;
		}
		
		ol li { counter-increment: section; }
		ol li:before { content: counters(section, ".") ". "; }
		
		/*basic typography so example doesn't look ugly */
		
</style>


</head>

<body>
<ol>
<li>
item 1
	<ol>
	    <li>sub item 1
    	<ol>
   		  <li>sub-sub item 1</li>        	
        	<li>sub-sub item 3</li>
    	</ol>
		</li>
		<li>
        Sub item 2
        	<ol>
            	<li>sub item 2(*)</li>
            </ol>
        </li>
	</ol>
</li>
<li>item 2</li>
</ol>
</body>
</html>

Funciona bien en Firefox pero en IE no

saben si hay otra manera de hacer algo asi
espero sus comentarios

saludos

Calizman · #2 (**permalink**) 22/01/2009, 21:47

Saludos chalchis!!!

Revisa esta pagina http://araudi.net, seguro encuentras lo que buscas!!

Saludos

chalchis · #3 (**permalink**) 23/01/2009, 09:39

gracias por las respuesta pero
pues no encontre algo parecido ah mi duda

que ponga la lista asi

1.tema
1.1_tema2
1.2 temas3

saludos y gracias

chalchis · #4 (**permalink**) 23/01/2009, 09:49

hola amigos encontre un script que me ayuda en ie
pero ahora en firefox si lo hace pero, de forma estraña

http://imfo.ru/archive/2003/10/10/ol...opera_counters

ejemplo:
http://ar.sky.ru/olcount/li.html

ejmplo:

en ie lo hace asi

1.-tema1
1.1_tema 2
1-2_tema 3

pero en firefox sale ahora asi

1.1_tema 1
1. 1.1_tema2
2. 1.2_tema 3

y ahora que fue lo paso jejeje
saludos

Dalvenjha · #5 (**permalink**) 23/01/2009, 11:30

ua tu CSS para firefox y usa el script para internet explorer, busca sobre comentarios condicionales.

En estos momento ando algo líado, pero si me esperas un poco te posteo la solución.

Saludos!!.

chalchis · #6 (**permalink**) 23/01/2009, 11:32

Muchas gracias Dalvenjha

te agradeceria si me puedes proporcionar la solución.

muchas gracias aqui esperare

saludos

Dalvenjha · #7 (**permalink**) 23/01/2009, 12:07

Sorry te voy a poner algo rápido, normalmente explico como se hacen las cosas pero com estoy líado y quizá lo necesitas al toque, mejor te pongo la solución rápida.

Código:

<script type="text/javascript"> 
function navegador(){
if (navigator.appName=="Microsoft Internet Explorer"){

   nombredetufuncion();
}}
</script>

y la llamas asi:

<body onload="navegador();">

Espero que sea de ayuda.

chalchis · #8 (**permalink**) 23/01/2009, 12:15

ok muchas gracias Dalvenjha
vera si tambien debo usar las
condicionales en los css no?

saludos, espero puedas seguir comentando

gracias

Dalvenjha · #9 (**permalink**) 23/01/2009, 13:12

Explicame, tu tienes un javascript para que haga esa tarea de numerar las listas no? lo único que debes hacer es poner esa función dentro de la que yo te dí y nada más, asi se ejecutará para ie y no para firefox, dejando normal tu CSS, si no es eso lo que tenías en mente, explayate más.

Mikmoro · #10 (**permalink**) 23/01/2009, 13:14

Creo que el problema es que FF tampoco lo hace sin el javascript.

Dalvenjha · #11 (**permalink**) 23/01/2009, 13:19

Entonces si funca en firefox y opera y chrome y no en ie puede hacer lo siguiente:

Código:

<script type="text/javascript"> 
function navegador(){
if (navigator.appName=="Microsoft Internet Explorer"){

   nombredetufuncion();
}
else{
nombredelafuncionqueusasparafirefox();
}

}
</script>

y la llamas asi:

<body onload="navegador();">

Y asunto arreglado, distinguirá entre ie y el resto de navegadores.

chalchis · #12 (**permalink**) 23/01/2009, 13:19

lo que sucede es que en para firefox se usa css para
que puedan salir las listas con indice y sub indice

Código:

<style type="text/css" media="all">
	    
		/*the important stuff for this example */
		ol { 
		    counter-reset: section;
		    list-style-type: none;
		}
		
		ol li { counter-increment: section; }
		ol li:before { content: counters(section, ".") ". "; }
		
		/*basic typography so example doesn't look ugly */
		
</style>

y un script que encontre para ie usan css y aparte un script en javascript

Código:

<style type="text/css">
/* Bugzzz? MailTo: [email protected] */
ol {list-style-type: decimal;}
html>body ol {list-style-type: none;}
html[xmlns] ol {list-style-type: decimal;}

ol {behavior: url("li.htc");}

ol {counter-reset: ol;}
ol ol {counter-reset: ol2;}
ol ol ol {counter-reset: ol3;}
ol ol ol ol {counter-reset: ol4;}
ol ol ol ol ol {counter-reset: ol5;}
ol ol ol ol ol ol {counter-reset: ol6;}

ol li:before {
content: counter(ol) ". ";
counter-increment: ol;
}

ol ol li:before {
content: counter(ol) "." counter(ol2) ". ";
counter-increment: ol2;
}

ol ol ol li:before {
content: counter(ol) "." counter(ol2) "." counter(ol3) ". ";
counter-increment: ol3;
}

ol ol ol ol li:before {
content: counter(ol) "." counter(ol2) "." counter(ol3) "." counter(ol4) ". ";
counter-increment: ol4;
}
ol ol ol ol ol li:before {
content: counter(ol) "." counter(ol2) "." counter(ol3) "." counter(ol4) "." counter(ol5) ". ";
counter-increment: ol5;
}

ol ol ol ol ol ol li:before {
content: counter(ol) "." counter(ol2) "." counter(ol3) "." counter(ol4) "." counter(ol5) "." counter(ol6) ". ";
counter-increment: ol6;
}


/* украшательства */
  body {
  background-color: #333;
  color: #f7f7f7;
  }
  h2 {text-align: center;}
  h3 {letter-spacing: .4em; border-right: 1em solid #f7f7f7; border-bottom: 1px solid #f7f7f7;}
  a {color: red; font-weight: bold; text-decoration: none; font-style: italic;}
</style>

y este es el javascript

Código:

<script language="JavaScript" type="text/javascript"><!--//--><![CDATA[//><!--

		var OLs = document.getElementsByTagName("OL");
		for (var j = 0; j < OLs.length; j++) { LetsDoIt(OLs[j]); }

		function LetsDoIt(element) {

		element.style.listStyleType = 'none';

		oM = element.childNodes.length;

		for ( i = 0; i < oM; i++ ) {

			oLI = element.childNodes[i];

			oLI.innerHTML = (i+1) + '. ' + oLI.innerHTML;

			oLI.innerHTML = oLI.innerHTML.replace(/((\d+\. )(\d+\. )*)/, "$1$2");

			oLI.innerHTML = oLI.innerHTML.replace(/\d+\. /, '');

			oLI.innerHTML = oLI.innerHTML.replace(/<LI>(((\d+\. )?)*)/g, "<LI>$1" + (i+1) + '. ');

		}

		}

//--><!]]></script>

el codigo para que funcione en ie aun lo sigo analizando

saludos

Dalvenjha · #13 (**permalink**) 23/01/2009, 13:26

Entonces te pregunto sin ambagues ¿Es importante para ti validar tu CSS? o es más importante cumplir ese trabajo? porque puedes hacer dos cosas, que metas todo ese CSS en tu hoja de estilos y uses hacks como el del asterisco, o que uses comentarios condicionales, por supuesto los comentarios condicionales son asquerosos y intrusivos, pero a otra solución tpco es la mejor, en todo caso podría hacer lo siguiente:

Arma dos hojas de estilo, con la única diferencia de ese detalle. y luego discriminas con el javascript. Un CSS para IE y un CSS para los demás. Si quieres validar, validas desde el firefox.

Código:

<script type="text/javascript"> 
function navegador(){
if (navigator.appName=="Microsoft Internet Explorer"){
  document.write(<link blablabla css para ie>);
   nombredetufuncion();
}
else{
document.write(<link blablabla css para los demás>);
}

}
</script>

y la llamas asi:

<body onload="navegador();">