tamaño de texto variable

vites · #1 (**permalink**) 28/11/2005, 09:44

bueno, el caso es que tenia en una web unos botones en los que el usuario podia modificar el tamaño del texto, con javascript cambiaba el tamaño del texto del body y como el resto de tamaños de fuentes estan en relativo con respecto a ese en el css, todos se cambiaban sin problemas

haora lo que tengo que hacer es que segun el tamaño al que este habierta la ventana del explorador ese tamaño tiene que variar automaticamente, es decir, si yo voi ampliando poco a poco la ventana de mi explorador el tamaño de fuente debe ir aumenteando poco a poco

JavierB · #2 (**permalink**) 28/11/2005, 10:12

Hola vites

Echa un ojo a este mensaje:

http://www.forosdelweb.com/f53/fuente-proporcional-tamano-ventana-352194/

Saludos,

vites · #3 (**permalink**) 28/11/2005, 10:32

eto... primero muchas gracias por la respuesta y segundo que eso no me funciona en firefox, en principio con que se vea en explorer seria suficiente, pero si se pudiera ver en todos... estaria mejor

no se si es mucho pedir, de todas maneras gracias de nuevo

angsanchez · #4 (**permalink**) 28/11/2005, 14:20

Hola
Vites, lo he probado en Firefox y funciona perfectamente.

¡Un código muy interesante, JavierB!

vites · #5 (**permalink**) 29/11/2005, 03:05

Hummm... entonces tendre otra parte del código mal

muchas gracias

vites · #6 (**permalink**) 29/11/2005, 12:17

pues sigue si funcionarme por muchas vueltas que le doi, a ver si pueden ayudarme

Código:

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

	<title> Academia Atlantika - P&aacute;gina principal </title>

	<meta name="author" content="Imaxina." />
	<meta name="keywords" content="Academia atlantica" />
	<meta name="description" content="Academia de español" />

	<style type="text/css" media="all">

		body{
		background: #369;
		font-size:1em;
		color: #fff;
		border: 0px;
		padding: 0px;
		margin: 0px;
		}

		#logo{
		z-index:10;
		position:absolute;
		left: 0%;
		top: 0%;
		height:100%;
		}

		#sombra{
		position:absolute;
		left: 44%;
		top: 18%;
		font: normal 390% arial, san-serif, verdana;
		color: #000;
		}

		#texto{
		position: absolute;
		top: 2px;
		left: -3px;
		color: #fff;
		}

		.bandera{
		position: absolute;
		top:14%;
		left:42.75%
		}

		.bandera li{
		display: inline;
		list-decoration: none;
		padding-right:1%;
		}

		.bandera img{
		border:0px;
		/*height: 5.4%;*/
		}

		#mensaje{
		z-index:15;
		font: normal 200% san-serif, arial, verdana;
		position: absolute;
		top:25%;
		left:52.75%;
		letter-spacing: 0.6em ;
		}

		#contacto{
		z-index:15;
		position: absolute;
		right: 5%;
		bottom: 5%;
		z-index:12;
		font: normal 150% san-serif, arial, verdana;
		line-height: 200%;
		text-align: right;
		}

		#contacto a{
		color: #fff;
		text-decoration:none;
		}

		#menu1{
		z-index:30;
		display:block;
		}

		#menu2{
		z-index:40;
		display:none;
		}

	</style>

	<script type="text/javascript">
		<!--

		function pepe()
			{
			ancho=document.body.offsetWidth;
			document.body.style.fontSize=ancho/1300+'em';
			}

		function mensaje(tipo)
			{
			switch (tipo)
				{
				case 'esp': men='cursos de espa&ntilde;ol';
					break;
				case 'ale': men='spanischkurse';
					break;
				case 'ing': men='spanish courses';
					break;
				case 'fra': men='cours d\'espagnol';
					break;
				case 'fla': men='Flash';
					break;
				case 'html': men='Html';
					break;
				default: men='&nbsp;';
				}
				document.getElementById('mensaje').innerHTML=men;
			}

		function cambiar(idioma)
			{
			document.getElementById('fla').href="javascript:abrir('" + idioma + "', 'fla')";
			document.getElementById('html').href="javascript:abrir('" + idioma + "', 'html')";
			document.getElementById('menu1').style.display="none";
			document.getElementById('menu2').style.display="block";
			}

		function abrir(lan,tipo)
			{
			switch (tipo)
				{
				case 'fla':
					switch (lan)
						{
						case 'es': pag='atlantika.html';
							break;
						case 'al':pag='atlantika_ing.html';
							break;
						case 'in': pag='atlantika_ale.html';
							break;
						case 'fr':pag='atlantika_fr.html';
							break;
						}
					break;
				case 'html':pag='web/' + lan + '-home.html';
					break;
				}
			window.open(pag,'nova','status=no,scrollbars=no,menubar=no,width=800,height=545,top=20,left=0')
			/*Con los comentarios cierra la ventana actual y solo deja que se abra la otra
			var ventana = window.self;
			ventana.opener = window.self;
			ventana.close();
			*/
			}

		//-->
	</script>

</head>
<body onresize="pepe()" onload="pepe()">


	<div>

		<img id="logo" src="logo.jpg" />

	</div>

	<div id="menu1">

		<ul class="bandera">

			<li>
				<img src="spa.jpg" onMouseOver="mensaje('esp')" onMouseOut="mensaje('')" onclick="cambiar('es')" />
			</li>

			<li>
				<img src="ale.jpg" onMouseOver="mensaje('ale')" onMouseOut="mensaje('')" onclick="cambiar('al')" />
			</li>

			<li>
				<img src="ing.jpg" onMouseOver="mensaje('ing')" onMouseOut="mensaje('')" onclick="cambiar('in')" />
			</li>

			<li>
				<img src="fra.jpg" onMouseOver="mensaje('fra')" onMouseOut="mensaje('')" onclick="cambiar('fr')" />
			</li>

		</ul>

	</div>

	<div id="menu2">

		<ul class="bandera">

			<li>
				<a id="fla" href="#">
					<img src="fla.jpg" onMouseOver="mensaje('fla')" onMouseOut="mensaje('')" />
				</a>
			</li>

			<li>
				<a id="html" href="#">
					<img src="html.jpg" onMouseOver="mensaje('html')" onMouseOut="mensaje('')" />
				</a>
			</li>

		</ul>

	</div>

	<div id="sombra">
		ACADEMIA <strong>ATLANTIKA</strong>
		<div id="texto">
			ACADEMIA <strong>ATLANTIKA</strong>
		</div>
	</div>

	<div id="mensaje">&nbsp;
	</div>

	<div id="contacto">
		<strong>PHONE</strong>
		<br />
		Spain: +34 956 441 296
		<br />
		Germany: +49 (0)40 477 587
		<br />
		<br />
		<br />
		<strong><a href="http://www.atlantika.net/email.html" onclick=" if (window.open) {window.open('http://www.atlantika.net/email.html', 'terceira', 'status=no,scrollbars=yes,menubar=no,width=800,height=545,top=20,left=0'); return false;}">[email protected]</a></strong>
	</div>

</body>
</html>

Les dejo el código completo de la página, a ver si me pueden ayudar, porque yo me voi a volver loco
muchas gracias