Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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, 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
css...
#gallery {
left: -400px;
}
talvez precisa alterar o valor de left
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;
}#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;
}text-decoration: none;
color: #777;
}text-decoration: underline;
}margin-top: 5px;
height: 3px;
}
div.tituloprod {
margin-top: 5px;
height: 23px;
color:#000000;
}
div.controls a {
padding: 5px;
}float: left;
}float: right;
}position: relative;
clear: both;margin-left:-300px;
}position: absolute;
top: 0;
left: 0;
background-image: url('loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 360px;}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}display: block;
width: 360px;text-align: center;
}text-decoration: none;
}vertical-align: left;
border: 10px solid #ccc;
margin-top:30px;
}float: right;
}position: absolute;
clear: left;
height: 75px;
background-color:#00FFFF;
}display: block;
position: absolute;
width: 360px;
top: 0;
left: 0;
}padding: 12px;
}font-weight: bold;
font-size: 1.4em;
background-color:#CC3333;
}line-height: 1.3em;
padding-top: 12px;
background-color:#CC3333;
}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;
}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.
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?