Tema: Problema en visualización en móvil y en slideshow
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/09/2012, 09:54
Avatar de sergi_multimedia
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 ;)