Foros del Web » Creando para Internet » HTML »

Scroll interno

Estas en el tema de Scroll interno en el foro de HTML en Foros del Web. Que tal Foreros: Quisiera ver si alguien me puede ayudar con lo siguiente, me podrian decir como lograr el scroll interno que tiene esta pagina: ...
  #1 (permalink)  
Antiguo 16/12/2004, 11:07
Avatar de neothemaster  
Fecha de Ingreso: diciembre-2004
Ubicación: Estado de Mexico
Mensajes: 179
Antigüedad: 13 años
Puntos: 0
Pregunta Scroll interno

Que tal Foreros:

Quisiera ver si alguien me puede ayudar con lo siguiente, me podrian decir como lograr el scroll interno que tiene esta pagina: http://www.seekingavril.com/musicvideo.php??

He visto varias paginas que lo tienen (http://www.twobeats.com/avatars/avatars.html), pero no se como se logran (independientemente de que esten de colores)
  #2 (permalink)  
Antiguo 16/12/2004, 15:45
Avatar de cookie  
Fecha de Ingreso: agosto-2002
Mensajes: 688
Antigüedad: 15 años, 3 meses
Puntos: 0
Eso lo logras con un IFRAME

Es decir, abres una pagina dentro de otra, y los scrolls aparecen porque el contenido de la pagina que esta dentro es mas grande que la que tiene el IFRAME, no se si me explico.

Y todo aparenta ser una sola pagina (por los colores y adornos) en tu ejemplo, porque por ahi usan una propiedad en la etiqueta DIV que es asi

<DIV allowtransparency="true">

Es decir que todo se hace transparente, excepto imagenes y textos.

Saludos
__________________
___________________________

do the evolution ¡
Mineriaenlinea.com
  #3 (permalink)  
Antiguo 16/12/2004, 15:48
Avatar de fgil2  
Fecha de Ingreso: enero-2003
Ubicación: zaragoza
Mensajes: 285
Antigüedad: 14 años, 11 meses
Puntos: 0
Hola neothemaster:

Mira esto está estraido de la segunda página que mencionas:
------------------------------------------------------------------------------------
<body>
<center>
<table width="774" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="450" height="400" background="layout1a.jpg" scope="col"><iframe name="inline1" width="450" height="400" style="border: 0px dashed #000000" border="0" frameborder="0" src="avatar.html" target="_blank">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe></th>

<th width="324" height="400" scope="col"><img src="layout1b.jpg" width="324" height="400"></th>
</tr>
<tr>
<th width="450" height="153" scope="row"><img src="layout2a.jpg" width="450" height="153"></th>
<td width="324" height="153"><img src="layout2b.jpg" width="324" height="153"></td>
</tr>
</table>
</center>
</body>
-----------------------------------------------------------------------------------
Si te fijas es bien sencillo, lo genera el navegador automaticamente.
El iframe llama a una página que es más "alta" que el tamaño que le han dado al iframe, con lo cual para poderla ver genera el scroll vertical....
Pasaría lo mismo si fuera más "ancha", entonces generaría el scroll horizontal.
[email protected]
__________________
fer
  #4 (permalink)  
Antiguo 16/12/2004, 21:11
Avatar de neothemaster  
Fecha de Ingreso: diciembre-2004
Ubicación: Estado de Mexico
Mensajes: 179
Antigüedad: 13 años
Puntos: 0
Ya veo

Me ha quedado clarisimo, tanto lo que me explican en el post de iframe como lo del scroll interno, pero lo que veo es que ambos me hacen mencion con codigo HTML, es decir que el iframe solo puede ser insertado por medio de HTML o el Dreamweaver tiene alguna opcion llamada "insertar iframe" por ejemplo.

Cookie mencionas que el iframe es una pagina que llama a otra, es decir es como los frames normales que tienes que salvar todos los frames como paginas HTML's independientes? tambien preguntarte que el codigo DIV que me mencionas es lo que hace que el scroll tenga esa caracteristica de transparencia?.

Saludos a ambos y gracias por su ayuda.
  #5 (permalink)  
Antiguo 17/12/2004, 09:36
Avatar de cookie  
Fecha de Ingreso: agosto-2002
Mensajes: 688
Antigüedad: 15 años, 3 meses
Puntos: 0
Cita:
Iniciado por neothemaster
es decir es como los frames normales que tienes que salvar todos los frames como paginas HTML's independientes?
SI, exactamente


Cita:
Iniciado por neothemaster
tambien preguntarte que el codigo DIV que me mencionas es lo que hace que el scroll tenga esa caracteristica de transparencia?.
Esa etiqueta hace que el contenido de tu IFRAME (o sea la otra pagina) tenga un fondo transparente, y lo del Scroll sinceramente no estoy seguro, pero es lo mas probable

haz unas pruebas y a ver que obtienes

saludos
__________________
___________________________

do the evolution ¡
Mineriaenlinea.com
  #6 (permalink)  
Antiguo 17/12/2004, 09:53
Avatar de neothemaster  
Fecha de Ingreso: diciembre-2004
Ubicación: Estado de Mexico
Mensajes: 179
Antigüedad: 13 años
Puntos: 0
Exclamación Una duda mas

Amigo Cookie:

Toda la informacion que me has brindado me ha sido de mucha ayuda, pero me surgio una duda mas, exactamente entre que etiquetas se pone el <DIV>?? despues del <body> antes del <iframe>??

Mira yo la puse asi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image: url(fondoforma.jpg);
}
-->
</style></head>
<body>
<DIV allowtransparency="true">
<iframe src="test.htm" name="Test" width="500" marginwidth="2" height="400" marginheight="2" align="middle" scrolling="yes" frameborder="0">
</DIV>
</iframe>
</body>
</html>

