[SOLUCIONADO] Lista ordenada en css

[chamaco05]

Quiero hacer algo asi:




Y tengo mi estructura asi:

Código:

<div id"Discos"></div>
             <div id"lista"></div>
              <img src="image/disco.jpg" alt="image" width="200px" height="200px"/>
                 <ol class"lista"> 
                     <li> Disco</il><a href"#">Descargar></a><hr/>
                     <il> Disco</il><a href"#">Descargar></a><hr/>
                     <il> Disco</il><a href"#">Descargar></a><hr/>
                     <il> Disco</il><a href"#">Descargar></a><hr/>
                 </ol>
</div>
</div>

Quiero que me salga como se encuentra en la imagen de arriba, y repetirlo varias veces, por eso use el class"lista" aunque creo que tendre problemas después con los id, si los repito. QUE ME RECOMIENDAN..

[C2am]

Supongo que has cometido un error al postear y que lo que verdaderamente tienes es:

Código HTML:

<div id"Discos">
    <div id="lista">
        
          <img src="image/disco.jpg" alt="image" width="200px" height="200px"/>
          
          <ol class="lista"> 
                     <li> Disco<a href"#">Descargar></a></li>
                      <hr/>
                     
                     <il> Disco <a href"#">Descargar></a></li>
                     <hr/>
 
                     <il> Disco <a href"#">Descargar></a></li>
                     <hr/>
                     
                      <il> Disco<a href"#">Descargar></a></li>
                       <hr/>
                 </ol>
      </div>
</div>
 

Y siendo el FORO de CSS, pues falta lo más importante ... el CSS.
Saludos

[chamaco05]

El CSS lo tengo externo, no en la misma raiz del codigo HTML. :D

[C2am]

ok, pero es el CSS que actúa sobre ese html, y siendo este un foro de css, pues lo lógico es ver cual es ese CSS ¿no te parece?
Es decir, no se te puede ayudar si no sabemos que es lo que tienes.

[chamaco05]

Es que quisiera una estructura en CSS básica y así la modificaría, es que no me sale como yo la hago. :S

[Leonardo_Manrique]

He hecho esto. Imagino que es lo que querés:

http://jsfiddle.net/leoMestizo/DsXGq/7/

Lo único que te pido es que cumplas con lo que especifiqué en la licencia (no tengo tiempo para elegir una licencia ahora porque me tengo que ir, pero sí que respetes los puntos que comenté en el código bajo "Licencia"). ¿Por qué te pido esto? Porque hacer esto llevó tiempo de mi parte y sería injusto que, habiendo implementado una solución que seguro te será útil, no se me sea reconocido. Por tal motivo, reitero: Por favor, cumplí lo estipulado en la licencia.

Creo que como lo he hecho, puede quedarte totalmente "reutilizable". Si seguís el patrón que he codificado, basta con que cuando quieras agregar una nueva lista de canciones copies todo lo contenido en el elemento article (incluido el mismo).

Cualquier duda con respecto al código, no dudés en decirme.

Un saludo,
Leonardo!

[pzin]

Iniciado por Leonardo_Manrique

¿Por qué te pido esto? Porque hacer esto llevó tiempo de mi parte y sería injusto que, habiendo implementado una solución que seguro te será útil, no se me sea reconocido.

Si te molesta que usen tu código sin poner tu nombre, entonces un foro seguramente sea un lugar poco indicado para ti.

Aquí una versión más simple, que funciona en todos los navegadores —el de Don Leonardo Manrique no lo hace: http://jsfiddle.net/fTpj3/

Obviamente también he dejado mi licencia. Hazle caso a la licencia. ¿Por qué te pido esto? Porque hacer esto llevó tiempo de mi parte, como unos 10 minutos, y claro, no sería justo que yo hiciera un código y tú no aprendieras nada.

Edito: La canción #4 es un temazo.

[Leonardo_Manrique]

Iniciado por pzin

Si te molesta que usen tu código sin poner tu nombre, entonces un foro seguramente sea un lugar poco indicado para ti.

Una cosa es darle una solución bien hecha como yo lo hice y otra es ayudarlo a resolver cierto error. Él (chamaco05), no tenía idea acerca de cómo empezar a aplicar estilos para obtener la solución. Yo creo que si le doy una solución completa, vale mi nombre. Ahora, si lo ayudo con algo que él ya ha hecho, no tengo porqué pedirle que incluya referencias de mi autoría porque sólo lo ayudé.

Iniciado por pzin

Obviamente también he dejado mi licencia. Hazle caso a la licencia. ¿Por qué te pido esto? Porque hacer esto llevó tiempo de mi parte, como unos 10 minutos, y claro, no sería justo que yo hiciera un código y tú no aprendieras nada.

Ahora, ¿qué necesidad de poner esto? Me parece que está de más. Si lo hiciste en 10 minutos, te felicito! Yo lo hice en 20' aproximadamente . Pero por más que haya utilizado 1 minuto o 3 días, creo que mi tiempo vale igual.

Te agradecería que no me llames "Don Leonardo Manrique" ... Sólo Leo Y si mi código no funciona en todos los navegadores es simplemente porque no incluí todos los prefijos de navegadores (en Firefox, Flexbox está casi totalmente implementado. Y las propiedades que he puesto funcionan para mi en el que tengo instalado).

Un saludo!

[pzin]

Tenía la misma necesidad de poner aquello que tú lo de la licencia.

Iniciado por Leonardo_Manrique

Y si mi código no funciona en todos los navegadores es simplemente porque no incluí todos los prefijos de navegadores.

