Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Son_of_Bush en 2 Abril 2015, 15:38 pm


Título: [Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.
Publicado por: Son_of_Bush 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.

Título: Re: Problema con Chrome (movil). El footer no se ve en portrait mode.
Publicado por: 3n31ch 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)

Título: Re: Problema con Chrome (movil). El footer no se ve en portrait mode.
Publicado por: Son_of_Bush 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 (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. }

Título: Re: Problema con Chrome (movil). El footer no se ve en portrait mode.
Publicado por: karmany 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;}

Título: Re: Problema con Chrome (movil). El footer no se ve en portrait mode.
Publicado por: Son_of_Bush 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!



Título: Re: [Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.
Publicado por: 3n31ch 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!

Título: Re: [Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.
Publicado por: Son_of_Bush 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!!





Título: Re: [Resuelto] Problema con Chrome (movil). El footer no se ve en portrait mode.
Publicado por: 3n31ch 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 ^^


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines