Foros del Web » Creando para Internet » CSS »

Problema en visualización en móvil y en slideshow

 Estas en el tema de Problema en visualización en móvil y en slideshow en el foro de CSS en Foros del Web. Hola gente, estoy creando una web y al subirla al hosting me he topado con dos problemas. 1. El primero de todo es que he ...
  #1 (permalink)  
Antiguo 21/09/2012, 09:54
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 14 años
Puntos: 4
Exclamación Problema en visualización en móvil y en slideshow
Hola gente, estoy creando una web y al subirla al hosting me he topado con dos problemas.

1. El primero de todo es que he subido la web al hosting para ver como va quedando en mi iPhone, y el padding de la derecha del body desaparece, el contenedor está tocando el borde derecho de la pantalla. También lo he visualizado con un móvil Andriod y sucede lo mismo. En cambio, si lo visualizáis con un ordenador de sobremesa está correctamente.

2. El segundo es el slideshow, cuando veo el slideshow en local me salen las imágenes y todo funciona correctamente, en cambio subí la web entera, o sea todos los archivos se subieron en el hosting, y el slideshow no me aparece, podéis ver un rectangulo en blanco.

PD: No hay enrrores en en W3C.

Aquí podéis ver la web:

http://www.sergibeltran.com/jim/index.html

Código HTML: 
Ver original
  1. <body> 
  2. <div id="container">
  3.             <header>
  4.                 <nav>
  5.                     <ul>
  6.                         <li><a href="index.html">Home</a></li>
  7.                         <li><a href="buy.html">Buy</a></li>
  8.                     </ul>
  9.                 </nav>
  10.                 <img id="logo" src="img/general/logo.jpg" alt="logo" width="200" height="281">
  11.                  <nav>
  12.                     <ul>
  13.                         <li><a href="about.html">About</a></li>
  14.                         <li><a href="contact.html">Contact</a></li>
  15.                     </ul>
  16.                 </nav>
  17.             </header>
  18.             <div id="content">
  19.                 <section id="slideshow">
  20.                     <div class="slider-wrapper theme-bar">
  21.                         <div id="slider" class="nivoSlider">
  22.                             <img src="img/slideshow/picture1.jpg" alt="" />
  23.                             <img src="img/slideshow/picture2.jpg" alt="" />
  24.                         </div>
  25.                    </div>
  26.                </section>
  27.                <div class="custom-home">
  28.                     <section class="article">
  29.                         <h2>Custom cables</h2>
  30.                         <article>
  31.                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  32.                             <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  33.                         </article>
  34.                     </section>
  35.                     <section class="payment">
  36.                         <div class="buy"><a href="#"><span>BUY</span> your custom cable</a></div>
  37.                         <ul>
  38.                             <li><img src="img/payment/PayPal.png" alt="PayPal" width="73" height="45"></li>
  39.                             <li><img src="img/payment/Visa.png" alt="Visa" width="73" height="45"></li>
  40.                             <li><img src="img/payment/Mastercard.png" alt="Mastercard" width="73" height="45"></li>
  41.                             <li><img src="img/payment/American-Express.png" alt="American-Express" width="73" height="45"></li>
  42.                             <li><img src="img/payment/Discover-Network.png" alt="Discover-Network" width="73" height="45"></li>
  43.                         </ul>
  44.                     </section>
  45. </div>
  46. </div>
  47. </div>
  48. </body>
  49. </html>

