Entrar

que la tabla ocupe el 100% no es tan facil! help?

Marttyn · · Solicitar retirada
hola amigos, estoy en la fase final de la plantilla de mi web. llevo mas de una semana buscando la forma y el diseño perfectos y a mi gusto casi los he encontrado, excepto por que no logro que una imagen ocupe el 100% de una celda. normalmente resulta muy facil, solo pones que la imagen ocupe el 100% del ancho y y esta... PERO NOOO
la mayoria de estas cosas ocurren al maximizar la ventana (usando resolucion de 1024*760 en mi caso)
la pagina es http://marttyn.iespana.es/Plantilla.htm
*vereis si abris mi pagina con IE, la vereis correctamente excepto que el logo central de arriba NO queda centrado, aunque este puesto para ello
*si abris con firefox pues, el logo tampoco queda centrado y demas la barra gris de debajo de la barra naranja no se estira, sino que se estiran las celdas de su izquiera, que no deberian estirarse
*si abro con netscape, pues lo mismo que con firefox
*y si lo abro con el opera ya es desastroso, porque aunque el logo de arriba se ve centrado, el boton de CONTACTO se va a tomar por cul* y se estiran a medias las barras que estan al 100% de width y tambien se estiran las que tienen pixeles fijos... :evil:

creedme, esto de la compaibilidad de navegadores me parece desesperante!
si alguien tiene alguna solucion se lo agradeceria muchisimo, ya que me parece muy importante que cualquier persona con cualquier navegador pueda ver bien mi pagina
salu2
JorGens · · Solicitar retirada
Saludos Marttyn.

Bueno, como buen mago que eres me has puesto dificil revisar el código HTML de tu web. Lo máximo que he alcanzado ver en un texto de "Mago Marttyn... Hola". A ver si nos explicas en un mensaje aparte cómo se logra esconder tan bien el código HTML de las webs, y si puede ser, como lograr verlo, más que nada para poder ayudarte.

Esto de la compatibilidad es todo un mundo. Poco a poco irás dándote cuenta de que etiquetas valen para todos y cuales son "especiales" según el navegador que se use para ver la web. Es un calentamiento de cabeza total que se complica aún más cuanto más complicamos nuestras páginas.

A mi gusto, la forma más sencilla de conseguir la misma visualización en casi todos los navegadores es usando tablas y sin colocar atributos como ancho, margenes etc en el propio HTML sino en la hoja de estilos. Usando DIVs o capas es algo más complicado, pero poco a poco se va consiguiendo. No es fácil, es más, es DESESPERANTE!, lo se.

Dejanos ver tu código y te comento cosas, oki?

Un saludo amigo! y buenos trucos! :wink:
Marttyn · · Solicitar retirada
queno puedes ver el codigo fuente? que raro :? pues yo tanto con firefox como con IE logro verlo perfectamente... pero bueno, no es algo que haya hecho a proposito... tal vez sea por haber hecho la pagina con photoshop ¿?
el codigo de la pagina es este:
<html>
<head>
<title>Mago Marttyn</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		pedir_dvd_over = newImage("Images/pedir_dvd-over.gif");
		pedir_dvd_down = newImage("Images/pedir_dvd-down.gif");
		contacto_over = newImage("Images/contacto-over.gif");
		contacto_down = newImage("Images/contacto-down.gif");
		inicio_over = newImage("Images/inicio-over.gif");
		inicio_down = newImage("Images/inicio-down.gif");
		sobre_mi_over = newImage("Images/sobre_mi-over.gif");
		sobre_mi_down = newImage("Images/sobre_mi-down.gif");
		espectaculo_over = newImage("Images/espectaculo-over.gif");
		espectaculo_down = newImage("Images/espectaculo-down.gif");
		posibilidades_over = newImage("Images/posibilidades-over.gif");
		posibilidades_down = newImage("Images/posibilidades-down.gif");
		fotos_over = newImage("Images/fotos-over.gif");
		fotos_down = newImage("Images/fotos-down.gif");
		videos_over = newImage("Images/videos-over.gif");
		videos_down = newImage("Images/videos-down.gif");
		magia_interactiva_over = newImage("Images/magia_interactiva-over.gif");
		magia_interactiva_down = newImage("Images/magia_interactiva-down.gif");
		aprende_magia_over = newImage("Images/aprende_magia-over.gif");
		aprende_magia_down = newImage("Images/aprende_magia-down.gif");
		preloadFlag = true;
	}
}