Y el dreamweaver me marco este error: The allowtransparency attribute of the DIV tag is not supported [Microsoft Internet Explorer 6.0]

Es decir que si no lo soporta IE 6, como lo voy a poder visualizar? o que es lo que estoy haciendo mal aqui?, no sera que la transparencia que viene en la pagina que cito, estara desde el HTML que esta en la parte de "src"??

Espero me puedas ayudar y disculpa las molestias
  #7 (permalink)  
Antiguo 17/12/2004, 09:58
Avatar de neothemaster  
Fecha de Ingreso: diciembre-2004
Ubicación: Estado de Mexico
Mensajes: 179
Antigüedad: 13 años
Puntos: 0
Observacion

Viendo el codigo fuente de la pagina hay algo que a lo mejor es lo que hace el efecto de trasparencia:

.transbox {
width: 400px;
height: 350px;
overflow: auto;
filter: chroma(color=FFFFFF);
}

No sera por ahi???
  #8 (permalink)  
Antiguo 17/12/2004, 10:37
Avatar de cookie  
Fecha de Ingreso: agosto-2002
Mensajes: 688
Antigüedad: 15 años, 3 meses
Puntos: 0
Hola

Efectivamente la propiedad que se pone a la etiqueta DIV es en la pagina que va dentro del IFRAME (o sea la otra pagina)

Ya probe que si funciona la transparencia de acuerdo al codigo de la pagina que poseteaste.

Revisa este codigo, (o copia y pega) y veras como es que el scroll se hace transparente.

Solo una cosa

En el codigo donde dice "background-image: url(extras/folder.gif);" escribe la ruta de alguna imagen para que la pongas de fondo y compruebes la transparencia


Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE>BODY {
	SCROLLBAR-FACE-COLOR: #ffffff;
	SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
	SCROLLBAR-SHADOW-COLOR: #000000;
	SCROLLBAR-3DLIGHT-COLOR: #ffffff;
	SCROLLBAR-ARROW-COLOR: #000000;
	SCROLLBAR-TRACK-COLOR: #ffffff;
	SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
	SCROLLBAR-BASE-COLOR: #ffffff;
	background-image: url(extras/folder.gif);
}
.transbox {
	FILTER: chroma(color=#FFFFFF); OVERFLOW: auto; WIDTH: 400px; HEIGHT: 350px
}
.style2 {
	FONT-SIZE: 12px
}
</STYLE>
<title>Untitled Document</title>
</head>

<body>
<DIV class=transbox allowtransparency="true">
  <P class=style2>bla bla bla blala bla blabla bla bla blabla bla bla blabla bla bla bla</P>
  <span class="style2">bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla</span>
  <P class=style2>bla bla bla bla<span class="style2"> bla</span><span class="style2">bla bla bla bla</span><span class="style2">bla bla bla bla</span><span class="style2">bla bla bla bla</span><span class="style2">bla bla bla bl</span></P>
  <P class=style2>bla bla bla blala bla blabla bla bla blabla bla bla blabla bla bla bla</P>
  <span class="style2">bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla</span>
  <P class=style2>bla bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bl</P>
  <P class=style2>bla bla bla blala bla blabla bla bla blabla bla bla blabla bla bla bla</P>
  <span class="style2">bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla</span>
  <P class=style2>bla bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bl</P>
  <P class=style2>bla bla bla blala bla blabla bla bla blabla bla bla blabla bla bla bla</P>
  <span class="style2">bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla</span>
  <P class=style2>bla bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bl</P>
</DIV>
</body>
</html>

Espero que te sirva

Saludos
__________________
___________________________

do the evolution ¡
Mineriaenlinea.com

Última edición por cookie; 17/12/2004 a las 18:41
  #9 (permalink)  
Antiguo 17/12/2004, 12:31
Avatar de neothemaster  
Fecha de Ingreso: diciembre-2004
Ubicación: Estado de Mexico
Mensajes: 179
Antigüedad: 13 años
Puntos: 0
Agradecimiento

Cookie:

Tu ayuda me sirvio mucho, el ultimo codigo que me haz mandado me super funciono y sale como esperaba.

Gracias por la ayuda
  #10 (permalink)  
Antiguo 17/12/2004, 18:42
Avatar de cookie  
Fecha de Ingreso: agosto-2002
Mensajes: 688
Antigüedad: 15 años, 3 meses
Puntos: 0
me alegra q te haya servido


saludos
__________________
___________________________

do the evolution ¡
Mineriaenlinea.com
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 23:15.