como se hace esto?

rufus · #1 (**permalink**) 08/10/2009, 19:15

tengo ke meter mucho texto en una pagina y kiero meter todo el texto pero ke se pueda subir y bajar por el texto con la tipica barra de desplazamiento vertical.. digamos ke tengo una celda de 800 px de ancho por 600 de alto como ago para meter el texto (ke es muy largo) ...

deirdre · #2 (**permalink**) 08/10/2009, 19:22

Hola rufus

En el lugar en el quieras meter tu texto pon esto:

Código HTML:

<div style="width: 800px; height: 600px; overflow: auto">
Aquí todo tu texto
</div>

Y mejor si sacas el estilo a una hoja de estilo.

Bye

rufus · #3 (**permalink**) 08/10/2009, 19:31

no me a funcionado con eso ke me as dicho... ke otra cosa puedo hacer?

deirdre · #4 (**permalink**) 08/10/2009, 21:58

Mucho mejor es que pongas tu código para poder ayudarte.

aaron_segura · #5 (**permalink**) 09/10/2009, 21:57

Asi es amigo, enseñanos tu código, proceso, método o software en que los estas haciendo, pues es necesario para orientarte.

mayid · #6 (**permalink**) 10/10/2009, 09:39

Cita:

<div style="width: 800px; height: 600px; overflow: auto">
Aquí todo tu texto
</div>

Creo que aqui, el overflow puede ir tanto en vertical como en horizontal. Por que esperar que la celda se alargue y no se ensanche?

Yo estoy probando esto:

Cita:

<table>
<tr>
<td style="width: 500px; height:300px;overflow:auto">
... mucho texto...
</td>
</tr>
</table>

Sin resultados.

deirdre · #7 (**permalink**) 10/10/2009, 10:16

Prueba esto, lo copias y pegas en un html limpio y lo pruebas:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Celda son scroll</title>
<style type="text/css">
p {
	line-height: 50px;
}
</style>
</head>

<body>
<table>
	<tr>
	<td>
		<div style="width: 500px; height: 300px; overflow: auto; border:1px solid #444;">
			<p>El borde sólo es para test</p>
			<p>El borde sólo es para test</p>
			<p>El borde sólo es para test</p>
			<p>El borde sólo es para test</p>
			<p>El borde sólo es para test</p>
			<p>El borde sólo es para test</p>
			<p>El borde sólo es para test</p>
			<p>El borde sólo es para test</p>
			<p>El borde sólo es para test</p>
			<p>El borde sólo es para test</p>
		</div>
	</td>
	</tr>
</table>

</body>
</html>

Bye

rufus · #8 (**permalink**) 11/10/2009, 06:49

hola gracias por la ayuda..mirad os pongo el codigo..navegando por la red e encontrado un script ke sirve para tener una barra de desplazamiento para el texto pero lo ke me pasa es ke el texto se me coloca abajo dela pagina fuera del main.

y yo lo ke kiero es ke se me kede dentro de la celda y ke esta no se descuadre.. os pogo el codigo:

css:

Código:

/* CSS Document */


#wrapper{
	height:auto;
	margin:auto;
	width: 800px;
	border-top-color:#000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-top-style: solid;
	border-right-style:solid;
	border-left-style: solid;
	border-bottom-style:solid;
	background-color: #FFFFFF;
	border-width:thin;

	}
	
#headerservicios {width:800px; height:135px; background-color: #FFFFFF; margin:auto; 		
	
}



#maintnd{ width:800px; background-color: #FFFFFF; height:800px; background-image:url(imagenes/2fondomenu.gif); background-repeat:no-repeat;}

#menu{width:200px; height:800px;float:left;}


/*menu tnd*/

.menu2{ margin-left:42px; padding-top:50px; width:130px; list-style:none;  margin-top:80px; }



.menu2 li{padding:0; margin:0 0 1px 0; height:35px; display:block; background-position:center; background-repeat:no-repeat; }

.menu2 li a{text-align:left;height:50px;
padding-top:10px; padding-left:13px; font:12px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('imagenes/frontal.png') 0px 0px no-repeat; text-decoration:none;}

.menu2 li a:hover{background:url('imagenes/trasera.png') 0px -5px no-repeat; color:rgb(255,255,255);}


.menu2 li a span{line-height:15px;}

#menu img{   padding-top:35px; padding-left:20px; }


