Ventana con barra de desplazamiento

chuekeron · #1 (**permalink**) 19/11/2008, 15:14

Estoy trabajando con Dreamweaver y necesito incluir dentro de mi pagina una ventana con barra de desplazamiento, donde van a ir contenidas varias imagenes. Como puedo hacerlo?... con javascript? html?...

berthely · #2 (**permalink**) 20/11/2008, 00:43

Intenta esto...

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#caja1 {
	overflow: scroll;
	height: 100px;
}
-->
</style>
</head>

<body>
<table width="300" height="139" border="1">
  <tr>
    <td height="26">Tabla</td>
    <td>Tabla</td>
    <td>Tabla</td>
  </tr>
  <tr>
    <td height="105"><div id="caja1">Esto esta dentro de una barra de desplazamiento Esto esta dentro de una barra de desplazamiento Esto esta dentro de una barra de desplazamiento Esto esta dentro de una barra de desplazamiento Esto esta dentro de una barra de desplazamiento Esto esta dentro de una barra de desplazamiento Esto esta dentro de una barra de desplazamiento Esto esta dentro de una barra de desplazamiento Esto esta dentro de una barra de desplazamiento Esto esta dentro de una barra de desplazamiento Esto esta dentro de una barra de desplazamiento </div></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Se vera asi...

Suerte

daPhyre · #3 (**permalink**) 20/11/2008, 09:28

¿Era necesaria la tabla?

Respondo rápido: se hace con CSS, solo necesitas agregar la propiedad "overflow:scroll". Ya berthely te ha dado un ejemplo

GabrielEnrique · #4 (**permalink**) 20/11/2008, 09:44

esta es otra

Código HTML:

<html>
<head>
<title>Conocenos</title>
<body bgcolor=#FF9900>




<DIV align=center> 
<DIV style="BORDER-RIGHT:  border-style: ridge; border-color: red; BORDER-TOP: border-width: 4px; border-style: ridge; border-color: red; BORDER-LEFT: border-width: 4px; border-style: ridge; border-color: red; WIDTH: 100px;BORDER-BOTTOM: border-width: 2px; border-style: ridge; border-color: red; SCROLLBAR-FACE-COLOR: black; SCROLLBAR-HIGHLIGHT-COLOR: black; OVERFLOW: scroll;SCROLLBAR-SHADOW-COLOR: white; COLOR: #ff88e7; SCROLLBAR-3DLIGHT-COLOR: #ddaaff; SCROLLBAR-ARROW-COLOR: #99cc33; SCROLLBAR-DARKSHADOW-COLOR: white; HEIGHT: 100px; BACKGROUND-COLOR: darkblue";> <FONT color=#99cc33 face=tahoma size=2><strong><P align=center>
O asi tambien pero si tu quieres cambiare adelante



</DIV></DIV></FONT></STRONG>


</html>

daPhyre · #5 (**permalink**) 20/11/2008, 09:49

bgcolor? Cierre en orden incorrecto? Sin cerrar title?

Gabo, ¿Cuanto tiempo tienes en diseño web? Temo decirte que tienes unos pequeños errores (Y el CSS tampoco se ve muy correcto que digamos). Tranquilo, no pasa nada, pero no confundas a los demás compañero o podrían tener problemas también en el futuro.

Te recomiendo leas un poco más de XHTML y CSS para que corrijas los problemas que aun tienes, aquí yo te ayudo en el foro para mejorar. Suerte

daPhyre · #6 (**permalink**) 20/11/2008, 10:07

Mi conciencia no me dejó descansar al ver el código, así que tuve que corregirlo

Código HTML:

<html>
<head>
<title>Conocenos</title>
<style type="text/css">
body{
  background-color: #f90 	/* bgcolor="FF9900" */
}
#contenedor{
  margin: 0 auto; 	/* div align="center" */
}
.barradesp{
  color: #ff88e7;
  background-color: darkblue;
  width: 100px;
  height: 100px;
  overflow: scroll;
  border: 4px ridge red;
  SCROLLBAR-FACE-COLOR: black;
  SCROLLBAR-HIGHLIGHT-COLOR: black;
  SCROLLBAR-SHADOW-COLOR: white;
  SCROLLBAR-3DLIGHT-COLOR: #daf;
  SCROLLBAR-ARROW-COLOR: #9c3;
  SCROLLBAR-DARKSHADOW-COLOR: white;
}
.parrafo{
  text-align: center;	/* p align="center" */
  font: tahoma 2em;	/* font face=tahoma size=2 */
  color: #9c3;		/* font color="#99cc33" */
}
</style>
</head>

<body bgcolor=#FF9900>

<div id="contenedor">
<div class="barradesp">
<p class="parrafo"><strong>
O asi tambien pero si tu quieres cambiare adelante
</strong></p>
</div>
</div>
</body>

</html>

Se que se ve más largo, pero solo le di enters a los estilos para que se leyera mejor; es lo mismo. Dejé comentarios en el CSS para que vieran donde están las diferencias

Por cierto, creo que las propiedades del Scroll no son válidas y solo sirven en IE

Suerte

GabrielEnrique · #7 (**permalink**) 20/11/2008, 11:54

oh disculpe pues como ya me habia salido ni me fije y en realidad lo que no cerre fue el head ah y que por cierto usted no abrio

daPhyre · #8 (**permalink**) 20/11/2008, 12:18

Cita:

Iniciado por GabrielEnrique

...y que por cierto usted no abrio

¿No abrí el head? Pero si ahí lo estoy viendo

chuekeron · #9 (**permalink**) 20/11/2008, 13:25

Gracias por su atencion, ya pude solucionar esto. Daphyre, siendo q sabes tanto me podrias ayudar con lo del shadowbox...mi pregunta esta en web general. Saludos.

berthely · #10 (**permalink**) 20/11/2008, 14:45

Cita:

Iniciado por daPhyre

¿Era necesaria la tabla? ........

Jojojo te juro que lei que deberia estar dentro de una tabla

aveces me traiciona la vista.

daPhyre · #11 (**permalink**) 20/11/2008, 23:03

Cita:

Iniciado por berthely

Jojojo te juro que lei que deberia estar dentro de una tabla

aveces me traiciona la vista.

Descuida, eso pasa

Cita:

Iniciado por chuekeron

Gracias por su atención, ya pude solucionar esto. daPhyre, siendo que sabes tanto me podrías ayudar con lo del shadowbox...mi pregunta esta en web general. Saludos.

Bueno, me se varios truquillos que me encanta compartir cuando puedo. Desafortunadamente Shadowbox no está entre ellos. Descuida, alguien de mayor conocimiento en el tema te ayudará

(PD: ¿Que es exactamente un ShadowBox? ¿Te refieres a un objeto con sombreado?)

chuekeron · #12 (**permalink**) 21/11/2008, 00:20

Es un Clon de LightBox...