HTML - scrolling

 
Vista:
sin imagen de perfil
Val: 51
Ha disminuido su posición en 8 puestos en HTML (en relación al último mes)
Gráfica de HTML

scrolling

Publicado por zendi (79 intervenciones) el 07/06/2016 20:08:55
Estoy creando una pagina en la cual tengo una caja para Ultimos videos Tutoriales.

El asunto es que necesito colocarle un scrolling vertical para navegar en ella.
Tengo este codigo codigo para los css
1
2
3
4
5
#scroll {
    background-color: #00FFFF;
    overflow: scroll;
 
}
y aqui lo aplico
1
2
3
4
5
6
7
<div id="contenido_widget">
	<div id="scroll">
	<a href="?cat=<?php echo $noticia[$i]["id_noticia"];?>"
	title="<?php echo $noticia[$i]["titulo"];?>"></a>
	<a href=<?php echo $noticia[$i]["titulo"];?> >
	<?php echo $noticia[$i]["titulo"];?></a></div>
</div>
y aparece de esta forma:

pagina


pero no esta avanzando el scrolling. Si alguien puede ver el error. Por favor.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

scrolling

Publicado por xve (1543 intervenciones) el 08/06/2016 07:31:02
Hola Zendi, lo que te pasa, es que le has puesto el scroll, a cada linea... tienes que poner el scroll al contenedor (a la caja)

No nos muestras el código completo, por lo que no te puedo indicar...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 51
Ha disminuido su posición en 8 puestos en HTML (en relación al último mes)
Gráfica de HTML

scrolling

Publicado por zendi (79 intervenciones) el 08/06/2016 18:28:40
Hola Xve. bueno este es el codigo completo para la caja:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="widget"  style="overflow:scroll;">
	<div id="caja_widget">
		<div id="titulo_widget">Ultimos VideosTutoriales</div>
		<?php
		$noticia=$tra->get_paginacion_noticias();
		for($i=0;$i<count($noticia);$i++)
		{
			?>
			<div id="contenido_widget">
				<a href="?cat=<?php echo $noticia[$i]["id_noticia"];?>"
				title="<?php echo $noticia[$i]["titulo"];?>"></a>
				<a href=<?php echo $noticia[$i]["titulo"];?> >
				<?php echo $noticia[$i]["titulo"];?></a>
			</div>
			<?php
		}
		?>
	</div>
</div>
pero lo esta acortando y aparece el scrolling horizontal ¿como hago para que aparezca el scrolling vertical?

aparece de esta forma:

pagina
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

scrolling

Publicado por xve (1543 intervenciones) el 08/06/2016 20:11:48
Tienes que ponerle
1
overflow-y:auto;
para que te haga únicamente el scroll vertical.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 51
Ha disminuido su posición en 8 puestos en HTML (en relación al último mes)
Gráfica de HTML

scrolling

Publicado por zendi (79 intervenciones) el 08/06/2016 20:48:28
saludos Xve, acabo de realizar lo que me dices y sigue apareciendo el scroll horizontal. Que puedes Ver que no capto. Por favor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="widget">
	<div id="caja_widget" style="overflow-y:auto; width:200px;">
		<div id="titulo_widget">Ultimos VideosTutoriales</div>
		<?php
		$noticia=$tra->get_paginacion_noticias();
		for($i=0;$i<count($noticia);$i++)
		{
			?>
			<div id="contenido_widget">
			<a href="?cat=<?php echo $noticia[$i]["id_noticia"];?>"
			title="<?php echo $noticia[$i]["titulo"];?>"></a>
			<a href= <?php echo $noticia[$i]["titulo"];?>>
			<?php echo $noticia[$i]["titulo"];?></a>
			</div>
		<?php
		}
		?>
	</div>

y los estilos:
1
2
#widget{ width:100px; float:left; margin-left:5px;}
#caja_widget{ width:80px; float:left; }
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 51
Ha disminuido su posición en 8 puestos en HTML (en relación al último mes)
Gráfica de HTML

scrolling

Publicado por zendi (79 intervenciones) el 08/06/2016 22:26:59
Hola Xve. Ya resolví el problemilla, pero el asunto es que esta afectando esta parte del codigo

1
<div id="titulo_widget">Ultimos VideosTutoriales</div>


está arrastrando el titulo, la idea es que traslade solo el contenido.

Este es lo que realicé:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="separador_widget"></div>
<div id="widget" style="overflow-y:auto; overflow-x: hidden; width:200px">
	<div id="caja_widget">
		<div id="titulo_widget">Ultimos VideosTutoriales</div>
		<?php
		$noticia=$tra->get_paginacion_noticias();
		for($i=0;$i<count($noticia);$i++)
		{
			?>
			<div id="contenido_widget">
				<a href="?cat=<?php echo $noticia[$i]["id_noticia"];?>"
				title="<?php echo $noticia[$i]["titulo"];?>"></a>
				<a href= <?php echo $noticia[$i]["titulo"];?>>
				<?php echo $noticia[$i]["titulo"];?></a>
			</div>
			<?php
		}
	?>
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

scrolling

Publicado por xve (1543 intervenciones) el 09/06/2016 08:26:29
Tendrás que sacar el titulo fuera del div que hace el scroll...

1
2
3
<div id="titulo_widget">Ultimos VideosTutoriales</div>
    <div id="widget" style="overflow-y:auto; overflow-x: hidden; width:200px">
    ...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 51
Ha disminuido su posición en 8 puestos en HTML (en relación al último mes)
Gráfica de HTML

scrolling

Publicado por zendi (79 intervenciones) el 09/06/2016 17:39:00
Gracias Xve. Ahora si funciona.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar