Foros del Web » Creando para Internet » CSS »

lista horizontal infinita

Estas en el tema de lista horizontal infinita en el foro de CSS en Foros del Web. Hola, ¿como puedo hacer una lista horizonta infinita, es decir, que en ningún momento sea de 2 líneas? el número de items pueden ser dinámicos. ...
  #1 (permalink)  
Antiguo 18/06/2010, 06:06
 
Fecha de Ingreso: enero-2002
Mensajes: 838
Antigüedad: 22 años, 2 meses
Puntos: 1
lista horizontal infinita

Hola,

¿como puedo hacer una lista horizonta infinita, es decir, que en ningún momento sea de 2 líneas?

el número de items pueden ser dinámicos.

Muchas gracias, saludos
__________________
Muchas gracias, saludos.
  #2 (permalink)  
Antiguo 18/06/2010, 09:57
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 14 años, 10 meses
Puntos: 1517
Respuesta: lista horizontal infinita

Bueno si es en forma de tabla solo necesitas ingresar tantos TD como quieras. ¿Qué deseas hacer exactamente?
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 18/06/2010, 10:11
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 15 años, 8 meses
Puntos: 105
Respuesta: lista horizontal infinita

te recomendaria que pongas un limite y un "ver mas"...

es decir, pones por ejemplo un listado maximo de 5 items.... y si la lista trae 8 o mas.... pones un sexto item con el nombre "mas >" o algo asi, para que se despleguen hacia abajo los otros que faltan.....

ejemplo.... lista horizontal con desplegable ... ahi esta el codigo fuente (solo html y css)

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #4 (permalink)  
Antiguo 18/06/2010, 11:50
 
Fecha de Ingreso: enero-2002
Mensajes: 838
Antigüedad: 22 años, 2 meses
Puntos: 1
Respuesta: lista horizontal infinita

Hola,

Tengo una lista de este tipo en formato horizontal(li {float:left}):

<ul>
<li>video1</li>
<li>video1</li>
<li>video1</li>
<li>video1</li>
<li>video1</li>
</ul>

Lo que necesito es que esta lista no tenga salto de línea, independientemente del número de items que tenga. He probado con display: inline...

Esta lista estará contenida en una div, con lo que tendrá scroll horizontal.

Gracias.
__________________
Muchas gracias, saludos.
  #5 (permalink)  
Antiguo 18/06/2010, 12:19
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 15 años, 8 meses
Puntos: 105
Respuesta: lista horizontal infinita

y no te sirvio el link que te ofreci ???

