[Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

Shagraarath · #1 (**permalink**) 30/09/2008, 02:19

Buenas, primero agradecer vuestro tiempo ^^

Estoy haciendo una pagina con un reproductor en flash y tengo una lista
que sirve para seleccionar el video que queremos ver.

Conforme se van registrando mas videos en la BB.DD mas larga se hace la lista
y querria que estuviera en un div con un scroll horizontal para mas comodidad.

Puse el codigo del scroll en CSS pero el caso es que cuando llevo unos 12 o 13 videos la ista se va para abajo y no sigue hacia la derecha.

Alguien puede decirme que hago mal?

Aqui os dejo unos codigos.

Parte de mi CSS:

Código HTML:

ul.navi { 
	margin:20px 0 0 0 ;
	padding:0px;
	height:80px;
	position:relative;
	top:10px;
	left:39px;
	width:470px;
	overflow:scroll;
}

ul.navi li {
	background:url(../img/tab-left.gif) left top no-repeat;
	padding-left:4px;
	float:left;
	margin:0;
	list-style-type:none;
}

ul.navi a {
	background:url(../img/tab-right.gif) right top no-repeat;
	padding:3px 12px;
	border-bottom:1px solid #D2D2D2;
	text-decoration:none;
	display:block;
	color:#333;
	font-size:13px;
}

ul.navi li.active a, ul.navi a:hover {
	background-position:100% -150px;
	border-bottom:1px solid #fff;
}

ul.navi li.active {
	background-position:0 -150px;	
}

Lista de lso videos:

Código HTML:

<ul class="navi">
			<li><a>1</a></li>
			<li><a>2</a></li>
			<li><a>3</a></li>
			<li><a>4</a></li>
            <li><a>5</a></li>
            <li><a>6</a></li>
            <li><a>7</a></li>
            <li><a>8</a></li>
            <li><a>9</a></li>
            <li><a>10</a></li>
            <li><a>11</a></li>
            <li><a>12</a></li>
            <li><a>13</a></li>
            <li><a>14</a></li>
		</ul>

Espero alguien vea el error :S

Saludos ;)

Mikmoro · #2 (**permalink**) 30/09/2008, 03:31

Esa lista probablemente estará dentro de una (div), que si no indicas nada, medirá un 100% de ancho (100% de la pantalla). Cuando algo no cabe, salta a la siguente línea.

Para hacer un scroll horizontal, lo que creo que deberías hacer es dar una medida a esa caja, ponerle a ella el overflow, poner display:block al ul y darle una medida a éste tan grande como la lista o más (width 1200px, o lo que sea). De esa manera la caja saca el scroll.
Esto es asi porque el flujo del documento abarca tanto ancho como le digas, y si no dices nada el 100%, y siempre en vertical.

Shagraarath · #3 (**permalink**) 30/09/2008, 04:03

No se soluciona, ahora cuelgo el archivo en rapidshare y lo posteo aqui para que lo mireis bien :S

Shagraarath · #4 (**permalink**) 30/09/2008, 04:07

Aqui esta el archivo mio en rapidshare.

http://rapidshare.com/files/14963619...layer.rar.html

Para ver my archivo os vais a:

flowplayer\examples\scrollable-view.php

Mikmoro · #5 (**permalink**) 30/09/2008, 04:36

Lo siento, no uso rar.

Viendo el ejemplo que pones después (que no sé si es tu web), no entiendo de qué hablas con lo del scroll horizontal. ¿No será vertical?

Shagraarath · #6 (**permalink**) 30/09/2008, 04:39

no se si has bajado el archivo, eso son archivos de muestra de la pagina
de flowplayer, yo he modificado uno y estoy tratando de utilizarlo,

me refiero a que la lista,a que tiene numeros, quiero que se desplace de izquierda a derecha
y viceversa, si te fijas se van para abajo en cuanto llega al numero 12 o asi.

Saludos.

Mikmoro · #7 (**permalink**) 30/09/2008, 04:44

No puedo verlo. Ya he puesto en el mensaje anterior que no uso rar.

No te preocupes, alguien te ayudará.

Saludos.

Shagraarath · #8 (**permalink**) 30/09/2008, 04:47

que utilizas?

Mikmoro · #9 (**permalink**) 30/09/2008, 04:56

Has puesto para descargar un archivo de 77 megas. No sé si eres consciente de eso.

Shagraarath · #10 (**permalink**) 30/09/2008, 04:58

lo soy, esque viene con todo y los videos que e puesto.

77 megas no sonnada :S cual es el problema? si he puesto la ruta
de donde hay que ir.

Mikmoro · #11 (**permalink**) 30/09/2008, 05:02

Para otros puede que nada. Para mi, para ver el problema de la lista horizontal, además de que los videos en sí creo que no hacen ninguna falta, 77 megas son una burrada. Para tí y tus cosas no son nada, desde luego, pero para pedir ayuda, pretender que alguien se descargue 80 megas... no sé si me explico.

