elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Security Series.XSS. [Cross Site Scripting]


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.  (Leído 3,444 veces)
Son_of_Bush

Desconectado Desconectado

Mensajes: 31


Ver Perfil
[Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.
« en: 2 Abril 2015, 15:38 pm »
A ver como me explico..

Estoy usando un smart phone (android) como herramienta para construir una web. Llevo dias tratando de identificar que es lo que causa el siguiente comportamiento...


Con Dolphin (browser) parece no haber problema, pero cuando uso Chrome el (footer.php) no me aparece, no se ve en portrait mode. En landscape no hay problema, si aparece y si lo puedo ver.


El problema ocurre cuando hago un query para mostrar informacion en una <tabla> usando "echo". Si eliminos la informacion en la base de datos.el footer vuelve aparecer.

No se si tenga relacion, pero ademas de eso con el Dolphin a veces la pagina como que hace zoom y otras veces no.
« Última modificación: 3 Abril 2015, 08:32 am por #!drvy » En línea
3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: Problema con Chrome (movil). El footer no se ve en portrait mode.
« Respuesta #1 en: 2 Abril 2015, 16:22 pm »
Un poco complicado ayudarte sin el código. He de suponer que tu footer.php hace referencia a un archivo que contiene únicamente las etiquetas <footer></footer> y su contenido, posterior a esto utilizas un include para unirlo al resto de la pagina.

Es esto cierto? podrías mandarnos el código del footer? intentaste remplazar el footer por un div (por si no hay compatibilidad con el browser?)

(me interesa el HTML5 generado y el CSS)
En línea
Son_of_Bush

Desconectado Desconectado

Mensajes: 31


Ver Perfil
Re: Problema con Chrome (movil). El footer no se ve en portrait mode.
« Respuesta #2 en: 2 Abril 2015, 22:03 pm »
Si, uso un include para llamar el footer.php. Lo unico que he utilizado del HTML5 en todo el website es el !doctype y el header. El footer.php lo hice usando <div>. Pero despues de leer tu comentario experimente eliminando todo todo todo lo referente al HTML5 y el resultado fue el mismo. Tambien intente usando el tag de HTML5 <footer>, pero igual, el mismo resultado.

Me puse a experimentar tambien con el CSS y removiendo las propiedades del "botom" y/o "position" encontre que el footer.php reaparece, pero obviamente no con el efecto que quiero producir. . (Si no llega a ser por tu comentario, no se me ocurre mirar hacia el CSS.)

Ahora, este problema, solo lo tengo con Chrome (movil) y Safari (movil), creo que Safari usa el mismo motor... Acabo de probar como se ve en desktop (Chrome, Firefox, Internet Explorer) y no ocurre ningun problema.

Aqui te dejo el codigo y la url donde practico.

http://playground.x10host.com/register-view-users.php

Cdigo del footer.php :
Código
  1. <div id="footer">
  2. <p>Created by J.C.</p>
  3. </div>
  4.  

HTML generado :

Código
  1. <!doctype html>
  2. <html lang=en>
  3.  
  5.  
  6. <title>View Registered Clients</title>
  7.  
  8. <meta charset=utf-8>
  9. <meta name="viewport" content="width=device-width">
  10.  
  11.  
  12. <link rel="stylesheet" type="text/css" href="styles.css">
  13.  
  14.  
  15. </head>
  16.  
  17.  
  19. <div id="container">
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31. <script src="jquery.js"></script>
  32. <script src="jquery-ui.js"></script>
  33. <script src="jc.js"></script>
  34.  
  35.  
  36. <header>
  37.  
  38.  
  39.  
  40.  
  41. <h1>Dashboard</h1>
  42.  
  43.  
  44. <div id="inavigation">
  45.  
  46. <ul class = "inul">
  47. <li class = "libut"><a href= "logout.php">Logout</a></li>
  48. <li class = "libut"><a href= "login.php">Login</a></li>
  49. </ul>
  50. </div> 
  51.  
  52.  
  53.  
  54. </header>
  55.  
  56.  
  57. <div id="nav">
  58.  
  59.  
  60.  
  61. <ul>
  62.  
  63. <li>
  64. <a href="index.php" title="Return to Home Page">Home</a>
  65. </li>
  66.  
  67. <li>
  68. <a href= "phpmyadmin" target="_blank"> phpMyAdmin</a>
  69. </li>
  70.  
  71. <li>
  72. <a href= "register-view-users.php">Registered&#38;#160;Clients</a>
  73. </li>
  74.  
  75. <li>
  76. <a href= "register-password.php">Change&#38;#160;Password</a>
  77. </li>
  78.  
  79.  
  80.  
  81. <li>
  82. <a href= "admin-page.php">Dashboard</a>
  83. </li>
  84.  
  85. <li>
  86. <a href="jobs_log.php"> Job&#38;#160;Log</a>
  87. </li>
  88.  
  89.  
  90. <li>
  91. <a href="register-thanks.php">Register&#38;#160;Thanks</a>
  92. </li>
  93.  
  94.  
  95. <li id="fli">
  96. <a href= "phpinfo.php">PhpInfo</a>
  97. </li>
  98. </ul>
  99. </div>
  100.  
  101.  
  102.  
  103.  
  104. <div id="content">
  105.  
  106.  
  107. <h2 class="log-in">Registered Clients</h2>
  108.  
  109. <p>
  110. <div><table id="t_register_clients">
  111. <tr><td class="borders1"><b>Edit</b></td>
  112. <td class="borders1"><b>Delete</b></td>
  113. <td class="borders1"><b>Last Name</b></td>
  114. <td class="borders1"><b>First Name</b></td>
  115. <td class="borders1"><b>Email</b></td>
  116. <td class="borders1"><b>Date Registered</b></td>
  117. </tr><tr>
  118. 	<td class="borders1"><a href="edit_record.php?id=25">Edit</a></td>
  119. 	<td class="borders1"><a href="delete_record.php?id=25">Delete</a></td>
  120. 	<td class="borders1">pass</td>
  121. 	<td class="borders1">admin</td>
  122. 	<td class="borders1">email1@email.com</td>
  123. 	<td class="borders1">April 01, 2015</td>
  124. 	</tr><tr>
  125. 	<td class="borders1"><a href="edit_record.php?id=26">Edit</a></td>
  126. 	<td class="borders1"><a href="delete_record.php?id=26">Delete</a></td>
  127. 	<td class="borders1">woejmfiowe</td>
  128. 	<td class="borders1">oijweiof</td>
  129. 	<td class="borders1">iwuefnhui@iuhfedi.com</td>
  130. 	<td class="borders1">April 02, 2015</td>
  131. 	</tr><tr>
  132. 	<td class="borders1"><a href="edit_record.php?id=27">Edit</a></td>
  133. 	<td class="borders1"><a href="delete_record.php?id=27">Delete</a></td>
  134. 	<td class="borders1">w4t345t34t</td>
  135. 	<td class="borders1">wetfwf</td>
  136. 	<td class="borders1">jnheiwu@uiwefhi.com</td>
  137. 	<td class="borders1">April 02, 2015</td>
  138. 	</tr><tr>
  139. 	<td class="borders1"><a href="edit_record.php?id=28">Edit</a></td>
  140. 	<td class="borders1"><a href="delete_record.php?id=28">Delete</a></td>
  141. 	<td class="borders1">43t3t</td>
  142. 	<td class="borders1">ertko3p4</td>
  143. 	<td class="borders1">45y@wepokf.com</td>
  144. 	<td class="borders1">April 02, 2015</td>
  145. 	</tr></table></div><p>Total membership: 5</p><p><a href="register-view-users.php?s=4&p=2">Next</a> </p>
  146.  
  147. </div>
  148.  
  149. </div>
  150. <div>
  151.  
  152. </div>
  153.  
  154. <div id="footer">
  155. <p>Created by J.C.</p>
  156. </div>
  157.  
  158.  
  159. </body>
  160.  
  161. </html>


Codigo CSS (la referencia para el footer lo puse al final):
Código
  1. body {
  2. margin: 0 ;
  3. padding: 0 ;
  4. font-size: 14px ;
  5. line-height: 18px ;
  6.  
  7. }
  8.  
  9. header {
  10. background: rgb(193,0,0);
  11. padding: 10px ;
  12. text-align: center;
  13. border-width: 0px 0px 1px 0px;
  14. border-style: solid;
  15. position:fixed;
  16. top:0px;
  17. width:100%;
  18. }
  19.  
  20.  
  21.  
  22. h1 {
  23. color: #fff ;
  24. margin-top: 2px;
  25. }
  26.  
  27. /*  h2 view registered users */
  28. .log-in {
  29. margin-top: 150px;
  30.  
  31. padding-top: 2px;
  32. }
  33.  
  34.  
  35. i {
  36. color: black;
  37. }
  38.  
  39.  
  40. .inul {
  41.  list-style-type: none;
  42.     padding: 0px ;
  43.     margin: 0px ;
  44.     }
  45.  
  46. inavigation {
  47. text-align: center ;
  48. height: 25px ;
  49. }
  50.  
  51. .libut {
  52. display: inline ;
  53. border-width: 1px ;
  54. border-style: solid ;
  55. margin: 100px auto ;
  56. background: #fff;
  57. padding: 5px 10px ;
  58. }
  59.  
  60.  
  61.  
  62.  
  63.  
  64. .label {
  65.  
  66. margin: 10px 28px;
  67.  
  68. }
  69.  
  70.  
  71. .label1 {
  72.  
  73. margin: 10px auto;
  74. font-size: 24px;
  75.  
  76. }
  77.  
  78.  
  79.  
  80. input {
  81. display: block ;
  82. margin: 0 auto ;
  83.  
  84. }
  85.  
  86. #clo {
  87.  
  88.  
  89. }
  90.  
  91.  
  92.  
  93.  
  94. body {
  95.  
  96. background-color: white;
  97.    text-align:  center;
  98.   }
  99.  
  100.  
  101.   a {color:red;
  102.   text-decoration: none;
  103.  
  104.  
  105.  
  106.  
  107.  
  108.   }
  109.  p    {color: rgb(224,0,0);}
  110.  
  111.   fieldset{
  112.   border: 1px solid ;
  113.   max-width: 280px;
  114.   min-width: 150px;
  115.   margin:auto;
  116. }
  117.  
  118.  
  119.  
  120. #flds  {
  121.   border: 1px solid ;
  122.   max-width: 320px;
  123.   min-width: 150px;
  124.   margin:auto;
  125.   margin-top: -100px;
  126. }
  127.  
  128.  
  129.  
  130.  form {
  131. text-align: left;
  132. }
  133.  
  134.   input {
  135. display: block ;
  136. margin: 0 auto ;
  137.  
  138. }
  139.  
  140. .button1 {
  141. width: 135px;
  142.  
  143. border: 1px;
  144. border-style: solid;
  145. border-radius: 120px;
  146. background-color: rgb(205,0,0);
  147. margin: 20px auto;
  148. padding-top: 60px;
  149. padding-bottom:60px;
  150. color: white;
  151.  
  152. }
  153.  
  154. .button1:active {
  155. background: white;
  156. color: red;
  157. }
  158.  
  159.  
  160. button:hover {
  161. color: red;
  162. }
  163.  
  164.  
  165. .button2 {
  166. width: 135px;
  167.  
  168. border: 1px;
  169. border-style: solid;
  170. border-radius: 120px;
  171. background: white;
  172. margin: 50px auto;
  173. padding-top: 60px;
  174. padding-bottom:60px;
  175. color: red;
  176.  
  177. }
  178.  
  179. .button2:active {
  180. background: red;
  181. color: white;
  182. }
  183.  
  184.  
  185.  
  186.  
  187.  
  188. #inavigation2 {
  189. margin: 170px auto 0px auto;
  190. font-size: 24px;
  191. font-size: 2em;
  192.  
  193. width:135px;
  194. padding-bottom:0px;
  195. padding-top:0px;
  196. border-radius: 120px;
  197.  
  198. background-color: white;
  199.  
  200. }
  201.  
  202.  
  203.  
  204.  
  205.  
  206.  
  207.  
  208.  
  209.  
  210.  
  211. #content {
  212. margin-top:130px;
  213. margin-bottom: 60px;
  214.  
  215.  
  216. }
  217.  
  218.  
  219.  
  220. #login {
  221. margin-top: 60px;
  222. }
  223.  
  224. #fhidden {
  225. display: none;
  226. margin-bottom:0px;
  227.  
  228. }
  229.  
  230. .fhidden input {
  231.  
  232. font-size: 18px;
  233. }
  234.  
  235.  
  236.  
  237. .navbut input {
  238.  
  239. display: inline;
  240. padding: 22px;
  241. margin: auto auto;
  242. margin-left: 6px;
  243.  
  244. }
  245.  
  246. .navbut {
  247. margin: 0 auto;
  248. }
  249.  
  250.  
  251.  
  252.  
  253.  
  254.  
  255. .borders1 {
  256. border: solid 1px black;
  257. margin-right: auto;
  258. margin-left: auto;
  259.  
  260. }
  261.  
  262.  
  263.  
  264.  
  265. /* ------- */
  266.  
  267.  
  268.  
  269.  
  270. #nav li {
  271.  
  272. display: inline ;
  273. border-width: 0px 1px 0 0;
  274. border-style: solid ;
  275. background: #fff;
  276. padding: 0px 5px;
  277. }
  278.  
  279.  
  280.  
  281.  
  282.  
  283.  
  284.  
  285.  
  286.  
  287.  
  288.  
  289. #nav #fli {
  290. border-width: 0px;
  291. border-style: solid ;
  292. }
  293.  
  294.  
  295.  
  296.  
  297.  
  298. #nav ul{
  299.  
  300.  list-style-type: none;
  301.     padding: 0px 5px ;
  302.     margin: 0px ;
  303.  
  304. }
  305.  
  306.  
  307.  
  308.  
  309.  
  310. #nav {
  311. top:78px;
  312. position:fixed;
  313. background: #fff;
  314.  
  315. width:100%;
  316. padding: 2px;
  317. border-width: 0px;
  318. border-bottom-width: 1px;
  319. border-style:solid;
  320. margin: auto auto;
  321.  
  322. }
  323.  
  324.  
  325.  
  326.  
  327. #t_register_clients {
  328. margin: auto;
  329. margin-left: auto;
  330. margin-right: auto;
  331.  
  332.  
  333. }
  334.  
  335.  
  336.  
  337.  
  338.  
  339.  
  340.  
  341. #footer {
  342.  
  343. background: black;
  344. margin: 0px auto 0px auto;
  345. position: fixed;
  346. bottom:0px;
  347. height: 30px;
  348. width:100%;
  349. }