aqui te dejo el codigo fuente ya que veo que no lo viste

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Luis Angel Camargo</title>
  5. <style type="text/css">
  6. body {
  7.     font-family: Arial, Helvetica, sans-serif;
  8.     margin: 0;
  9.     padding: 0;
  10.     }
  11. #marco {
  12.     width:455px;
  13.     margin:10px 0;
  14.     padding:0px;
  15.     text-align:left;
  16.     }
  17.  
  18. /*Credits: CSSplay */
  19. /*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
  20. .preload2 {background: url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
  21. .menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/fd_menu.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
  22. .menu2 li.top {display:block; float:left; position:relative;}
  23. .menu2 li a.top_link {display:block; float:left; height:25px; margin-left:6px; line-height:25px; color:#333; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;}
  24. .menu2 li a.top_link span {float:left; display:block; padding:0 10px 0 6px; height:40px;}
  25. .menu2 li a.top_link span.down {float:left; display:block; padding:0 10px 0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/}
  26. .menu2 li a.top_link:hover {color:#fff;  background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
  27. .menu2 li a.top_link:hover span { background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif)}
  28. .menu2 li a.top_link:hover span.down { background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif)}
  29.  
  30. .menu2 li:hover > a.top_link {color:#fff; background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
  31. .menu2 li:hover > a.top_link span {background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
  32. .menu2 li:hover > a.top_link span.down {background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
  33.  
  34.  
  35. .menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
  36.  
  37. /* Default link styling */
  38.  
  39. /* Style the list OR link hover. Depends on which browser is used */
  40.  
  41. .menu2 a:hover {visibility:visible;}
  42. .menu2 li:hover {position:relative; z-index:200;}
  43.  
  44. /* keep the 'next' level invisible by placing it off screen. */
  45. .menu2 ul,
  46. .menu2 :hover ul ul,
  47. .menu2 :hover ul :hover ul ul,
  48. .menu2 :hover ul :hover ul :hover ul ul,
  49. .menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
  50.  
  51. .menu2 :hover ul.sub {left:6px; top:25px; background: #fff; padding:0; /*border:1px solid #1E8BB5; white-space:nowrap;*/ width:auto; height:auto; font-weight:normal;}
  52. .menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid #005FB9; border-left:1px solid #005FB9; border-right:1px solid #005FB9; margin-bottom:0;}
  53. .menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#005FB9; text-decoration:none;}
  54. .menu2 :hover ul.sub li a.fly {background:#fff  url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/vineta_menu.gif) no-repeat 150px 6px;}
  55. .menu2 :hover ul.sub li a:hover {background:#E5FAFC; color:#005FB9;}
  56. .menu2 :hover ul.sub li a.fly:hover {background:#E5FAFC url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/vineta_menu.gif) no-repeat 150px 6px;}
  57. .menu2 :hover ul li:hover > a.fly {background:#E5FAFC}
  58.  
  59. .menu2 :hover ul :hover ul,
  60. .menu2 :hover ul :hover ul :hover ul,
  61. .menu2 :hover ul :hover ul :hover ul :hover ul,
  62. .menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
  63. {left:160px; top:-1px; background: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
  64. .menu2 :hover ul.sub li ul {border-top:1px solid #005FB9; background: #fff; z-index:300;}
  65. </head>
  66.  
  67. <div id="marco">
  68. <span class="preload2"></span>
  69.  
  70. <!--MENU-->
  71. <ul class="menu2"><img src="http://www.luisangelcamargo.com/wp-content/uploads/2007/12/menu_izq.gif" align="left" /><img src="http://www.luisangelcamargo.com/wp-content/uploads/2007/12/menu_der.gif"  align="right"/>
  72.     <li class="top"><a href="#" id="telmex" class="top_link"><span class="down">La Compañía</span>
  73.     <!--[if gte IE 7]><!--></a><!--<![endif]-->
  74.         <!--[if lte IE 6]><table><tr><td><![endif]-->
  75.         <ul class="sub">           
  76.             <li><a href="#">Acerca de Nosotros</a></li>
  77.             <li><a href="#">Filosofía</a></li>
  78.             <li><a href="#">Código de Etica</a></li>
  79.  
  80.             <li><a href="#">Inducción a Empleados</a></li>
  81.         </ul>
  82.         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  83.     </li>
  84.     <li class="top"><a href="#" id="Direcciones" class="top_link"><span class="down">Direcciones</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
  85.         <!--[if lte IE 6]><table><tr><td><![endif]-->
  86.         <ul class="sub">
  87.             <li><a href="#" class="fly">Dirección Legal<!--[if gte IE 7]><!--></a><!--<![endif]-->
  88.  
  89.                     <!--[if lte IE 6]><table><tr><td><![endif]-->
  90.                     <ul>
  91.                         <li><a href="#">Gerencia 1</a></li>
  92.                         <li><a href="#">Gerencia 2</a></li>
  93.                         <li><a href="#">Gerencia 3</a></li>
  94.                     </ul>
  95.                     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  96.  
  97.             </li>
  98.             <li class="mid"><a href="http://www.forosdelweb.com/f53/boxes/" class="fly">Dirección de Mercadeo<!--[if gte IE 7]><!--></a><!--<![endif]-->
  99.                     <!--[if lte IE 6]><table><tr><td><![endif]-->
  100.                     <ul>
  101.                         <li><a href="#">Gerencia de Comunicaciones Internas</a></li>
  102.                         <li><a href="#">Información de Productos</a></li>
  103.                         <li><a href="#">Soporte a Ventas</a></li>
  104.  
  105.                     </ul>
  106.                     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  107.             </li>
  108.             <li><a href="http://www.forosdelweb.com/f53/mozilla/">Dirección Administrativa y Financiera</a></li>
  109.             <li><a href="http://www.forosdelweb.com/f53/ie/">Dirección Operaciones</a></li>
  110.             <li><a href="http://www.forosdelweb.com/f53/opacity/">Dirección Cuidado al Cliente</a></li>
  111.         </ul>
  112.  
  113.         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  114.     </li>
  115.     <li class="top"><a href="#" id="Comunicacion" class="top_link"><span class="down">Comunicaciones</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
  116.         <!--[if lte IE 6]><table><tr><td><![endif]-->
  117.         <ul class="sub">
  118.             <li><a href="#">Zoom Noticias</a></li>
  119.             <li><a href="#">Flash</a></li>
  120.  
  121.             <li><a href="#">Entérate</a></li>
  122.             <li><a href="#">Manual de Marca</a></li>
  123.             <li><a href="#">Presentaciones</a></li>
  124.         </ul>
  125.         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  126.     </li>
  127.  
  128. </ul>
  129.  
  130.   <!-- FIN MENU-->
  131. </div>
  132. </body>
  133. </html>

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #6 (permalink)  
Antiguo 18/06/2010, 12:32
 
Fecha de Ingreso: enero-2002
Mensajes: 838
Antigüedad: 22 años, 2 meses
Puntos: 1
Respuesta: lista horizontal infinita

Hola de nuevo,

si, si le eché un vistazo pero no me sirve.... :(

Lo que quiero es una lista horizontal y desplazarme por ella através de un scroll (que lo tendrá la div) sin un ver más...

Mi problema está en que no consigo que mi lista en horizontal no tenga salto de fila... detecta el ancho de la capa y salta a dos líneas...

Gracias!!
__________________
Muchas gracias, saludos.
  #7 (permalink)  
Antiguo 18/06/2010, 13:02
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 15 años, 8 meses
Puntos: 105
Respuesta: lista horizontal infinita

ahora recien te explicas xDDDD

en todo caso, una solucion que se me viene a la mente es que cambies de listas a tabla, creas una sola fila con todas las columnas que necesites, y encierres esta tabla en un div con overflow: visible, y un ancho establecido..... asi vas a poder tener el scroll y poder recorrer todos los menus en una sola fila.

Claro, si deseas un scroll, mas agradables, lo que ahora debes buscar en la web, es un scroll, con divs y css.... podras ??

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #8 (permalink)  
Antiguo 18/06/2010, 17:27
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: lista horizontal infinita

Hola xias

Por lo que he entendido creo que esto soluciona lo que preguntas.

Haz un copy-paste en un documento en blanco y lo pruebas:

Código HTML:
<!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>lista muuuuuuuuuuy larga horizontal</title>
<style type="text/css">
html, body {
	overflow: hidden;
	padding: 0;
	margin: 0;
}
li {
	float: left;
	margin-left: 15px;
	list-style-image: none;
}
#caja_scroll {
	width: 100%; 
	overflow-x: auto;
	overflow-y: hidden;
}
#portavideos {
	width: 2000px;
	height: 60px;
	overflow: hidden;
	line-height: 60px;
	background-color: #ffc;
}
</style>
</head>

<body>
<div id="caja_scroll">
	<div id="portavideos">
		<ul>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
			<li>video1</li>
		</ul>
	</div>
</div>
</body>

</html> 
Comenta algo...

Bye
  #9 (permalink)  
Antiguo 20/06/2010, 10:48
 
Fecha de Ingreso: enero-2002
Mensajes: 838
Antigüedad: 22 años, 2 meses
Puntos: 1
Respuesta: lista horizontal infinita

Hola,

- Masterojitos: si, en el caso que no consiga hacerlo con una lista ya tenía pensado hacerlo con una tabla de una única fila... Gracias!

- Deirdre: esta es la idea, pero... ¿y si mi lista supera el ancho que tiene la capa portavídeos? sólo se vería una línea pero dejamos de visualizar elementos (puesto que tiene overflow hidden)...

No me puedo creer que no se pueda hacer... bueno siempre me quedará la tabla... :(

Gracias!!
__________________
Muchas gracias, saludos.
  #10 (permalink)  
Antiguo 20/06/2010, 19:18
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: lista horizontal infinita

Estás en el foro CSS y yo creo que sólo con css no puedes determinar el número de items que vas a tener en la lista. Así que con css sólo se me ocurre darle un ancho a ese div lo suficientemente largo para que te cubra todas las posibilidades (no creo que sean infinitas: tendrá un límite por muy grande que sea...).

Bye
  #11 (permalink)  
Antiguo 21/06/2010, 06:01
 
Fecha de Ingreso: enero-2002
Mensajes: 838
Antigüedad: 22 años, 2 meses
Puntos: 1
Respuesta: lista horizontal infinita

Hola,

Ok, muchas gracias, finalmente lo haré con una tabla.

Muchas gracias de nuevo.
__________________
Muchas gracias, saludos.

Etiquetas: horizontal, lista
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 06:26.