Lista en dos columnas

[ivanalberquilla]

Hola,

Lo siento si es una pregunta muy básica pero estoy intentandolo y no veo como hacerlo.

El caso es que tengo una lista de categorías, de la forma

Código:

<ul>
	<li>categorias</li>
	<li>categorias</li>
	<li>categorias</li>
	<li>categorias</li>
	<li>categorias</li>
	<li>categorias</li>
	<li>categorias</li>
	<li>categorias</li>
	<li>categorias</li>
	<li>categorias</li>
	<li>categorias</li>
	<li>categorias</li>
</ul>

Son una lista de 19 y las quiero mostrar en un menu, y tantas a la vez son muy largas y sale de la pantalla. Me gustaría hacer dos columnas. Tengo acceso al html por lo que he pensado poner una clase distinta a las diez primeras de las diez segundas.de la forma

Código:

<li class=”columnaUno”> <li class=”columnaDos”>

Para intentar despues maquetarlo en dos columnas, pero no se como hacerlo.

La opción de meter un div en las diez primeras y las siguientes en otro y hacerlo flotar lo he intentado, pero hay mucha maquetación detras, para movil y demás y me la cargo. ¿puedo hacerlo de esta forma?

Muchas gracias

[ivanalberquilla]

Creo que lo he visto aquí

http://www.federicoperichon.com.ar/generar-columnas-con-css-sin-usar-tablas

[juangemelo01]

¿y si mejor haces una pagina donde pones las 19 categorias como botones opciones atractivas a la vista?

solo lo enlazas al boton que desplegaria ese menu, lo digo por que 19 opciones son demaciadas, al menos, si yo doy click en 1 boton que me va a desglosar en un menu 19 botones, me daria flojera leerlo, en cambio si me lleva a una pagina y los 19 elementos son atractivos, pues adelante, le presto mas atencion ;)

la ventaja es que asi dispones de la pantalla completa para acomodar los 19 elementos y no hacerlo de manera tediosa

[ivanalberquilla]

Hola,

Gracias por el consejo, lo tendré en cuenta.

La idea es crea un mengamenu de este estilo

http://www.google.es/imgres?imgurl=http%3A%2F%2Fdzineblog.com%2Fwp-content%2Fuploads%2F2011%2F01%2Fmega-menu-bnq.jpg&imgrefurl=http%3A%2F%2Fdzineblog.com%2F201 1%2F01%2F48-mega-menu-web-design-for-your-inspiration.html&h=380&w=600&tbnid=QwQPjcuLQKHGoM% 3A&zoom=1&docid=-q2o8HfFn9i7QM&ei=tZbiU62lCKjY0QXxwoCoCQ&tbm=isch&v ed=0CCcQMygGMAY&iact=rc&uact=3&dur=812&page=1&star t=0&ndsp=13

o este

http://www.google.es/imgres?imgurl=http%3A%2F%2Fwww.mage-shop.com%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F01%2FMegaMenu.jpg&imgre furl=http%3A%2F%2Fwww.mage-shop.com%2Fblog%2Fmagento-portfolio%2Fwhy-would-you-choose-ultimate-megamenu-for-your-magento-store&h=370&w=858&tbnid=lUwrQGYhZIG9rM%3A&zoom=1&d ocid=bui4OmKyXa7ozM&ei=tZbiU62lCKjY0QXxwoCoCQ&tbm= isch&ved=0CDAQMygPMA8&iact=rc&uact=3&dur=394&page= 2&start=13&ndsp=16

Y que el usuario tenga toda la información de un vistazo, pero si no queda claro así, miraré como dices

Gracias

[pzin]

La forma más rápida sería hacerlo con columnas:

Código CSS:

ul {
  column-count: 2;
}
 

Aunque seguramente hubiese que poner los prefijos propietarios -webkit-, -moz y demás…