Ajuda, centralização

Zorba · Junho 30, 2012

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

JaguA · 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>

Zorba · 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

JaguA · 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.

Zorba · 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.

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

Zorba · 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

JaguA · 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 ..

Zorba · 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>

JaguA · Julho 3, 2012

cade o CSS do slideshow ?

tudo isso é com o CSS deve ser o caminho que está errado.

Zorba · 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.

Zorba · Julho 9, 2012

Alguém poderia me ajudar, com essa questão??

Ficaria muito grato.

Entrar

Ajuda, centralização

Pergunta

Link para o comentário

Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns