Foros del Web » Creando para Internet » HTML »

Problema de resoluciones

 Estas en el tema de Problema de resoluciones en el foro de HTML en Foros del Web. Buenas tardes, tengo un par de problemas, no tantos pero en fin: Tengo una web que se adapta perfectamente a tamaños de pantalla tipo notebook ...
  #1 (permalink)  
Antiguo 13/04/2013, 13:13
Avatar de joaquinrot  
Fecha de Ingreso: diciembre-2012
Ubicación: Córdoba
Mensajes: 11
Antigüedad: 11 años, 11 meses
Puntos: 0
Pregunta Problema de resoluciones
Buenas tardes, tengo un par de problemas, no tantos pero en fin:
Tengo una web que se adapta perfectamente a tamaños de pantalla tipo notebook o monitor de pc, el problema surge cuando lo tengo que ver desde la pantalla de un telefono, el problema es que al hacer pinch to zoom sobre la pagina esta se me distorsiona tremendamente, lo raro es que los contenedores son de tamaño dinamico, asi que no se lo que puede estar ocurriendo, quizas algo estoy haciendo mal, les agradezco cualquier ayuda para maquetar de manera correcta y que sea compatible con resoluciones de pantalla de smartphones.

Aqui les dejo el codigo css:

Código: 
html, div, map, dt, isindex, form, header, aside, section, section, article, footer {  
    display: block;  
} 

html{
overflow-y: auto; 
background-color: transparent; 
overflow-x: hidden;
}

body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
background: #F8F8F8;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
overflow-x: hidden;
}

a:link, a:visited {
color: #77BACE;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
/*--------------menu ---------------*/
#encabezado .cssmenu { 
position: inherit;
top: 10px;
right: -2%;
width: 45em;
height: 120px;
line-height:139px;
}

#encabezado .cssmenu ul{ 
  margin: auto 30px auto auto;
}

#encabezado .cssmenu li{
  margin: auto 3px auto auto;
  float: left;
  list-style: none;
}

#encabezado .cssmenu a{
  font-size: 20px;
  font-weight: bold;
  color: #F8F8F8;
  text-decoration: none;
  padding: 40px 20px 40px 20px;
}

#encabezado .cssmenu a:hover{
  color: #F8F8F8;
  border: 1px solid #000;
  -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 40px 20px 40px 20px;
}

#encabezado .cssmenu a.active{
  color: #F8F8F8;
  border: 1px solid #000;
  -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 40px 20px 40px 20px;
}

/*---------------------------------------*/

#divsuperior {
height: 100%;
width: 100%;
z-index: 1;
background: #F8F8F8;
margin: auto auto auto auto;
}

#divinferior{
float: left;
position: fixed;
top: 0px;
height: 100%;
width: 33em;
background: #444444;
margin-left: -33em;
z-index: 2;
}

#expulsor{
position: absolute;
top: 50%; 
height: 9em;
width: 9em;
background: #444444;
margin: auto auto auto 27em;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}

#imagenEx{
  position: relative;
  margin: 44% 15% auto auto;
  background: url(../imagenes/flecha.png) no-repeat;
  height: 15%;
  width: 15%;
}

#expulsor .imagenExInv{
  margin: 44% 15% auto auto;
  background: url(../imagenes/flechaInversa.png) no-repeat;
  height: 15%;
  width: 15%;
}

/* encabezado */

header#encabezado {
position: fixed;
top: 0px;
left: 40%;
height: 150px;
width: 75%;
background: #5f5f5f;
background: rgb(66,65,63); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyNDEzZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNjE2MTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(66,65,63,1) 0%, rgba(22,22,22,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,65,63,1)), color-stop(100%,rgba(22,22,22,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42413f', endColorstr='#161616',GradientType=0 ); /* IE6-8 */
z-index: 4;
}

header#encabezado .logo {
position: absolute;
top: 15px;
left: -52%;
width: 40%;
height: 80%;
z-index: 5;
}

header#encabezado .logo img{
position: absolute;
max-height: 100%; 
max-width: 145%;
min-height: 100%; 
min-width: 100%;
line-height:0px;
font-weight: 700;
text-align: left;
color: #fff;
text-shadow: 0 -1px 0 #000;
z-index: 5;
}

#fondo {
position: fixed;
top: 0px;
left: -50%;
height: 150px;
width: 300%;
background: #5f5f5f;
-ms-box-shadow:0px 3px 4px 2px #333;
-o-box-shadow:0px 3px 4px 2px #333;
-moz-box-shadow:0px 3px 4px 2px #333;
-webkit-box-shadow:0px 3px 4px 2px #333;
box-shadow:0px 3px 4px 2px #333;
background: rgb(66,65,63); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyNDEzZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNjE2MTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(66,65,63,1) 0%, rgba(22,22,22,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,65,63,1)), color-stop(100%,rgba(22,22,22,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(66,65,63,1) 0%,rgba(22,22,22,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42413f', endColorstr='#161616',GradientType=0 ); /* IE6-8 */
z-index: 0;
}
y el html:

Código: 
<!doctype html>
<html lang="es">

<head>
  <meta charset="utf-8"/>
  <title></title>
  <link rel="stylesheet" href="css/principal.css" type="text/css" media="screen" />
</head>
<body>
<header id="encabezado">
      <div class="logo"><img src="imagenes/logo.png"></img><a href="index.html">&nbsp;</a></div>
      <div id="fondo">&nbsp;</div>
      <div class="cssmenu">
        <lu>
          <li><a class="active" href="index.php">&nbsp;&nbsp;Inicio&nbsp;&nbsp;</a></li>
          <li><a href="galeria.php">&nbsp;Galeria&nbsp;</a></li>
          <li><a href="nosotros.php">Nosotros</a></li>
          <li><a href="contacto.php">Contacto</a></li>
        </lu>
      </div>
  </header>
  <div id="divsuperior">
  <div id="principal">
  </div>
<div id="noticias">
</div>
</div>
</div>
<div id="pie">
  </div>
</body>
</html>
Muchas Gracias!!
  #2 (permalink)  
Antiguo 13/04/2013, 13:25
Avatar de joaquinrot  
Fecha de Ingreso: diciembre-2012
Ubicación: Córdoba
Mensajes: 11
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: Problema de resoluciones
Bueno, primer error que detecte, uso posiciones absolutas, tremendo error de novato, aclaro, lo soy...
El problema ahora es que el logo y el menu css se me enciman cuando hago el zoom en el telefono, como puedo hacer para que se choquen y no se encimen? Desde ya muchas Gracias!
  #3 (permalink)  
Antiguo 30/04/2013, 04:34
Avatar de wataru77  
Fecha de Ingreso: febrero-2007
Mensajes: 20
Antigüedad: 17 años, 9 meses
Puntos: 1
Respuesta: Problema de resoluciones
Hola joaquinrot,

Yo tampoco soy un experto, ni mucho menos.
He visto que no usas en el CSS "media queries" que es la mejor maneras para que una web se adapte a los dispositivos que uno quiera.

http://www.w3.org/TR/css3-mediaqueries/

Digamos que seria "responsive design".

Después de todo tu codigo css o si quieres hacer un archivo unico para "responsive design" escribes las media queries.

tipo:

-------- Media Queries--------

@media (max-width: 640px "o los px que tu quieras"){

"aqui el css que quieres cambiar para que se muestre de tal manera a partir del la resolución indicada"
}

Puedes hacer varias media, para diferentes tamaños de pantalla.

Espero haber ayudado en algo.

Etiquetas: css, link, php, resoluciones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:13.