Saludos...
Ten en cuenta qe al usar layer (div) cuando la pantalla tiene diferente resolucion se altera todo (si los tienes en posicion absolute)...
Usa el siguiente codigo, espero te ayude... recuerda seguir practicando, leyendo i googleando...
nota: la funcion javascript redimenciona la imagen, el layer y la tabla, cuando la resolucion es menor a 1024x768. si qieres usar el tipo de fuente qe tienes.. deberias de acer una imagen png con fondo transparente i colocarla en ves del titulo.
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function evalpantalla()
{
if(screen.width < 1024)
{
window.document.getElementById('mainImg').width = 400;
window.document.getElementById('mainImg').height = 270;
window.document.getElementById('layerMenu').style.width = '150px';
window.document.getElementById('layerMenu').style.height = '270px';
window.document.getElementById('layerMenu').style.top = '269px';
window.document.getElementById('tablaMenu').style.height = '270px';
}
}
</script>
<style type="text/css">
body {background-image: url(http://img236.imageshack.us/img236/3510/fondo7fv.gif);}
.titulo {
font-family:Monotype Corsiva;
text-decoration:underline;
color:#CC0033;
font-size:44px;
font-weight:bold;
}
.intro {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#006633;
font-size:25px;
font-style:italic;
}
#layerMenu {
position:absolute;
top: 239px;
left: 0px;
height: 409px;
width: 250px;
}
.tabla {
border: 0px;
height: 409px;
}
.menuOptions TD{
font-family:Monotype Corsiva;
color:#CC3300;
font-size:20px;
font-style:italic;
text-align:left;
width: 119px;
height: 31px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onLoad="evalpantalla()" >
<center>
<span class="titulo"> La Cabaña De LLavíada </span>
<p class="intro">La Cabaña De LLavíada<br>
es un sitio web<br>
dedicado al arte, el Hedonismo y la vida en armonía con la naturaleza.</p>
<p> </p>
<img id="mainImg" width="539" height="409" alt="La Cabaña De LLaviada" title="La Cabaña De LLaviada" src="http://img234.imageshack.us/img234/6209/cabaa2eo.gif">
<p> </p>
<img width="140" height="49" alt="En Breve Mas" title="En Breve Mas" src="http://img57.imageshack.us/img57/6866/construccion8bs.gif">
<div id="layerMenu">
<table id="tablaMenu" class="tabla" >
<tr >
<td ><table class="menuOptions" border="1" cellpadding="2"><tr><td>Mis Obras</td></tr></table></td>
<td align="left" ><a rel="nofollow" href="http://mariajesus-fernandezalons0.magix.net/"><img style="border: 0px solid; width: 96px; height: 52px;" alt="Pincha Aqui" title="Pincha Aqui" src="http://img204.imageshack.us/img204/3245/misobrasgif6vk.gif"></a></td>
</tr>
<tr >
<td><table class="menuOptions" border="1" cellpadding="2"><tr><td>Fotografias</td></tr></table></td>
<td align="left"><a rel="nofollow" href="http://mariajesus-fernandezalons1.magix.net/"><img style="border: 0px solid; width: 49px; height: 49px;" alt="Pincha Aqui" title="Pincha Aqui" src="http://img236.imageshack.us/img236/354/fotografiasgif4ai.gif"></a></td>
</tr>
<tr >
<td><table class="menuOptions" border="1" cellpadding="2"><tr><td>La Huerta</td></tr></table></td>
<td align="left"><a rel="nofollow" href="http://mariajesus-fernandezalons2.magix.net/"><img style="border: 0px solid; width: 49px; height: 49px;" alt="Pincha Aqui" title="Pincha Aqui" src="http://img236.imageshack.us/img236/248/huertagif5ec.gif"></a></td>
</tr>
<tr >
<td><table class="menuOptions" border="1" cellpadding="2"><tr><td>El Jardin</td></tr></table></td>
<td align="left"><a rel="nofollow" href="http://mariajesus-fernandezalons3.magix.net/"><img style="border: 0px solid; width: 49px; height: 49px;" alt="Pincha Aqui" title="Pincha Aqui" src="http://img208.imageshack.us/img208/9621/jardingif2db.gif"></a></td>
</tr>
</table>
</div>
</center>
</body>
</html>
pagina personal, revisar pagina
Jan 22 2007, 04:58 PM