En línea
karmany
Colaborador
***
Desconectado Desconectado

Mensajes: 1.614


Sueñas que sueñas


Ver Perfil WWW
Re: Problema con Chrome (movil). El footer no se ve en portrait mode.
« Respuesta #3 en: 2 Abril 2015, 23:16 pm »
Mi suposición: Creo que tu problema de no verse en portrait es porque aparecen la barra de desplazamiento horizontal y oculta tu párrafo <p>.

Tu párrafo es alineado dentro del <div> abajo y es donde aparece la barra de desplazamiento. La idea que te voy a dar es alinear el <p> arriba del <div>.

Así que prueba esto a ver, añade esto a tu archivo css:

Código
  1. #footer p {margin:0;text-align:center;}
En línea
Son_of_Bush

Desconectado Desconectado

Mensajes: 31


Ver Perfil
Re: Problema con Chrome (movil). El footer no se ve en portrait mode.
« Respuesta #4 en: 3 Abril 2015, 06:53 am »
Gracias Nac-ho por tu ayuda. Me puso en la direccion correcta.

karmany,  aunque no entiendo o comprendo 100% lo que me explicas, pienso que tu suposicion es correcta. Despues de leer lo que dices,  coloque todo lo referente al <table> en nuevo <div> y use la propiedad de "overflow: scroll". Voila! No mas problema, y tambien me soluciono el problemita de que a veces la pagina hacia zoom y otras veces no.

