Zorba Postado Junho 30, 2012 Denunciar Share Postado Junho 30, 2012 (editado) PEssoal seguinte eu não estou conseguindo centralizar o slide show da página inicial ele fico todo para a direita.Já tentei tudo e mais um pouco... margin: 0 auto; margin-left/right: auto; nada nada se puderem me ajudar agradeço...Segue código:<link rel="shortcut icon" href="imagens/favicon.ico"/> <link rel="stylesheet" href="css/slide.css" type="text/css" media="screen"/> <script type="text/javascript" src="Jquery/jquery.js"></script> <script type="text/javascript" src="Scripts/slide.js"></script> <!-- Body --> <style> body { font-family:Arial, Helvetica, Sans-Serif; font-size:12px; margin:0px 20px; background-color:#333; text-align:center; } </style> <!-- Slider --> <style type="text/css"> /* rotator in-page placement */ div.rotator { position:relative; height:345px; margin-left: 220px; display: none; } /* rotator css */ div.rotator ul li { float:left; position:absolute; list-style: none; } /* rotator image style */ div.rotator ul li img { border:1px solid #ccc; padding: 4px; background: #FFF; } div.rotator ul li.show { z-index:500 } </style> <script type="text/javascript"> function theRotator() { //Set the opacity of all images to 0 $('div.rotator ul li').css({opacity: 0.0}); //Get the first image and display it (gets set to full opacity) $('div.rotator ul li:first').css({opacity: 1.0}); //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('rotate()',6000); } function rotate() { //Get the first image var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first')); if ( current.length == 0 ) current = $('div.rotator ul li:first'); //Get next image, when it reaches the end, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first')); //Un-comment the 3 lines below to get the images in random order //var sibs = current.siblings(); //var rndNum = Math.floor(Math.random() * sibs.length ); //var next = $( sibs[ rndNum ] ); //Set the fade in effect for the next image, the show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { //Load the slideshow theRotator(); $('div.rotator').fadeIn(1000); $('div.rotator ul li').fadeIn(1000); // tweek for IE }); </script> <!-- Menu --> <style> /* menu */ #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; } #menu a { color:#fff; text-decoration:none; } #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;} #menu > li a:hover {color:#B0D730;} #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;} /* sub-menus*/ #menu ul { padding:0px; margin:0px; display:block; display:inline;} #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; } #menu li:hover ul { display:block;} #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; } #menu li ul li:first-child { border-top: none; } #menu li ul li a { display:block; color:#0395CC; } #menu li ul li a:hover { color:#7FCDFE; } /* main submenu */ #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#fff; color:#000; z-index:999;} /* search */ .searchContainer div { background-color:#fff; display:inline; padding:5px;} .searchContainer input[type="text"] {border:none;} .searchContainer img { vertical-align:middle;} /* corners*/ #menu .corner_inset_left { position:absolute; top:0px; left:-12px;} #menu .corner_inset_right { position:absolute; top:0px; left:150px;} #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;} #menu .corner_left { position:absolute; left:0px; top:0px;} #menu .corner_right { position:absolute; left:132px; top:0px;} #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;} </style> </head> <body> <div align="center" style="margin-left:50px;"> <ul id="menu"> <li class="logo"> <a href="home.html"><img src="Imagens/menu_left.png" alt="" style="float:left;"/></a> </li> <li><a href="home.html">Home</a> </li> <li><a href="fotos.html">Fotos</a> </li> <li><a href="albuns.html">Álbuns</a> </li> <li><a href="http://sagginfotografias.blogspot.com.br/">Blog</a> </li> <li><a href="contato.html">Contato</a> </li> <li><a href="restrita.html">Área Restrita</a> </li> </ul> <img style="float:left;" alt="" src="Imagens/menu_right.png"/> </div> <div style="float:none; clear:both;"></div> <table class="alinhamento" width="100%" height="100%" border="0"> <tr> <td></td> <td id="principal" width="80%" height="394"> <div class="rotator"> <ul> <li class="show"><img src="Imagens/Slide/1.jpg" width="720" height="300" alt="pic1" /></li> <li><img src="Imagens/Slide/2.jpg" width="500" height="313" alt="pic2" /></li> <li><img src="Imagens/Slide/3.jpg" width="500" height="313" alt="pic3" /></li> <li><img src="Imagens/Slide/4.jpg" width="500" height="313" alt="pic4" /></li> <li><img src="Imagens/Slide/5.jpg" width="500" height="313" alt="pic5" /></li> <li><img src="Imagens/Slide/6.jpg" width="500" height="313" alt="pic6" /></li> <li><img src="Imagens/Slide/7.jpg" width="500" height="313" alt="pic7" /></li> <li><img src="Imagens/Slide/8.jpg" width="500" height="313" alt="pic8" /></li> <li><img src="Imagens/Slide/9.jpg" width="500" height="313" alt="pic9" /></li> </ul> </div> </td> <td></td> </tr> </table> </body> </html> Editado Junho 30, 2012 por Zorba Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 JaguA Postado Junho 30, 2012 Denunciar Share Postado Junho 30, 2012 Rapaz esse rotator ta funcionando ai ? aparece alguma imagem ? se sim tudo beem mas tem algo que achei estranho nesse teu CSS na parte do slider.enfim de qualquer forma aqui a imagem centralizo...altere somente essa parte eu diminui a quantidade de imagens mas vocÊ coloca com mais como havia feito no seu.<div align="center" class="rotator"> <ul> <li class="show"><img src="Imagens/Slide/2.jpg" width="720" height="300" alt="pic1" /></li> <li><img src="Imagens/Slide/3.jpg" width="500" height="313" alt="pic3" /></li> <li><img src="Imagens/Slide/4.jpg" width="500" height="313" alt="pic4" /></li> <li><img src="Imagens/Slide/5.png" width="500" height="313" alt="pic5" /></li> </ul> </div> Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Zorba Postado Junho 30, 2012 Autor Denunciar Share Postado Junho 30, 2012 Opa obirgado por responder Jagua,O rotador ta funcionando normal, a unica coisa e que as imagens não ficam centralizadas na página...Adicionei a tag align a div como tu mostou e mesmo assim não centralizou... Estou usando uma imagem 500x313 e 720x300.O que teria de estranho??obrigado, att Mateus Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 JaguA Postado Julho 2, 2012 Denunciar Share Postado Julho 2, 2012 você não declarou #(quadrado) na frente dos nome para referenciar a id, aqui so funcionou quando adicionei na frente de todas as declarações de ID. e está centralizado. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Zorba Postado Julho 2, 2012 Autor Denunciar Share Postado Julho 2, 2012 (editado) você não declarou #(quadrado) na frente dos nome para referenciar a id, aqui so funcionou quando adicionei na frente de todas as declarações de ID. e está centralizado.Entendi o que quis dizer Jagua. Eu coloquei aqui e mesmo assim não funcionou, teria como tu postar como ficou o código para eu comparar com o meu e ver se esqueci de algo???Obrigado pela ajuda até agora, abraços.EDIT:Consegui arrumar aqui, tinha escrito uma linha errado... Vlw obrigadão pela ajuda!! Editado Julho 2, 2012 por Zorba Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Zorba Postado Julho 3, 2012 Autor Denunciar Share Postado Julho 3, 2012 Cara seguinte eu coloquei as # e não deu certo, tipo ele centraliza, só que as imagens ficam uma embaixo da outra... O que será que tem de errado??Obrigado, abraços Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 JaguA Postado Julho 3, 2012 Denunciar Share Postado Julho 3, 2012 Olha aqui fico assim também, mas como eu não tenho os arquivos.js para fazer toda a função de slideshow não me importei .. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Zorba Postado Julho 3, 2012 Autor Denunciar Share Postado Julho 3, 2012 Olha aqui fico assim também, mas como eu não tenho os arquivos.js para fazer toda a função de slideshow não me importei ..Obrigado pela ajuda Jagua, mas acebei achano outro slideshow pronto na internet... Só que o problema agora é que as imagens que são utilizadas no times e as flechas para passar as imagens para frente ou para traz não estão carregando... Segue abaixo o código e o site do plugin...site plugin: http://www.zurb.com/playground/jquery_image_slider_plugin<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="shortcut icon" href="imagens/favicon.ico"/> <script type="text/javascript" src="Jquery/jquery.js"></script> <script src="Jquery/jquery.orbit.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/orbit.css"> <!-- Slider --> <script type="text/javascript"> $(window).load(function() { $('#featured').orbit({ animation: 'fade', // fade, horizontal-slide, vertical-slide, horizontal-push animationSpeed: 800, // how fast animtions are timer: true, // true or false to have the timer advanceSpeed: 4000, // if timer is enabled, time between transitions pauseOnHover: false, // if you hover pauses the slider startClockOnMouseOut: false, // if clock should start on MouseOut startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again directionalNav: true, // manual advancing directional navs captions: true, // do you want captions? captionAnimation: 'fade', // fade, slideOpen, none captionAnimationSpeed: 800, // if so how quickly should they animate in bullets: true, // true or false to activate the bullet navigation bulletThumbs: true, // thumbnails for the bullets bulletThumbLocation: 'orbit/', // location from this file where thumbs will be afterSlideChange: function(){} // empty function }); }); </script> <style type="text/css"> #featured { width: 800px; height: 541px; background: #000 url('orbit/loading.gif') no-repeat center center; overflow: hidden; } #featured img, #featured div { display: none; } </style> <!-- Menu --> <style> body { font-family:Arial, Helvetica, Sans-Serif; font-size:12px; margin:0px 20px;} /* menu */ #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; } #menu a { color:#fff; text-decoration:none; } #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;} #menu > li a:hover {color:#B0D730;} #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;} /* sub-menus*/ #menu ul { padding:0px; margin:0px; display:block; display:inline;} #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; } #menu li:hover ul { display:block;} #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; } #menu li ul li:first-child { border-top: none; } #menu li ul li a { display:block; color:#0395CC; } #menu li ul li a:hover { color:#7FCDFE; } /* main submenu */ #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#fff; color:#000; z-index:999;} /* corners*/ #menu .corner_inset_left { position:absolute; top:0px; left:-12px;} #menu .corner_inset_right { position:absolute; top:0px; left:150px;} #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;} #menu .corner_left { position:absolute; left:0px; top:0px;} #menu .corner_right { position:absolute; left:132px; top:0px;} #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;} </style> </head> <body bgcolor="#333333" text="#CCCCCC" link="#FFFFFF" vlink="#990000"> <div align="center" style="margin-left:50px;"> <ul id="menu"> <li class="logo"> <img src="Imagens/menu_left.png" alt="" style="float:left;"/> </li> <li><a href="#">Home</a> </li> <li><a href="#">Fotos</a> </li> <li><a href="#">Álbuns</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Contato</a> </li> </ul> <img style="float:left;" alt="" src="Imagens/menu_right.png"/> </div> <div style="float:none; clear:both;"></div> <table width="100%" height="100%" border="0"> <tr> <td></td> <td align="center" id="principal" width="80%" height="541"> <div align="center" id="featured"> <img src="Imagens\Slide\1.jpg" alt="" /> <img src="Imagens\Slide\2.jpg" alt="" /> <img src="Imagens\Slide\3.jpg" alt="" /> </div> </td> <td></td> </tr> <tr> </tr> </table> </body> </html> Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 JaguA Postado Julho 3, 2012 Denunciar Share Postado Julho 3, 2012 cade o CSS do slideshow ?tudo isso é com o CSS deve ser o caminho que está errado. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Zorba Postado Julho 4, 2012 Autor Denunciar Share Postado Julho 4, 2012 Está o link pra ele <link rel="stylesheet" href="css/orbit.css">...Assim ele carrega as funcionalidades timer, mover para a proxima imagem, porém as imagens referentes a cada recursos não são mostradas no website...Eu achei que o caminho das imagens no css estava errado, mas esta correto... A imagem de loading que é "carregada" nesta parte do codigo: <style type="text/css"> #featured { width: 800px; height: 541px; background: #000 url('orbit/loading.gif') no-repeat center center; overflow: hidden; } #featured img, #featured div { display: none; } </style>roda normalmente portem as outras que seriam: bullets, left-arrow, right-arrow, pause-black, etc... Não são carregadas. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Zorba Postado Julho 9, 2012 Autor Denunciar Share Postado Julho 9, 2012 Alguém poderia me ajudar, com essa questão??Ficaria muito grato. Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Zorba
PEssoal seguinte eu não estou conseguindo centralizar o slide show da página inicial ele fico todo para a direita.
Já tentei tudo e mais um pouco... margin: 0 auto; margin-left/right: auto; nada nada se puderem me ajudar agradeço...
Segue código:
Editado por ZorbaLink para o comentário
Compartilhar em outros sites
10 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.