Problemas com implementação.

[Leandro Persi 0]

Bom dia.

Ha dois mese desenvolvi um site e o amigo programador fez uma "faxina" no código e na estrutura visando deixar o site mais organizado e gostei das alterações e decidi começar a aplicar essa metodologia nos meus novos projetos mas já comecei a ter problemas e preciso da ajuda dos colegas, é o segujinte.

No espaço em branco do lado direito do site http://www.cleoreis.com.br/show/index.php estou tentando inserir uma animação a dois dias mas não consigo, a animação esta pronta mas devo estar cometendo algum erro na hora de lincar os JS ou CSS que ainda não consegui encontrar e peço a aajuda de vocês, a animação pode ser vista AQUI

 

Obrigado

[Gaw 5]

Para mim a animação está aparecendo normalmente e está funcionando... só os tênis que estão abaixo da foto grande, que acho que deveriam estar do lado... seria esse o seu problema?

[Leandro Persi 0]

Gaw, eu consegui resolver o problema que postei mas agora tenho outra dificuldade, o esquema deve aparecer da seguinte maneira; as miniaturas devem estar em duas colunas e três linas do lado esquerdo e do lado direito deve aparecer a imagem ampliada, cerce de uns50, 60px de distancia mas aqui a distancia das miniaturas para a amplicação esta bem maior saindo da área do site inclusive e não encontro de jeio nenhum a css responsavel por essa distancia, se o que você estiveer vendo ai estiver diferente do que citei por favor me digfa que tentarei resolver e se souber onde esta o erro dessa distancia que falei manda ai

[Vadio 13]

css...

#gallery {
   left: -400px;
}

 

talvez precisa alterar o valor de left

[Leandro Persi 0]

Ae pessoal valeu, continuei fuçando no css e lincando corretamente os arquivos na index e consegui resolver praticamente tudo, a animação esta funcionando como deve só não consegui ainda reduzir o espaço em branco acima da animação, continuo mexendo nos css's mas ta dificil. Segue abaixo os arquivos se quiserem dar uma olhada.

 

PRINCIPAL DO SITE A´TE ONDE ESTÃO AS CONFIG RELEVANTES

body {
/* Necessário para centralizar o layout no "IE" */
text-align:center;
background-color:#191919;
margin:0 auto;
text-align:end;
color: #FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 17px;

height: 100%;
overflow: auto;

}
div {
border:0px}


#topob {
width:100%;
text-align:center; /* Alinhando o texto a esquerda**/
background-image:url(../imagens/bg_topo.gif);
background-repeat:repeat-y;
clear:both;
border-top-width: 6px;
border-top-style: solid;
border-top-color: #183196;


}
#topocentro {
width:774px;
margin:0 auto; /* centraliza o layout, exceto "IE" */
text-align:left; /* Alinhando o texto a esquerda**/
}


#loja {
width:100%;
text-align:center;
margin: 0 auto;
background-color:#232324;
clear:both;
text-align:center;
border-top-width:1px;
border-top-style: solid;
border-top-color: #FFFFFF;
}


.animacao {
width:774px;;

}

#estrutura {
width:100%;
text-align:left; /* Alinhando o texto a esquerda**/
clear:both;
background-color: #191919;
}
#estruturacentro {
min-height:420px;
width:774px;
margin:0 auto; /* centraliza o layout, exceto "IE" */
text-align:left; /* Alinhando o texto a esquerda**/
background-color:#303030;
background-image: url(../images/canto.png);
background-repeat:no-repeat;
padding-top:15px;

}

 

 

 

 

+ ANIMAÇÃO

 

div.content {
/* The display of contentanima is enabled using jQuery so that the slideshow contentanima won't display unless javascript is enabled. */
display: none;
float: right;
width: 100px;
}
div.contentanima a, div.navigation a {
text-decoration: none;
color: #777;

}
div.contentanima a:focus, div.contentanima a:hover, div.contentanima a:active {
text-decoration: underline;

}
div.controls {
margin-top: 5px;
height: 3px;

}

div.tituloprod {
margin-top: 5px;
height: 23px;
color:#000000;
}

div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container {
position: relative;
clear: both;
height: 302px; /* This should be set to be at least the height of the largest image in the slideshow */
margin-left:-300px;

}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url('loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 360px;
height: 350px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.slideshow a.advance-link {
display: block;
width: 360px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 2px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;

}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow img {
vertical-align: left;
border: 10px solid #ccc;
margin-top:30px;

}
div.download {
float: right;
}
div.caption-container {
position: absolute;
clear: left;
height: 75px;
background-color:#00FFFF;
}
span.image-caption {
display: block;
position: absolute;
width: 360px;
top: 0;
left: 0;
}
div.caption {
padding: 12px;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
background-color:#CC3333;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
	background-color:#CC3333;
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {

padding: 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 10px 10px 10px 10px;
list-style: none;
width:100px;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
background: #000;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;
}
div.navigation div.bottom {
margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #ccc;
}
div.pagination a:hover {
background-color: #eee;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
background-color: #000;
border-color: #000;
color: #fff;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}

[Gaw 5]

Dentro da div "thumbs" tem uma outra div chamada:

 

<div class="top pagination"></div>

 

ela está ocupando um espaço do topo, veja se não é isso.