Ahora, me gustaria comprender lo que dices.
Citar
Tu párrafo es alineado dentro del <div> abajo y es donde aparece la barra de desplazamiento. La idea que te voy a dar es alinear el <p> arriba del <div>.

Podrias intentar explicarmelo de nuevo o indicarme donde puedo leer mas sobre este efecto? Me gustaria entender el por que ocurre esto. Mil gracias!
En línea
3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: [Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.
« Respuesta #5 en: 3 Abril 2015, 13:05 pm »
Lo lamento escribí mi respuesta apenas vi tu pregunta y luego me fui. Que bien que encontraras el error tu solo.
(creo que tu problema era el siguiente:)

Código
  1. <h2 class="log-in">Registered Clients</h2>
  2. <p> <!-- ese p no veo en que momento lo cierras -->

Nose si sea eso, pero es lo que veo a simple vista.





Vi que no reutilizaste esas clases que le pusiste a cada li, ul y al div mismo... es por esto que he de suponer que no conoces de todo bien css3, te explicare.

En css3 puedes seleccionar multiples elementos html si necesidad de hacer uso de clases o IDs, por ejemplo si yo quiero seleccionar un div que esta inmediatamente dentro de un header puedo hacer lo siguiente:

Código
  1. header>div{background:#F1F1F1;}
  2.  

y si lo hago de este modo mi codigo html quedara mas limpio:
Código
  1. <div>
  2.     <ul>
  3.         <li><a href= "logout.php">Logout</a></li>
  4.         <li><a href= "login.php">Login</a></li>
  5.     </ul>
  6. </div>

Te recomendaria averiguar sobre eso.


También me fije que en tu #nav no hiciste uso de nav, veras utilizas header para el header, pero para tu nav utilizas un div. esto crea ciertas inconsistencias meramente lógicas, también te recomendaría cambiarlo.

Código
  1. <nav>
  2.     <ul>
  3.         <li><a href = "index.php">Inicio</a></li>
  4.     </ul>
  5. </nav>

Otro tema es que en tu tabla, te recomendaría usar bien los td y los th igual que hacer uso de thead y tbody.

Código
  1. <table id="t_register_clients">
  3. 		<tr> <th>Edit</th> <th>Delete</th> <th>Last Name</th> <th>First Name</th> <th>Email</th> <th>Date Registered</th> </tr>
  4. 	</thead>
  6. 		<tr> <td>Element1</td> <td>Element1</td> <td>Element1</td> <td>Element1</td> <td>Element1</td> <td>Element1</td> </tr>
  7. 		<tr> <td>Element2</td> <td>Element2</td> <td>Element2</td> <td>Element2</td> <td>Element2</td> <td>Element2</td> </tr>
  8. 	</tbody>
  10.  

Bueno, muchas otras recomendaciones, como por ejemplo que tu js lo dejes al final del body o que tu #footer sea un <footer>, y sobre todo que te fijes bien en las etiquetas cuando las abres y cuando las cierras, porque creo que ese p no es el único raro, también hay un div, pero no estoy muy seguro. Suerte!
En línea
Son_of_Bush

Desconectado Desconectado

Mensajes: 31


Ver Perfil
Re: [Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.
« Respuesta #6 en: 4 Abril 2015, 08:26 am »
Si, solo estoy familializado con todo esto. Si sabia que habia formas mas efectivas de usar el CSS, pero  todavia no me he enfocado en ellas para que el celebro no se me frize de tanta data que  estoy tratando de meterle.  Pero por respeto a tu tiempo y porque ya me lo he aprendido  (gracias a ti), comenzare  a usar al menos la opcion de: elemento>elemento.

El HTML5 trate de no usarlo para evitar problemas de compatibilad, pero seguire tu recomendacion.

El <p> que mencionastes fue creado fuera del codigo PHP, o sea,  es puro HTML, se cierra (se supone) usando PHP (echo).  Seguramente tengo algun error en el codigo, voy a estudiarlo y experimentar a  ver si encuentro la explicacion de por que no se ve cerrado en el codigo fuente. El validator de wc3 me ha defraudado, no marca ningun error, excepto el aviso del HTML5.

En cuanto a la tabla, muchas gracias por esa recomendacion. Lei un poco sobre eso y me parece muy importante.

Y el  javascript lo puse en el header porque queria que el efecto del header ocurriera primero.

Gracias por las recomendaciones!!
En línea
3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: [Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.
« Respuesta #7 en: 4 Abril 2015, 12:29 pm »
Cualquier duda aca estamos. Y sobre el tema de compatibilidad, creo que ese aspecto ya esta bien abordado, exceptuando por la etiqueta <main>, y si utilizas header, y funciona header entonces funcionara footer, aside y nav  ;D asi que tranquilo. Suerte ^^
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Problema con los SVG y el Safe Mode en PHP
PHP 		murdock_ 1 2,756 Último mensaje 30 Septiembre 2010, 19:33 pm
por ~ Yoya ~
usar modem usb movistar desde el movil? [RESUELTO]
Dispositivos Móviles (PDA's, Smartphones, Tablets) 		dani__ 2 6,685 Último mensaje 3 Noviembre 2010, 22:31 pm
por dani__
problema al situar el footer
Desarrollo Web 		ars1993 4 2,170 Último mensaje 14 Febrero 2014, 19:31 pm
por ars1993
[Resuelto] [JS] Chrome Trex juego elimina window,document..
Desarrollo Web 		patilanz 6 2,294 Último mensaje 26 Agosto 2015, 17:57 pm
por patilanz
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines