Scroll interno

neothemaster · #1 (**permalink**) 16/12/2004, 11:07

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)

cookie · #2 (**permalink**) 16/12/2004, 15:45

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

fgil2 · #3 (**permalink**) 16/12/2004, 15:48

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.
S@lu2.

neothemaster · #4 (**permalink**) 16/12/2004, 21:11

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.

cookie · #5 (**permalink**) 17/12/2004, 09:36

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

neothemaster · #6 (**permalink**) 17/12/2004, 09:53

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

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

neothemaster · #7 (**permalink**) 17/12/2004, 09:58

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

cookie · #8 (**permalink**) 17/12/2004, 10:37

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

neothemaster · #9 (**permalink**) 17/12/2004, 12:31

Cookie:

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

Gracias por la ayuda

cookie · #10 (**permalink**) 17/12/2004, 18:42

me alegra q te haya servido

saludos