Pon el trozo de código htmll generado en el navegador que corresponde a toda la zona del listado (con sus div envolorio si los tiene) y el código css que usas, y debería ser más que suficiente.

Shagraarath · #12 (**permalink**) 30/09/2008, 05:06

ok v_v ....

La pagina php donde esta la lista:

Código PHP:

 
<head>

    <title>Scrollable view</title>
    
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/scrollable-view.css"/>
    
    <script src="js/jquery.pack.js"></script>
    <script src="js/flashembed.min.js"></script>
    <script src="js/jquery.mousewheel.js"></script>
    <script src="js/jquery.scrollable.min.js"></script>
    <script src="js/flow.embed.js"></script>    
    
    <script>
        $(function() {
                
            $("a.flowplayer").flowembed("../FlowPlayerDark.swf", {
                initialScale:'scale',
                hideControls:true
            });
            
            $("div.scrollable").scrollable({
                horizontal:true, 
                size:1, 
                onSeek:onClipDone
            }); 
            
        });    
    </script>
    
</head>
<body>
<div id="page">
<div class="scrollable">
    
        <ul class="navi"> <!--aqui esta la lista-->
            <li><a>1</a></li>
            <li><a>2</a></li>
            <li><a>3</a></li>
            <li><a>4</a></li>
            <li><a>5</a></li>
            <li><a>6</a></li>
            <li><a>7</a></li>
            <li><a>8</a></li>
            <li><a>9</a></li>
            <li><a>10</a></li>
            <li><a>11</a></li>
            <li><a>12</a></li>
            <li><a>13</a></li>
            <li><a>14</a></li>
        </ul> <!--aqui acaba la lista-->
        
<br clear="all"/>
        
        <a class="prev"></a>
    
        <div class="items">
                        <?
                            $link = mysql_connect("localhost", "root");
                            $connect=mysql_select_db("deporte",$link);
                            $consulta=mysql_query("SELECT * FROM videos");
                            $i=0;
                            while($datos=mysql_fetch_array($consulta)){
                                 $array[$i][Nombre]=$datos[Nombre];
                                 $array[$i][Ruta]=$datos[Ruta];
                                 $array[$i][descripcion]=$datos[descripcion];
                                 $i++;
                            }
                                $i=0;
                                while(isset($array[$i])){
                        ?>
                            <div> 
                                <a class="flowplayer" href="<? echo $array[$i][Ruta] ?>">
                                <img src="img/bo.jpg" />
                                </a>
                                
                                <h2><? echo $array[$i][Nombre] ?></h2>
                                
                                <p>
                                    <? echo $array[$i][descripcion] ?>
                                </p>        
                            </div>
                         <?
                            $i++;
                            }                      
                          ?>
        </div>
        
        <a class="next"></a>
        
  </div>

<br clear="all" />
    <br />
</div>
</body>
</html>

common.css

Código PHP:

  
body {
    background-color:#777;    
    font-family:"trebuchet ms", verdana, "bitstream vera sans";
    padding:0;
    margin:0;
    text-align:center;
}

#page {
    width:600px;
    background-color:#fff;
    margin:0px auto;
    padding:20px 150px 20px 50px;
    min-height:600px;
    border:1px solid #000;
    border-width:0 1px 1px 1px;
    text-align:left;
}

h1 {
    font-size:22px;
    letter-spacing:-1px;
    color:#0d7b7a;
    font-weight:normal;
}

h1 em {
    font-style:normal;
    color:darkorange;    
}


h2 {
    font-size:18px;
    font-weight:normal;
}


.less {
    color:#999;
    font-size:12px;
}

scrollable-view.css

Código PHP:

  
/* player dimensions */
a.flowplayer, a.flowplayer img {
    display:block;                
    border:0;
    width:250px;
    height:180px;
    margin-right:15px;
    float:left;
}

/* play button on top of splash image */
div.playButton {
    background:url(../img/play.png) no-repeat;
    width:45px !important;
    height:45px;
    position:relative;
    top:-115px;
    left:105px;    
    margin-bottom:-50px;
    opacity:0.9;
}

div.playButton:hover {
    opacity:1.0;        
}

/* items */
div.scrollable {
    margin-left:-30px;        
}

div.items {
    height:180px;        
    float:left;
    width:470px;
    background-color:#efefef;
    border:1px solid #ddd;
}
    
div.items div {
    width:470px;    
}

div.scrollable div {        
    float:left;
    overflow:scroll;
}

div.scrollable h2 {
    margin-top:15px;        
}

div.scrollable p {
    color:#444;
    font-size:11px;
    margin-right:15px;
}

/* next / prev buttons */
a.prev, a.next {
    display:block;
    width:30px;
    height:30px;
    float:left;
    background-repeat:no-repeat;    
    margin-top:70px;
}

a.prev {
    background:url(../img/button-left.gif);
    margin-right:10px;
}

