html y resolución de pantalla

dani1843 · 14 Diciembre 2010, 21:59 PM

Bueno, se que hay muchos temas sobre esto, pero no consigo hacer que la pagina se vea igual para todos. Me explico, tengo el fondo de pantalla auto-ajustable a la resolución, pero lo que son las imágenes, el texto etc, no hay manera de que se hagan pequeños. Tengo la pagina distribuida en tablas, estas "creo" que están en %, al menos cuando me dice de crearlas pongo % en vez de px. Creo que es por culpa de las imágenes.

Dejo el código:

Citar<!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=utf-8" />
<title>Clan rebellion</title>
<style type="text/css">
body {
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   background-image:url(Images/Wallpaper%20Final.jpg);
   background-position: center top;
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-color: #fcfcfc;
font-family:Arial;
   font-size:12px;

   }
</style>
</head>

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border:0 #666 1px;">
<tr>
<td width="25%" align="center" valign="top"><p><img src="Images/ts3.png" width="222" height="26" alt="ts3" /></p>
<p><p> </p>
<p> <script type="text/javascript">

</script>
<script type="text/javascript" src="http://www.ts3-serveur.com/web_script/webscript_ts3.js"></script> </p>
<p> </p>
<p><img src="Images/afili.png" width="222" height="26" alt="afiliados" />
<p><a href="elorigendetodo.blogspot.com/"><img src="Images/el fin.png" width="222" height="59" alt="elfian" /></a>
<p><a href="http://elecodelamusica.blogspot.com/"><img src="Images/eco.png" width="222" height="59" alt="eco musica" /></a>

<td width="50%"><p><img src="Images/rebellion.png" width="859" height="116" alt="rebellion" /></p>
<center>
<p><img src="Images/noticias.png" width="857" height="26" alt="noticias" />
<center>
<table width="91%" border="0">
<tr>
<td width="17%"><a href="http://www.clanrebellion.com/foro/index.php?/topic/23-bad-company-2-vietnam-tendra-un-5%C2%BA-mapa-operacion-hastings-desbloqueable/"><img src="Images/Operacion.jpg" width="100" height="89" alt="operacion hasting" /></a></td>
<td width="83%" align="left" valign="top"> <p><strong>Bad Company 2 Vietnam tendrá un 5º mapa "Operación Hastings" desbloqueable! </strong></p>
<p> El mapa, Operación Hastings, se une a los ya anunciados Colina 137, Posición Estratégica, Valle de Phu Bai y Templo de Cao Son. Quizás alguno lo reconozca, ya que Operación Hastings era uno de los mapas más conocidos...</p></td>
</tr>
</table>
<table width="91%" border="0">
<tr>
<td width="17%" height="95"><a href="http://www.clanrebellion.com/foro/index.php?/topic/25-battlefield-bad-compnay-2-vietnam-gameplay/"><img src="Images/Vietnam Gameplay.jpg" width="100" height="89" alt="vietnam gameplay" /></a></td>
<td width="83%" align="left" valign="top"> <p> <strong>Battlefield: Bad Compnay 2 Vietnam Gameplay. </strong></p>
<p>Ya queda muy poco para poder jugar a la expansion de Bad Company 2: Vietnam. Para ir abriendo boca, un nuevo video lleno de acción interpretado por los chicos de DICE...</p></td>
</tr>
</table>
<table width="91%" border="0">
<tr>
<td width="17%" height="95"><a href="http://www.clanrebellion.com/foro/index.php?/topic/32-anadidos-nuevos-videos-gameplay/"><img src="Images/nuevos vietnam.jpg" width="100" height="89" alt="nuevo vietnam" /></a></td>
<td width="83%" align="left" valign="top"> <p><strong>Añadidos nuevos videos gameplay. </strong></p>
<p> 1.<a href="http://www.youtube.com/watch?v=PPSp4Pen1cE" title="External link" rel="nofollow external">Battlefield: Bad Company 2 Vietnam Cao Son Temple Gameplay Movie</a> </p>
<p>Más después del corte.</p></td>
</tr>
</table>
<table width="91%" border="0">
<tr>
<td width="17%" height="91"><a href="http://www.clanrebellion.com/foro/index.php?/topic/13-actualizar-pb/"><img src="Images/Pb.jpg" width="100" height="89" alt="pb" /></a></td>
<td width="83%" align="left" valign="top"><p><strong>Actualizar PunkBuster.</strong></p>
<p>¿Harto de los cortes por culpa de punkbuster? </p>
<p>Actualízate después del salto...</p></td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p><a href="http://contador-de-visitas.com"><img style="border: 0px solid ; display: inline;" alt="contador de visitas"
   src="http://contador-de-visitas.com/hit.php?id=645945&counter=0" /></a></p> </p>
</center>
<div align="center"></div></p></td>
<td width="25%" align="center" valign="top"><p><img src="Images/foro2.png" width="222" height="26" alt="foro" /></p>
<p><a href="http://www.clanrebellion.com/foro/"><img src="Images/enter.png" width="248" height="134" alt="enter" /></a></p>
<p><img src="Images/server.png" width="222" height="26" alt="server" /></p>
<p><p><a href="http://www.clanrebellion.com/foro/"></a><iframe src="http://cache.www.gametracker.com/components/html0/?host=93.93.65.37:19568&bgColor=333333&fontColor=CCCCCC&titleBgColor=222222&titleColor=FF9900&borderColor=555555&linkColor=FFCC00&borderLinkColor=222222&showMap=1&currentPlayersHeight=100&showCurrPlayers=1&topPlayersHeight=100&showTopPlayers=1&showBlogs=0&width=240" frameborder="0" scrolling="no" width="240" height="536"></iframe></p>
<p> </p></td></p> </p>
<p><a href="elorigendetodo.blogspot.com/"></a></p>
<p><a href="http://elecodelamusica.blogspot.com/"></a></p>

</p></td>
</tr>
</table>
</body>
</html>

A ver si me podéis ayudar, muchas gracias.

catriel10 · 16 Diciembre 2010, 03:00 AM

Yo tengo un codigo pero es para que se auto-ajuste solo las imagenes de fondo de pantalla. nose si te sirva:

Código [Seleccionar]

<style type="text/css">
html, body {width:100%; height:100%; padding:0; margin:0; background:#000000;}
body {
font-family:verdana, arial, sans-serif; font-size:12px;
background-image: url(back.png);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
content {padding:5px 300px 20px 200px;}
p {line-height:22px; text-align:justify;}
fixed {position:absolute; top:0px; left:0px; width:160px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>

dani1843 · 16 Diciembre 2010, 23:36 PM

muchas gracias, pero no XD, el caso es que tengo la tabla puesta en % pero por culpa de las imágenes que están dentro no se reduce, no sabréis como hacer que las imágenes se reduzcan con la tabla ?

4rkn63l · 30 Diciembre 2010, 02:35 AM

una recomendacion...mejor utiliza divs junto con CSS en vez de tablas, te resultara mucho mas facil el diseño y podras examinar bien donde necesitas realizar ajustes.

Test Foro de elhacker.net SMF 2.1

html y resolución de pantalla

dani1843

catriel10

dani1843

4rkn63l