Foros del Web » Creando para Internet » CSS »

Crear lista con indice y subindice

Estas en el tema de Crear lista con indice y subindice en el foro de CSS en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 22/01/2009, 14:00
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 14 años, 4 meses
Puntos: 21
Pregunta Crear lista con indice y subindice

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
__________________
gerardo
  #2 (permalink)  
Antiguo 22/01/2009, 21:47
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Crear lista con indice y subindice

Saludos chalchis!!!

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

Saludos
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 23/01/2009, 09:39
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 14 años, 4 meses
Puntos: 21
Sonrisa Respuesta: Crear lista con indice y subindice

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
__________________
gerardo
  #4 (permalink)  
Antiguo 23/01/2009, 09:49
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 14 años, 4 meses
Puntos: 21
Respuesta: Crear lista con indice y subindice

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
__________________
gerardo
  #5 (permalink)  
Antiguo 23/01/2009, 11:30
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Crear lista con indice y subindice

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!!.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #6 (permalink)  
Antiguo 23/01/2009, 11:32
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 14 años, 4 meses
Puntos: 21
Respuesta: Crear lista con indice y subindice

Muchas gracias Dalvenjha

te agradeceria si me puedes proporcionar la solución.

muchas gracias aqui esperare

saludos
__________________
gerardo
  #7 (permalink)  
Antiguo 23/01/2009, 12:07
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Crear lista con indice y subindice

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.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #8 (permalink)  
Antiguo 23/01/2009, 12:15
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 14 años, 4 meses
Puntos: 21
De acuerdo Respuesta: Crear lista con indice y subindice

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

saludos, espero puedas seguir comentando

gracias
__________________
gerardo
  #9 (permalink)  
Antiguo 23/01/2009, 13:12
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Crear lista con indice y subindice

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.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #10 (permalink)  
Antiguo 23/01/2009, 13:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Crear lista con indice y subindice

Creo que el problema es que FF tampoco lo hace sin el javascript.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 23/01/2009, 13:19
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Crear lista con indice y subindice

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.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #12 (permalink)  
Antiguo 23/01/2009, 13:19
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 14 años, 4 meses
Puntos: 21
Respuesta: Crear lista con indice y subindice

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
__________________
gerardo
  #13 (permalink)  
Antiguo 23/01/2009, 13:26
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Crear lista con indice y subindice

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();">
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
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 13:40.