Foros del Web - Ver Mensaje Individual - ¿Por que se me deforman las imagenes en una tablet?

campuscnso · #1 (**permalink**) 10/01/2013, 09:34

Hola a todos... No tengo mucha idea de programación de páginas web... pero he intentado hacer una página para el club donde trabajo... La he colocado en nuestro servidor y en un principio todo funcionaba de maravilla... Pero cual fue mi desagradable sorpresa cuando he intentado ver la página que había realizado en una tablet con SO Android... Las imágenes de deformaban... y no soy capaz de saber porqué... Lo más curioso es que si entro desde mi móvil (con el mismo SO)... soy capaz de verla bien... Os adjunto el código HTML y el código CSS a ver si alguien me puede orientar para solucionar este problema... Gracias... Un saludo

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; chrset=UTF-8" />
<meta name="Keywords" content= "tablas, xhtml" />
<meta name="Description" content="Ejercicios de Página"/>
<meta name="Autor" content="Roberto Hevia"/>
<meta http-equiv="Content-Lenguage" content="es"/>
<title> Ejercicios de diseño Página web</title>
<link rel="stylesheet" type="text/css" title="Color" href="CSS/calendario.css"/>
<link rel="alternate" type="application/rss+xml" title="RSS .92" href=" " />
</head>
<body>

<div id="completa">
<div id="cabecera">

<img src="./IMAGENES/CNSO (banner).jpg" alt="imagen" width="100%" height="100%"/>
</a>
</div>

<div id="menu_derecha">
<img src="./IMAGENES/cnso.jpg" alt="imagen" width="100%" height="100%" />

</div>

<div id="contenido">

<iframe ...........................................></iframe>

</div>

<div id="menu_izquierda">
<img src="./IMAGENES/cnso.jpg" alt="imagen"width="100%" height="100%"/>

</div>

<div id="pie">
<hr/>
C...............
</div>
</div>

</body>
</html>

CSS

body {
background-color: WHITE;
padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em;
}

/***Estilo del Menú derecho***/
/**************************/

div#menu_derecha {
clear:both;
float: left;
width: 15%;
padding-right: 1.5;
padding-left: 1.5;
}

/***Estilo del contenido***/
/**************************/

div#contenido {
background-color: WHITE;
float: left;
width: 65%;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 2.5%;
padding-bottom: 2.5%;
}

/***Estilo del Menú izquierdo***/
/**************************/

div#menu_izquierda {
/*background-color: orange;*/
float: left;
width: 15%;
padding-right: 1.5;
padding-left: 1.5;
}

/***Estilo del pie***/
/**************************/

div#pie {
clear:both;
text-align: center;
font-weight: bolder;
font-size: small;
font-family: "Times New Roman";
color: black;
clear: both;
}

/***Estilo del cabecera***/
/**************************/

div#cabecera{

font-family: Arial,helvetic, sans-serif ;
background-color: WHITE;
padding-right: 1.5;
padding-left: 1.5;
}