// -->
</script>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">

<table id="Tabla" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" rowspan="2">
			[img]Images/logo_sup.gif[/img]</td>
		<td width="100%" colspan="2">
			[img]Images/banner_izq.gif[/img]</td>
		<td colspan="3">
			[img]Images/logo_banner.gif[/img]</td>
		<td width="100%" colspan="3">
			[img]Images/banner_der.gif[/img]</td>
		<td>
			[img]Images/Plantilla2_05.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
	</tr>
	<tr>
		<td width="100%" colspan="3">
			[img]Images/barra_horizontal.gif[/img]</td>
		<td>
			[img]Images/barra_der.gif[/img]</td>
		<td colspan="2">
			<a href="#"
				onmouseover="changeImages('pedir_dvd', 'Images/pedir_dvd-over.gif'); return true;"
				onmouseout="changeImages('pedir_dvd', 'Images/pedir_dvd.gif'); return true;"
				onmousedown="changeImages('pedir_dvd', 'Images/pedir_dvd-down.gif'); return true;"
				onmouseup="changeImages('pedir_dvd', 'Images/pedir_dvd-over.gif'); return true;">
				[img]Images/pedir_dvd.gif[/img]</a></td>
		<td colspan="3">
			<a href="#"
				onmouseover="changeImages('contacto', 'Images/contacto-over.gif'); return true;"
				onmouseout="changeImages('contacto', 'Images/contacto.gif'); return true;"
				onmousedown="changeImages('contacto', 'Images/contacto-down.gif'); return true;"
				onmouseup="changeImages('contacto', 'Images/contacto-over.gif'); return true;">
				[img]Images/contacto.gif[/img]</a></td>
		<td>
			[img]Images/espacio.gif[/img]</td>
	</tr>
	<tr>
		<td rowspan="3">
			<table id="menu" width="182" height="324" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td>
						[img]Images/logo_inf.gif[/img]</td>
				</tr>
				<tr>
					<td>
						<a href="#"
							onmouseover="changeImages('inicio', 'Images/inicio-over.gif'); return true;"
							onmouseout="changeImages('inicio', 'Images/inicio.gif'); return true;"
							onmousedown="changeImages('inicio', 'Images/inicio-down.gif'); return true;"
							onmouseup="changeImages('inicio', 'Images/inicio-over.gif'); return true;">
							[img]Images/inicio.gif[/img]</a></td>
				</tr>
				<tr>
					<td>
						<a href="#"
							onmouseover="changeImages('sobre_mi', 'Images/sobre_mi-over.gif'); return true;"
							onmouseout="changeImages('sobre_mi', 'Images/sobre_mi.gif'); return true;"
							onmousedown="changeImages('sobre_mi', 'Images/sobre_mi-down.gif'); return true;"
							onmouseup="changeImages('sobre_mi', 'Images/sobre_mi-over.gif'); return true;">
							[img]Images/sobre_mi.gif[/img]</a></td>
				</tr>
				<tr>
					<td>
						<a href="#"
							onmouseover="changeImages('espectaculo', 'Images/espectaculo-over.gif'); return true;"
							onmouseout="changeImages('espectaculo', 'Images/espectaculo.gif'); return true;"
							onmousedown="changeImages('espectaculo', 'Images/espectaculo-down.gif'); return true;"
							onmouseup="changeImages('espectaculo', 'Images/espectaculo-over.gif'); return true;">
							[img]Images/espectaculo.gif[/img]</a></td>
				</tr>
				<tr>
					<td>
						<a href="#"
							onmouseover="changeImages('posibilidades', 'Images/posibilidades-over.gif'); return true;"
							onmouseout="changeImages('posibilidades', 'Images/posibilidades.gif'); return true;"
							onmousedown="changeImages('posibilidades', 'Images/posibilidades-down.gif'); return true;"
							onmouseup="changeImages('posibilidades', 'Images/posibilidades-over.gif'); return true;">
							[img]Images/posibilidades.gif[/img]</a></td>
				</tr>
				<tr>
					<td>
						<a href="#"
							onmouseover="changeImages('fotos', 'Images/fotos-over.gif'); return true;"
							onmouseout="changeImages('fotos', 'Images/fotos.gif'); return true;"
							onmousedown="changeImages('fotos', 'Images/fotos-down.gif'); return true;"
							onmouseup="changeImages('fotos', 'Images/fotos-over.gif'); return true;">
							[img]Images/fotos.gif[/img]</a></td>
				</tr>
				<tr>
					<td>
						<a href="#"
							onmouseover="changeImages('videos', 'Images/videos-over.gif'); return true;"
							onmouseout="changeImages('videos', 'Images/videos.gif'); return true;"
							onmousedown="changeImages('videos', 'Images/videos-down.gif'); return true;"
							onmouseup="changeImages('videos', 'Images/videos-over.gif'); return true;">
							[img]Images/videos.gif[/img]</a></td>
				</tr>
				<tr>
					<td>
						<a href="#"
							onmouseover="changeImages('magia_interactiva', 'Images/magia_interactiva-over.gif'); return true;"
							onmouseout="changeImages('magia_interactiva', 'Images/magia_interactiva.gif'); return true;"
							onmousedown="changeImages('magia_interactiva', 'Images/magia_interactiva-down.gif'); return true;"
							onmouseup="changeImages('magia_interactiva', 'Images/magia_interactiva-over.gif'); return true;">
							[img]Images/magia_interactiva.gif[/img]</a></td>
				</tr>
				<tr>
					<td>
						<a href="#"
							onmouseover="changeImages('aprende_magia', 'Images/aprende_magia-over.gif'); return true;"
							onmouseout="changeImages('aprende_magia', 'Images/aprende_magia.gif'); return true;"
							onmousedown="changeImages('aprende_magia', 'Images/aprende_magia-down.gif'); return true;"
							onmouseup="changeImages('aprende_magia', 'Images/aprende_magia-over.gif'); return true;">
							[img]Images/aprende_magia.gif[/img]</a></td>
				</tr>
			</table></td>
		<td width="25" colspan="2">
			[img]Images/titular_izq.gif[/img]</td>
		<td width="100%" colspan="6">
			[img]Images/titular.gif[/img]</td>
		<td colspan="2">
			[img]Images/titular_der.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
	</tr>
	<tr>
		<td width="100%" height="20" colspan="10"></td>
		<td>
			[img]Images/espacio.gif[/img]</td>
	</tr>
	<tr>
		<td height="100%" width="25" colspan="2" rowspan="2"></td>
		<td width="100%" height="100%" colspan="6" rowspan="2">hola</td>
		<td height="100%" width="25" colspan="2" rowspan="2"></td>
		<td>
			[img]Images/espacio.gif[/img]</td>
	</tr>
	<tr>
		<td height="100%">
			[img]Images/menu_inf.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
	</tr>
	<tr>
		<td width="207" colspan="3">
			[img]Images/barra_inf_izq.gif[/img]</td>
		<td width="100%" colspan="6">
			[img]Images/barra_inf_centro.gif[/img]</td>
		<td colspan="2">
			[img]Images/barra_inf_der.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td>
			[img]Images/espacio.gif[/img]</td>
		<td></td>
	</tr>
</table>

</body>
</html>
si consigues explicarme como hacer con las capas o divs te lo agradeceria... de verdad no creo que pueda darme el lujo de dar una mala o descuidada imagen a mis clientes. gracias!
ps: comento que hay funciones como la de preload image y otras cosas que hay en este codigo que no me puse a analizar lo que son... simplemente photoshop genera la pagina asi... por lo que aunque la pagina parezca hecha por un experto, no lo soy :oops: incluso hay una imagen que se llama espacio.gif, que aparece por todos lados, pero no tengo idea de porque, y si la quito del codigo la tabla se desmorona. :evil:
Marttyn · · Solicitar retirada
jorgens, ya lo logre!!! todavia no esta terminada la plantilla, pero al menos consegui lo que buscaba... la solucion en este caso fue anidar tablas para que lo que debia mantenerse junto suiguiera asi. pronto pondre la direccion de mi web para que podais criticarla. un saludo y gracias por preocuparte por el tema