Foros del Web » Creando para Internet » Diseño web »

como se hace esto?

Estas en el tema de como se hace esto? en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/10/2009, 20:15
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
como se hace esto?

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) ...
  #2 (permalink)  
Antiguo 08/10/2009, 20:22
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: como se hace esto?

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
  #3 (permalink)  
Antiguo 08/10/2009, 20:31
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: como se hace esto?

no me a funcionado con eso ke me as dicho... ke otra cosa puedo hacer?
  #4 (permalink)  
Antiguo 08/10/2009, 22:58
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: como se hace esto?

Mucho mejor es que pongas tu código para poder ayudarte.
  #5 (permalink)  
Antiguo 09/10/2009, 22:57
 
Fecha de Ingreso: octubre-2009
Mensajes: 22
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: como se hace esto?

Asi es amigo, enseñanos tu código, proceso, método o software en que los estas haciendo, pues es necesario para orientarte.
  #6 (permalink)  
Antiguo 10/10/2009, 10:39
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: como se hace esto?

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.
  #7 (permalink)  
Antiguo 10/10/2009, 11:16
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: como se hace esto?

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
  #8 (permalink)  
Antiguo 11/10/2009, 07:49
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: como se hace esto?

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..
  #9 (permalink)  
Antiguo 11/10/2009, 08:29
Avatar de fcdragons  
Fecha de Ingreso: agosto-2008
Ubicación: echo $_REQUEST['ubicacion'];
Mensajes: 474
Antigüedad: 9 años, 3 meses
Puntos: 13
Respuesta: como se hace esto?

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
__________________
SumarioWeb
@sumarioweb
BasicNews
  #10 (permalink)  
Antiguo 11/10/2009, 13:24
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: como se hace esto?

fcdragons ke va no me funciona lo ke me dices...............
  #11 (permalink)  
Antiguo 11/10/2009, 14:22
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: como se hace esto?

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!!!!!!!
  #12 (permalink)  
Antiguo 11/10/2009, 14:38
Avatar de fcdragons  
Fecha de Ingreso: agosto-2008
Ubicación: echo $_REQUEST['ubicacion'];
Mensajes: 474
Antigüedad: 9 años, 3 meses
Puntos: 13
Respuesta: como se hace esto?

si usas position:absolute es mejor que en vez de padding-top, uses top a secas ...
creoyo
__________________
SumarioWeb
@sumarioweb
BasicNews
  #13 (permalink)  
Antiguo 11/10/2009, 17:01
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: como se hace esto?

ya lo e solucionado....era una tonteria XD XD
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 02:42.