lista horizontal infinita

xias · #1 (**permalink**) 18/06/2010, 06:06

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

abimaelrc · #2 (**permalink**) 18/06/2010, 09:57

Bueno si es en forma de tabla solo necesitas ingresar tantos TD como quieras. ¿Qué deseas hacer exactamente?

masterojitos · #3 (**permalink**) 18/06/2010, 10:11

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

xias · #4 (**permalink**) 18/06/2010, 11:50

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.

masterojitos · #5 (**permalink**) 18/06/2010, 12:19

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<!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=iso-8859-1" />
<title>Luis Angel Camargo</title>
<style type="text/css">
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    }
#marco {
    width:455px;
    margin:10px 0;
    padding:0px;
    text-align:left;
    }
 
/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
.preload2 {background: url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
.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; }
.menu2 li.top {display:block; float:left; position:relative;}
.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;}
.menu2 li a.top_link span {float:left; display:block; padding:0 10px 0 6px; height:40px;}
.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;*/}
.menu2 li a.top_link:hover {color:#fff;  background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
.menu2 li a.top_link:hover span { background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif)}
.menu2 li a.top_link:hover span.down { background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif)}
 
.menu2 li:hover > a.top_link {color:#fff; background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
.menu2 li:hover > a.top_link span {background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
.menu2 li:hover > a.top_link span.down {background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
 
 
.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
 
/* Default link styling */
 
/* Style the list OR link hover. Depends on which browser is used */
 
.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}
 
/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.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;}
 
.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;}
.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;}
.menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#005FB9; text-decoration:none;}
.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;}
.menu2 :hover ul.sub li a:hover {background:#E5FAFC; color:#005FB9;}
.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;}
.menu2 :hover ul li:hover > a.fly {background:#E5FAFC} 
 
.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:160px; top:-1px; background: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
.menu2 :hover ul.sub li ul {border-top:1px solid #005FB9; background: #fff; z-index:300;}
</style>
</head>
 
<body>
<div id="marco">
<span class="preload2"></span>
 
<!--MENU-->
<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"/>
    <li class="top"><a href="#" id="telmex" class="top_link"><span class="down">La Compañía</span>
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub">            
            <li><a href="#">Acerca de Nosotros</a></li>
            <li><a href="#">Filosofía</a></li>
            <li><a href="#">Código de Etica</a></li>
 
            <li><a href="#">Inducción a Empleados</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#" id="Direcciones" class="top_link"><span class="down">Direcciones</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub">
            <li><a href="#" class="fly">Dirección Legal<!--[if gte IE 7]><!--></a><!--<![endif]-->
 
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul>
                        <li><a href="#">Gerencia 1</a></li>
                        <li><a href="#">Gerencia 2</a></li>
                        <li><a href="#">Gerencia 3</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 
            </li>
            <li class="mid"><a href="http://www.forosdelweb.com/f53/boxes/" class="fly">Dirección de Mercadeo<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul>
                        <li><a href="#">Gerencia de Comunicaciones Internas</a></li>
                        <li><a href="#">Información de Productos</a></li>
                        <li><a href="#">Soporte a Ventas</a></li>
 
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="http://www.forosdelweb.com/f53/mozilla/">Dirección Administrativa y Financiera</a></li>
            <li><a href="http://www.forosdelweb.com/f53/ie/">Dirección Operaciones</a></li>
            <li><a href="http://www.forosdelweb.com/f53/opacity/">Dirección Cuidado al Cliente</a></li>
        </ul>
 
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#" id="Comunicacion" class="top_link"><span class="down">Comunicaciones</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub">
            <li><a href="#">Zoom Noticias</a></li>
            <li><a href="#">Flash</a></li>
 
            <li><a href="#">Entérate</a></li>
            <li><a href="#">Manual de Marca</a></li>
            <li><a href="#">Presentaciones</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
 
</ul>
 
  <!-- FIN MENU-->
</div>
</body>
</html>

Suerte

xias · #6 (**permalink**) 18/06/2010, 12:32

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!!

masterojitos · #7 (**permalink**) 18/06/2010, 13:02

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

deirdre · #8 (**permalink**) 18/06/2010, 17:27

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

xias · #9 (**permalink**) 20/06/2010, 10:48

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!!

deirdre · #10 (**permalink**) 20/06/2010, 19:18

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

xias · #11 (**permalink**) 21/06/2010, 06:01

Hola,

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

Muchas gracias de nuevo.