Código CSS: 
Ver original
  1. body {
  2.     background-color: #f0f0f0;
  3.     padding: 30px;
  4. }
  5.  
  6. #container {
  7.     background-color: white;
  8.     width: 960px;
  9.     margin: auto;
  10.     overflow:hidden;
  11.     -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, .8);
  12.         
  13.         box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, .8);
  14.         -webkit-border-radius: 3px;
  15.     
  16.     border-radius: 3px;
  17. }
  18.  
  19. #content {
  20.     padding: 0 60px;
  21.     width: 960px;
  22. }
  23.  
  24. /*** HEADER ***/
  25.  
  26. header {
  27.     width: 960px;
  28. }
  29.  
  30. header nav ul {
  31.     list-style-type: none;
  32.     float: left;
  33.     padding: 0;
  34.     margin: 0;
  35.     width: 380px;
  36. }
  37.  
  38. header nav ul li {
  39.     display: block;
  40.     text-align: center;
  41.     float: left;
  42.     width: 200px;
  43.     height: 54px;
  44.     margin: 80px 0 0 90px;
  45.     line-height: 2.5em;
  46.     font-family: 'Coda', cursive;
  47.     font-size: 1.5em;
  48. }
  49.  
  50. header nav li a {
  51.     display: block;
  52.     width: 200px;
  53.     height: 54px;
  54.     text-decoration: none;
  55.     color: black;
  56.     background-color: #f0f0f0;
  57.     -moz-border-radius: 0px;
  58.     -webkit-border-radius: 0px;
  59.     border-radius: 0px;
  60.     border: 0px solid #ffffff;
  61.     -moz-box-shadow: 0px 2px 3px rgba(000,000,000,0.5);
  62.     -webkit-box-shadow: 0px 2px 3px rgba(000,000,000,0.5);
  63.     box-shadow: 0px 2px 3px rgba(000,000,000,0.5);
  64.     text-shadow: 1px 1px 1px rgba(000,000,000,0.2);
  65.         
  66.     
  67. }
  68.  
  69. header nav li a:hover {
  70.     background-color: #e9e9e9;
  71.     color: black;
  72. }
  73.  
  74. header nav li a:active {
  75.     -webkit-box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, .5);
  76.     box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, .5);
  77.     background-color: #dedede;
  78. }
  79.  
  80. #logo {
  81.     float: left;
  82. }
  83.  
  84. /*** HOME ***/
  85.  
  86. section#slideshow {
  87.     width: 830px;
  88.     height: 296px;
  89.     float: left;
  90.     margin: 40px 0 30px 0;
  91.     padding: 5px;
  92.     -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, .5);
  93.     box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, .5);
  94. }
  95.  
  96. .custom-home {
  97.     margin: 0;
  98.     float: left;
  99.     width: 960px;
  100. }
  101.  
  102. .custom-home .article {
  103.     width: 570px;
  104.     float: left;
  105. }
  106.  
  107. .custom-home .article article {
  108.     font-family: 'Karla', sans-serif;
  109. }
  110.  
  111. .custom-home .article h2 {
  112.     color: #2c455b;
  113.     font-family: 'Old Standard TT', serif;
  114.     font-size: 3em;
  115.     margin: 0 0 -15px 0;
  116. }
  117.  
  118. .custom-home .payment {
  119.     float: left;
  120.     padding: 10px;
  121.     width: 270px;
  122.     box-sizing: border-box;
  123. }
  124.  
  125. .payment .buy {
  126.     
  127.     text-align: center;
  128.     
  129. background: -moz-linear-gradient(top,  #1e5799 0%, #2c455b 100%); /* FF3.6+ */
  130. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#2c455b)); /* Chrome,Safari4+ */
  131. background: -webkit-linear-gradient(top,  #1e5799 0%,#2c455b 100%); /* Chrome10+,Safari5.1+ */
  132. background: -o-linear-gradient(top,  #1e5799 0%,#2c455b 100%); /* Opera 11.10+ */
  133. background: -ms-linear-gradient(top,  #1e5799 0%,#2c455b 100%); /* IE10+ */
  134. background: linear-gradient(to bottom,  #1e5799 0%,#2c455b 100%); /* W3C */
  135. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#2c455b',GradientType=0 ); /* IE6-9 */
  136.     -moz-border-radius: 5px;
  137.     -webkit-border-radius: 5px;
  138.     border-radius: 5px;
  139.         
  140.         
  141. }
  142.  
  143. .payment .buy a{
  144.     display: block;
  145.     text-decoration: none;
  146.     width: 260px;
  147.     height: 100px;
  148.     color: white;
  149.     font-family: 'Quicksand', sans-serif;
  150.     font-size: 1.3em;
  151.     text-align: center;
  152.     background: #1e5799; /* Old browsers */
  153. background: -moz-linear-gradient(top,  #1e5799 0%, #2c455b 100%); /* FF3.6+ */
  154. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#2c455b)); /* Chrome,Safari4+ */
  155. background: -webkit-linear-gradient(top,  #1e5799 0%,#2c455b 100%); /* Chrome10+,Safari5.1+ */
  156. background: -o-linear-gradient(top,  #1e5799 0%,#2c455b 100%); /* Opera 11.10+ */
  157. background: -ms-linear-gradient(top,  #1e5799 0%,#2c455b 100%); /* IE10+ */
  158. background: linear-gradient(to bottom,  #1e5799 0%,#2c455b 100%); /* W3C */
  159. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#2c455b',GradientType=0 ); /* IE6-9 */
  160.     -moz-border-radius: 5px;
  161.     -webkit-border-radius: 5px;
  162.     border-radius: 5px;
  163.     -moz-box-shadow: 0px 3px 3px rgba(000,000,000,.8);
  164.     -webkit-box-shadow: 0px 3px 3px rgba(000,000,000,.8);
  165.     box-shadow: 0px 3px 3px rgba(000,000,000,.8);
  166.  
  167.     
  168.         
  169. }
  170.  
  171. .payment .buy a:hover {
  172.     background: #2c455b; /* Old browsers */
  173. background: -moz-linear-gradient(top,  #2c455b 0%, #1e5799 100%); /* FF3.6+ */
  174. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c455b), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
  175. background: -webkit-linear-gradient(top,  #2c455b 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
  176. background: -o-linear-gradient(top,  #2c455b 0%,#1e5799 100%); /* Opera 11.10+ */
  177. background: -ms-linear-gradient(top,  #2c455b 0%,#1e5799 100%); /* IE10+ */
  178. background: linear-gradient(to bottom,  #2c455b 0%,#1e5799 100%); /* W3C */
  179. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c455b', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
  180.  
  181. }
  182.  
  183. .payment .buy a:active {
  184.     -webkit-box-shadow: inset 0px 2px 2px 1px rgba(0, 0, 0, .5);
  185.         
  186.         box-shadow: inset 0px 2px 2px 1px rgba(0, 0, 0, .5);
  187.         background: #103759; /* Old browsers */
  188. background: -moz-linear-gradient(top,  #103759 0%, #1c408e 100%); /* FF3.6+ */
  189. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#103759), color-stop(100%,#1c408e)); /* Chrome,Safari4+ */
  190. background: -webkit-linear-gradient(top,  #103759 0%,#1c408e 100%); /* Chrome10+,Safari5.1+ */
  191. background: -o-linear-gradient(top,  #103759 0%,#1c408e 100%); /* Opera 11.10+ */
  192. background: -ms-linear-gradient(top,  #103759 0%,#1c408e 100%); /* IE10+ */
  193. background: linear-gradient(to bottom,  #103759 0%,#1c408e 100%); /* W3C */
  194. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#103759', endColorstr='#1c408e',GradientType=0 ); /* IE6-9 */
  195.  
  196. }
  197.  
  198. .payment .buy span {
  199.     width: 260px;
  200.     text-align: center;
  201.     display: block;
  202.     font-size: 1.5em;
  203.     font-weight: bold;
  204.     text-shadow: 1px 1px 3px #000000;
  205.         filter: dropshadow(color=#000000, offx=1, offy=1);
  206.     font-family: 'Krona One', sans-serif;
  207.     padding-top: 15px;
  208.     
  209. }
  210.  
  211. .payment ul {
  212.     list-style-type: none;
  213.     margin: 20px 0 0 0;
  214.     padding: 0;
  215. }
  216.  
  217. .payment ul li {
  218.     float: left;
  219.     margin: 0 0 10px 10px;
  220. }


No he puesto todo el código html ni css, si necesitáis más solo hay que pedírmelo.

Gracias de antemano ;)
  #2 (permalink)  
Antiguo 22/09/2012, 11:22
 
Fecha de Ingreso: septiembre-2012
Ubicación: Couña
Mensajes: 9
Antigüedad: 12 años, 1 mes
Puntos: 3
Respuesta: Problema en visualización en móvil y en slideshow
Igual te sería más fácil para optimizar si haces un diseño fluido, pero eso implica cambiar todas las medidas de píxeles en medidas relativas en porcentajes y em. Ten en cuenta que el ancho de un android es de 240px. Aparte de eso te recomendaría no usar sliders para android
  #3 (permalink)  
Antiguo 22/09/2012, 12:25
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Problema en visualización en móvil y en slideshow
No me dio tiempo a mirarlo mucho. Estoy esperando a salir de casa y llegó el momento. ¡Wohaa!

Lo que sí he notado es que llamas a las fuentes de Google Fonts de forma un tanto complicada, ya que por cada fuente cargas un archivo CSS, y la documentación de Google reza:
Cita:
To request multiple font families, separate the names with a pipe character (|).

For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:

http://fonts.googleapis.com/css?fami...ata|Droid+Sans
__________________
(:
  #4 (permalink)  
Antiguo 24/09/2012, 19:26
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 14 años
Puntos: 4
Respuesta: Problema en visualización en móvil y en slideshow
Cita:
Iniciado por Nano_Suarez Ver Mensaje
Igual te sería más fácil para optimizar si haces un diseño fluido, pero eso implica cambiar todas las medidas de píxeles en medidas relativas en porcentajes y em. Ten en cuenta que el ancho de un android es de 240px. Aparte de eso te recomendaría no usar sliders para android
Estoy rediseñando la web con unidades relativas, ahora la visualización con smartphones y tablets es mucho mejor que antes ;)

Gracias por pasarte.
  #5 (permalink)  
Antiguo 24/09/2012, 19:27
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 14 años
Puntos: 4
Respuesta: Problema en visualización en móvil y en slideshow
Cita:
Iniciado por Bonez Ver Mensaje
No me dio tiempo a mirarlo mucho. Estoy esperando a salir de casa y llegó el momento. ¡Wohaa!

Lo que sí he notado es que llamas a las fuentes de Google Fonts de forma un tanto complicada, ya que por cada fuente cargas un archivo CSS, y la documentación de Google reza:


Gracias, no sabia que se podían juntar dentro del mismo css :)

Un saludo y gracias por pasar ;)

Etiquetas: mobil, slideshow
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 10:17.