#scrollTextDiv {width:540px; height:800px;float:left; font-size:12px; overflow:scroll;  text-align:justify; padding-left:250px; padding-rigth:250px; padding-top:50px;}

html + javascript:

Código:

<!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>Tnd studio</title>

<script src="script.js">


<SCRIPT LANGUAGE="JavaScript">

document.writeln('<STYLE TYPE="text/css">')

document.writeln('#scrollTextDiv {position:absolute; left:'+parent.scrollMarginLeft+'; top:'+parent.scrollMarginTop+'; width:'+(parent.scrollWidth-parent.scrollBarWidth-2*parent.scrollBorder-parent.scrollMarginLeft-parent.scrollMarginRight)+';}')

document.writeln('</STYLE>')

</SCRIPT>

<style type="text/css">
<!--
body {
	background-color: #ffd68e;
}
.Estilo1 {color: #A97110}
-->
</style>

<link href="index2.css" rel="stylesheet" type="text/css" />
</head>

<body onLoad="parent.scrollResize()" BGCOLOR="#FFB08A">
<div id="wrapper">
<div id="headerservicios"> 
<img src="imagenes/2logotende.gif" />
	</div>
      <div id="maintnd">
	  <div id="menu">
	 
<ul class="menu2">

  <li><a href="#"><span>Inicio</span></a></li>
    <li><a href="#"><span>Historia</span></a></li>
  <li><a href="#"><span>Fiestas</span></a></li>
  <li><a href="#"><span>Cultura</span></a></li>
   <li><a href="#"><span>Fotos</span></a></li>
   <li><a href="#"><span>Gastronomia</span></a></li>
</ul>
	  </div>
 <div  ID="scrollTextDiv">
 
 La Historia de Alemania como país se inicia el 1871 al instaurarse el Imperio alemán. Con anterioridad lo que conocemos como Alemania fue una agrupación de estados en el marco del Sacro Imperio Romano Germánico, formado a partir de la división en 843 del Imperio Carolingio, fundado en el año 800 por Carlomagno. Este Imperio existió en diversas formas hasta ser disuelto en 1806 como consecuencia de las guerras Napoleónicas.
Durante el siglo XVIII se inicia la transformación de Prusia en una potencia europea. El largo reinado de Federico II el Grande da un gran impulso a la consolidación de este reino, que se ve envuelto en las guerras de Sucesión Austriaca y de los Siete Años. A partir de entonces Prusia disputaría a la Casa de Austria la hegemonía de Alemania.
Tras la Revolución Francesa, los diferentes estados monárquicos de Europa crean alianzas para enfrentar la amenaza que Francia representa para la estabilidad de sus propios regímenes.
Los estados alemanes participan activamente contra los ejércitos de Napoleón I, quien tras acumular importantes victorias instaura la Confederación del Rin en 1806. Poco después el emperador del Sacro Imperio abdica y disuelve así efectivamente el imperio.
En el Congreso de Viena, tras la derrota definitiva sobre el ejército francés, se disuelve la Confederación del Rin y se cree la Confederación Germánica. El 1 de enero de 1834 entra en vigor la asociación de aduanas, mediante la cual se abolen los aranceles entre algunos miembros del norte de la confederación, bajo hegemonía prusiana, la llamada Zollverein.
La Revolución de 1848 conduce a la creación del primer Parlamento alemán en Fráncfort del Meno que elabora una primera constitución pero fracasa con la unificación nacional, porque los monarcas recuperan el control.
Una reforma de la constitución danesa y la disputa por Schleswig-Holstein causa la guerra conocida como de los ducados (1864), y después la de las siete semanas (1866), por las cuales Prusia se asegura la hegemonía germánica.

 
El Imperio alemán se funda el 18 de enero de 1871 tras la victoria de Prusia en la Guerra franco-prusiana y se consigue la unificación de los diferentes estados alemanes en torno a Prusia, excluyendo a Austria. Así Prusia se convierte en Alemania, bajo el liderazgo del canciller Otto von Bismarck, quien será el verdadero artífice de la unificación; posiblemente uno de los estadistas más importantes del siglo XIX. Se inicia un período de gran desarrollo nacional alemán en todos los campos: economía, política y milicia.
Desde entonces Alemania se transforma junto al Reino Unido en una de las dos grandes potencias mundiales, sin ambiciones coloniales durante el gobierno de Bismarck.
A partir de este punto y durante las siguientes dos décadas se establecen los llamados "sistemas bismarckianos", que dominan la política europea. En el Congreso de Berlín de 1878 se reúnen los representantes de varios estados europeos bajo la presidencia de Bismarck con el propósito de reorganizar los Balcanes tras la Guerra Ruso-Turca de 1877–1878. Así como para equilibrar los intereses de Inglaterra, Rusia y Austria-Hungría en la zona. Después, entre 1884 y 1885 Bismarck convoca la conferencia de Berlín en la que las potencias establecen las pautas para el reparto colonial de África.
Con la coronación de Guillermo II como Kaiser, se inicia un enfrentamiento entre él y Bismarck, el cual provoca la caída del canciller en 1890. El emperador será incapaz de continuar con las políticas implantadas por Bismarck y Alemania se ve poco a poco en la incapacidad de mantener el equilibrio europeo, que para entonces era más que nunca la base del equilibrio mundial.
En 1914 estalla la Primera Guerra Mundial que, al provocar la derrota de Alemania en 1918, marca el fin de la dinastía Hohenzollern. Las naciones vencedoras imponen el Tratado de Versalles.
República de Weimar 


Sello de Correos de 20.000 millones de marcos (señal de inflación galopante)
Artículo principal: República de Weimar
En 1919, tras la derrota en la Primera Guerra Mundial, se constituye la República de Weimar. Es un periodo de gran inestabilidad debido a la fragmentación parlamentaria en partidos minoritarios y al rechazo de los militares a aceptar la derrota y los acuerdos impuestos por los vencedores.
La crisis económica como consecuencia del Tratado de Versalles conlleva la ruina para una gran parte de la clase media y esta situación se agrava tras la Gran Depresión de 1929.
Así, se produce una situación propicia para el auge de ideas nacionalistas y ultraderechistas. En las elecciones de 1933, el Partido Nacional Socialista Alemán de los Trabajadores (NSDAP, nazi) consigue llegar al poder, y finalizará enseguida la primera experiencia democrática alemana.
Alemania nazi 
Artículo principal: Alemania nazi

El Tercer Reich fue el de la Alemania nazi. Duró doce años, desde 1933 hasta 1945.

 
Mapa de Alemania el 31 de agosto de 1939
La adversidad económica - debida tanto a las condiciones de la paz como a la gran depresión mundial - es marcada como una explicación de por qué los partidos antidemocráticos, tanto del ala derecha como del ala izquierda, fueron a


 </div>
 </div>
    </div>

  </body>
</html>

como veis el texto es muy largo es la historia reciente de alemania y el espacio donde meterlo es pekeño y no kiero tener ke rediseñar la pagina entera..

fcdragons · #9 (**permalink**) 11/10/2009, 07:29

mnira, si es con un CSS externo, tu codigo CSS deberia ser asi

Código:

#wrapper {width:800px;height:600px;overflow:auto;}

Y en HTML seria

Código:

<div id="wrapper">
Texto, aqui si supera los 600px de tamaño con el texto, te saldra una barra de navegacion, la barra de navegacion horizontal, solo saldra si sale una imagen, o una tabla mayor a 800px de anchura. pero eso se puede arreglar con un max-width
</div>

Espero que te funcione

rufus · #10 (**permalink**) 11/10/2009, 12:24

fcdragons ke va no me funciona lo ke me dices...............

rufus · #11 (**permalink**) 11/10/2009, 13:22

me sigue saliendo mal...haber en la celda div

#scrollTextDiv {width:540px; height:800px;float:left; font-size:12px; overflow:auto; text-align:justify; padding-left:280px; padding-rigth:280px; padding-top:50px; padding-bottom:900px;position:absolute;visibility: visible;}

la tengo asi. ahi teneis el codigo. ya tengo la barra de desplazamiento pero el texto no se me encierra en la celda lo ke yo kiero hacer es ke el texto de abajo este oculto dentro del div por ke, lo ke me sale ahora es todo el texto desplegado lo ke me hace ke la pagina tenga cerca de 1500 pixeles de alta mientra el diseño ke yo e hecho es de 900 pixeles...

como puedo hacer para ke el texto se me oculte y con la barra de desplazamiento valla saliendo segun mueva esta???

necesito help!!!!!!!

fcdragons · #12 (**permalink**) 11/10/2009, 13:38

si usas position:absolute es mejor que en vez de padding-top, uses top a secas ...
creoyo

rufus · #13 (**permalink**) 11/10/2009, 16:01

ya lo e solucionado....era una tonteria XD XD