Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de [Problema] Lista dentro de scroll horizontal ( Falla y no se porque ) en el foro de CSS en Foros del Web. Buenas, primero agradecer vuestro tiempo ^^ Estoy haciendo una pagina con un reproductor en flash y tengo una lista que sirve para seleccionar el video ...
  #1 (permalink)  
Antiguo 30/09/2008, 03:19
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Exclamación [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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 ;)
  #2 (permalink)  
Antiguo 30/09/2008, 04:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 30/09/2008, 05:03
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

No se soluciona, ahora cuelgo el archivo en rapidshare y lo posteo aqui para que lo mireis bien :S
  #4 (permalink)  
Antiguo 30/09/2008, 05:07
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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

Última edición por Shagraarath; 30/09/2008 a las 05:34
  #5 (permalink)  
Antiguo 30/09/2008, 05:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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?
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 30/09/2008, 05:39
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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.
  #7 (permalink)  
Antiguo 30/09/2008, 05:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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

No te preocupes, alguien te ayudará.

Saludos.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 30/09/2008, 05:47
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

que utilizas?
  #9 (permalink)  
Antiguo 30/09/2008, 05:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

Has puesto para descargar un archivo de 77 megas. No sé si eres consciente de eso.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 30/09/2008, 05:58
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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.
  #11 (permalink)  
Antiguo 30/09/2008, 06:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 30/09/2008, 06:06
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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.flowplayera.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.pngno-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.preva.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.gifleft top no-repeat;
    
padding-left:4px;
    
float:left;
    
margin:0;
    list-
style-type:none;
}

ul.navi a {
    
background:url(../img/tab-right.gifright 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 aul.navi a:hover {
    
background-position:100&#37; -150px;
    
border-bottom:1px solid #fff;
}

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

  #13 (permalink)  
Antiguo 30/09/2008, 06:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 30/09/2008, 06:43
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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

donde esta el #scrollable?

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

:S
  #15 (permalink)  
Antiguo 30/09/2008, 07:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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

Cita:
Iniciado por Mikmoro Ver Mensaje
Si te fijas en el ejemplo de la página de flowplayer, hace prácticamente lo mismo que te he dicho:
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 30/09/2008 a las 07:57
  #16 (permalink)  
Antiguo 01/10/2008, 02:59
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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.
  #17 (permalink)  
Antiguo 01/10/2008, 03:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

¿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:
<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>
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 01/10/2008, 03:24
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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

Última edición por Shagraarath; 01/10/2008 a las 03:48
  #19 (permalink)  
Antiguo 06/10/2008, 03:13
Avatar de Shagraarath  
Fecha de Ingreso: agosto-2008
Mensajes: 151
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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.

Última edición por Shagraarath; 06/10/2008 a las 03:18
  #20 (permalink)  
Antiguo 06/10/2008, 11:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [Problema] Lista dentro de scroll horizontal ( Falla y no se porque )

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.
__________________
Visita mi nueva web idplus.org
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:59.