Bueno, y por el detalle de que el módulo flexbox no funciona en muchos navegadores y en otros sólo tiene soporte para la especificación anterior —porque la cambiaron luego. Así que la solución muy completa no es según yo lo veo.

[Leonardo_Manrique]

Iniciado por pzin

Tenía la misma necesidad de poner aquello que tú lo de la licencia.

Si, pero indirectamente estás "atacándome" con sarcasmo. Si no lo querés admitir porque no sos lo suficiente maduro, pues está bien. Pero acá y en cualquier lugar del mundo eso es para molestar a otra persona. Creo no haberte hecho nada para que lo hagas, pero si te hace sentir bien (no sé... Tal vez por algún complejo de seguridad), pues está bien .

Bueno, y por el detalle de que el módulo flexbox no funciona en muchos navegadores y en otros sólo tiene soporte para la especificación anterior —porque la cambiaron luego. Así que la solución muy completa no es según yo lo veo.

En Firefox, Flexbox está casi totalmente implementado. Y las propiedades que he puesto funcionan para mi en el que tengo instalado (si tanto te molesta que no haya hecho una solución cross-browser, estaría bueno que leas la nota al final de la página que posteaste. Por si no sabés, el soporte parcial de Flexbox es debido a propiedades viejas. Si no sabés cuales son las propiedades viejas y nuevas, date una vuelta por W3C que te hace falta y estudiá un poquito... No sé, de pronto me parece).

flex-wrap no fue utilizado en mi código y con respecto a flex-flow si querés que la solución sea cross-browser, además de incluir los vendor-prefixes, podemos cambiar flex-flow por flex-direction (utilicé la actual propiedad porque es shorthand y me parecía mucho más limpio el código de esa manera). Creo que las críticas se hacen con fundamentos. Así que a leer más.

Un saludo!

[pzin]

Iniciado por Leonardo_Manrique

Si, pero indirectamente estás "atacándome" con sarcasmo. [blablabla]
© Leonardo Manrique.

Perdona si te parecí indirecto. No era mi intención.

Iniciado por Leonardo_Manrique

En Firefox, Flexbox está casi totalmente implementado. Y las propiedades que he puesto funcionan para mi en el que tengo instalado [blablabla]
© Leonardo Manrique.

Iniciado por Leonardo_Manrique

flex-wrap no fue utilizado en mi código y con respecto a flex-flow si querés que la solución sea cross-browser, además de incluir los vendor-prefixes, podemos cambiar flex-flow por flex-direction (utilicé la actual propiedad porque es shorthand y me parecía mucho más limpio el código de esa manera). [blablabla]
© Leonardo Manrique.

Most partial support refers to supporting an older version of the specification or an older syntax. For Firefox 21+ it refers to lack of flex-wrap & flex-flow support.

No creas que es casual lo de que añadan "most" y "partial". Y bueno, eso es sólo el soporte parcial. Luego hay navegadores que no tienen ningún tipo de soporte. Yo en ningún momento mencioné Firefox. Tú si porque es el que te viene bien, pero no veo que menciones a IE, claro, te viene peor.

Por muchas vueltas y cabezazos que des, no es una solución que hoy día se pueda considerar que funcione en todos los navegadores; porque simplemente no funciona en algunos.

Una comunidad es un sitio donde unos se ayudan a otros, sin esperar ni pedir nada a cambio. Si esto te parece anormal, es problema tuyo. Y mi sarcasmo y crítica iba más bien en relación a esto, no por lo de flexbox. Pero además de pedir cosas a cambio, es una solución que no es viable hoy en día.

Por lo general siempre digo que no es momento aún de implementar flexbox a secas —léase, por ejemplo, sin usar Modernizr.

Y aquí lo dejo. Que sino al final hay mucho [blablabla].

[Leonardo_Manrique]

Con Flexbox tenés razón. Enfatizaba en las últimas versiones de los navegadores (por eso no dije nada de IE, no fue que no me convenía como decís...). Eso no hace mi solución cross-browser. Admito mi error con eso.

Lo que si, podrías ser menos sarcástico (porque incluso ahora lo estás siendo al poner el copyright). Hubiera sido más sencillo si me decías desde un principio esto último que pusiste.

Una comunidad es un sitio donde unos se ayudan a otros, sin esperar ni pedir nada a cambio.

Tranquilamente, hubiera pedido disculpas y hubiera cambiado el mensaje.

Creo que deberías replantearte eso... Te va a ayudar en tus relaciones personales. Ya que estamos generosos, averiguate sobre el 5to. hábito y la escucha empática .

Un saludo.

[pzin]

Bueno, me disculpo por el sarcasmo. Igual no era lo más indicado y me dejé llevar un poco.

Ya de paso, bienvenido al foro y bienvenidas sean tus aportaciones.

[Leonardo_Manrique]

Bueno, muchas gracias! Tuvimos un mal comienzo pero quién sabe en el futuro!

Gracias de nuevo y nos estaremos viendo por acá!

Un saludo!
Leo

[chamaco05]

Gracias a Leonarto y Pzin, Y aprendere aunque no lo creas :D Con la base se puede aprender :P

[C2am]

Leonardo_manrique el futuro con pzin será sarcástico, yo que vos lo banneo de entrada.

Bue, sobre las soluciones, ya el chamaco tiene lo que tenía en un archivo externo, pero que no tenía porque no sabía como hacer.

Sobre la licencia, creo que la mejor que puede existir es la beerware.

[chamaco05]

beerware.