a.prev:hover {
    background:url(../img/button-left-over.gif);        
}

a.next {
    background:url(../img/button-right.gif);
    margin-left:10px;
}

a.next:hover {
    background:url(../img/button-right-over.gif);        
}


/* tabs */ 
ul.navi { 
    margin:20px 0 0 0 ;
    padding:0px;
    height:80px;
    position:relative;
    top:10px;
    left:39px;
    width:470px;
    overflow:scroll;
    display:block;
    
}

ul.navi li {
    background:url(../img/tab-left.gif) left top no-repeat;
    padding-left:4px;
    float:left;
    margin:0;
    list-style-type:none;
}

ul.navi a {
    background:url(../img/tab-right.gif) right top no-repeat;
    padding:3px 12px;
    border-bottom:1px solid #D2D2D2;
    text-decoration:none;
    display:block;
    color:#333;
    font-size:13px;
}

ul.navi li.active a, ul.navi a:hover {
    background-position:100&#37; -150px;
    border-bottom:1px solid #fff;
}

ul.navi li.active {
    background-position:0 -150px;    
}

Mikmoro · #13 (**permalink**) 30/09/2008, 05:21

No veo dónde has aplicado lo que te he puesto antes.

Si te fijas en el ejemplo de la página de flowplayer, hace prácticamente lo mismo que te he dicho:

<div id="scrollable">
<div class="navi">
</div>
<a class="prev"/>
<div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;">
<div class="__scrollable" style="position: absolute; width: 200000em;">

Con el css:

#scrollable {background-color:#EFEFEF;
border:1px solid #DDDDDD;
height:65px;
padding:10px 8px;
width:550px;

Ese <div class="__scrollable", es tu ul, al que deberías dar display:block para que atúe igual.

Shagraarath · #14 (**permalink**) 30/09/2008, 05:43

ese codigo que has puesto no esta en mi codigo...

donde esta el #scrollable?

y <div class="__scrollable" style="position: absolute; width: 200000em;"> ???

:S

Mikmoro · #15 (**permalink**) 30/09/2008, 06:51

¿En tú código? ¿No has leido mi mensaje? ponía:

Cita:

Iniciado por Mikmoro

Si te fijas en el ejemplo de la página de flowplayer, hace prácticamente lo mismo que te he dicho:

Shagraarath · #16 (**permalink**) 01/10/2008, 01:59

No lo pillo, esos codigos no los tengo yo en ninguno de mis archivos
que te comente en la ruta : flowplayer\examples\scrollable-view.php ni en sus CSS que te comente.

Mikmoro · #17 (**permalink**) 01/10/2008, 02:13

¿Tú estás usando el ejemplo de barra horinzontal "scrollable" de esta página?

http://flowplayer.org/tools/scrollable.html

Lo digo porque cargas estos scripts en tu cabecera:

Cita:

Shagraarath · #18 (**permalink**) 01/10/2008, 02:24

no no lo estoy utilizando, no se me ocurrio, ahun asi no se como implementarlo

Me gustaria tener ese scroll pero pongo el codigo y se me descuadra todo :S

Shagraarath · #19 (**permalink**) 06/10/2008, 02:13

Mikmoro podrias ayudarme...

no se donde poner ese codigo, pongo el HTML de la pagina
que me dijistes del scroll pero se me descoloca todo ya que
tienen la misma "class" e "ID" algunos componentes.

Dime que puedo hacer, :S estoy estancado enserio :S

Si a ti te salio, copia aqui el "index" tuyo.

Saludos.

Mikmoro · #20 (**permalink**) 06/10/2008, 10:16

Como te dije en el primer mensaje, puedes probar a hacer esto:

- envuelve tu lista en una caja:

Cita:

<div class="scrollable">
<div id="lista">
<ul class="navi">
<li><a><1></a></li>
<li><a><2></a></li>
<li><a><3></a></li>
<li><a><4></a></li>
<li><a><5></a></li>
<li><a><6></a></li>
<li><a><7></a></li>
<li><a><8></a></li>
<li><a><9></a></li>
<li><a><10></a></li>
<li><a><11></a></li>
<li><a><12></a></li>
<li><a><13></a></li>
<li><a><14></a></li>
<li><a><15></a></li>
</ul>
</div>

- añade ese selector a la css de esta manera:

#lista { height: 75px;
width: 470px;
overflow: auto;
position: relative;
left:39px;
}

- ahora modifica el selector del ul:

ul.navi {height:1.45em;
margin:20px 0pt 0pt;
padding:0px;
position:relative;
top:10px;
width: 800px;
}

Esto hará que la lista de las pestañas tenga un scroll horizontal en lugar de salir en dos líneas. Si añades más pestañas, tendrás que agrandar el tamaño de la lista (width).

No creo que haya una forma de hacerlo automático.

Pruébalo con detenimiento y exactitud, a ver qué pasa.