Centralizando Slide

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Centralizando Slide

Mensagem por Caíque Andrade em Sex 29 Abr 2011 - 19:43

Qual é sua questão:
Bom...

Coloquei um Slide no Portal do meu Forum através de um widget, mas queria centralizar ele dentro do widget. Não achei onde encaixar ele para que o Slide ficasse centralizado corretamente. O código é esse:
Código:
<style type="text/css">

#tv a {
font-size:16px;
font-weight:bold;
}

#tv span {
color:#FFFFFF;
font-size:12px;
font-weight:normal;
}

#hid {
display:none;
left:-5000px;
position:absolute;
top:-5000px;
}

#tv #nav {
height:170px;
left:359px;
overflow:hidden;
position:absolute;
top:5px;
width:46px;
}

#tv #nav img {
cursor:pointer;
height:30px;
margin:0 0 5px;
width:46px;
}

#tv .opac {
margin-bottom:5px;
opacity:1;
}

#tv .transp {
margin-bottom:5px;
opacity:0.1;
}


#tv img {
display:block;
margin-bottom:7px;
margin-left:-10px;
border:thin solid;
}
img {
border:medium none;
}

#tv {
background:url("http://i55.tinypic.com/dmw3ue.png") no-repeat scroll 0 0 transparent;
float:left;
height:255px;
overflow:hidden;
padding:0 61px 0 10px;
position:relative;
width:344px;
}

#corpoh {
text-align:left;
}

</style><div id="tv">
<script type='text/javascript'>
// JavaScript para tv //
var index = 1; var menu_time = 6000; var anterior = 5; var timer = setTimeout('trocaMsg()',menu_time);
function trocaMsg() { index = index%5 +1; channel(index); tempo(); }
function tempo() { clearTimeout(timer); timer = setTimeout("trocaMsg()",menu_time);}
function channel(id) { index = id; document.getElementById("tvn" + anterior).className= "transp"; document.getElementById("tvn" + id).className = "opac"; document.getElementById('tvshow').innerHTML=document.getElementById('tv' + id).innerHTML; anterior = id;}
function tvch(id, out) {if (out == 1) { clearTimeout(timer); channel(id);} else { tempo();}}
//channel(1);




// JavaScript para tv-papeis //
var index_p = 1; var menu_time_p = 2800; var anterior_p = 5; var timer_p = setTimeout('trocaMsg_p()',menu_time_p);
function trocaMsg_p() { index_p = index_p%5 +1; channel_p(index_p); tempo_p(); }
function tempo_p() { clearTimeout(timer_p); timer_p = setTimeout("trocaMsg_p()",menu_time_p);}
function channel_p(idx) { index_p = idx; document.getElementById("tvp" + anterior_p).className= "transp"; document.getElementById("tvp" + idx).className = "opac"; document.getElementById('paptv').innerHTML=document.getElementById('ptv' + idx).innerHTML; anterior_p = idx;}
function tvch_p(idx, out) {if (out == 1) { clearTimeout(timer_p); channel_p(idx);} else { tempo_p();}}
//channel_p(1);

//Função p/ n Aparecer erro de JS no navegador do Tiozinho
function semerro(){
return true;}
window.onerror=semerro;

</script><div id="tvshow">

<!-- SLIDE INICIAL-->

<a href="http://topdesign.forumeiros.com/t763-resultado-sotw-5?t=1303346009="177" width="354" src="http://topdesign.forumeiros.com/t702-votacao-sotw-5" title="Fernando Lou" />

eleiçoes 2012


<span>
Em 2012 Vote Com o Coraçao

</span></a></div><div id="nav">

<!-- SLIDE DE NAVEGAÇÕES // escolher o slide a ser visto-->

<!-- SLIDE DE NAVEGAÇÃO 1-->

<a href=" "><img height="30" width="46" onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" src="http://i56.tinypic.com/24muwq0.png" class="transp" id="tvn1" /></a>

<!-- SLIDE DE NAVEGAÇÃO 2-->

<a href=" "><img height="30" width="46" onmouseout="tvch(2,0)" onmouseover="tvch(2,1)" src="http://i52.tinypic.com/289flp5.png" class="opac" id="tvn2" /></a>

<!-- SLIDE DE NAVEGAÇÃO 3-->

<a href=" "><img height="30" width="46" onmouseout="tvch(3,0)" onmouseover="tvch(3,1)" src="http://i51.tinypic.com/jqnp7o.png" class="transp" id="tvn3" /></a>

<!-- SLIDE DE NAVEGAÇÃO 4-->

<a href=" "><img height="30" width="46" onmouseout="tvch(4,0)" onmouseover="tvch(4,1)" src="http://i53.tinypic.com/5303n4.png" class="transp" id="tvn4" /></a>

<!-- SLIDE DE NAVEGAÇÃO 5-->

<a href="http://elementdowns.blogspot.com/search/label/hacker"><img height="30" width="46" onmouseout="tvch(5,0)" onmouseover="tvch(5,1)" http: / /www.asupr.com /asureport /wp-content /uploads /2008 /10 /hacker1.jpgclass="transp" id="tvn5" /></a>
</div>


<ul id="hid">

<!-- SLIDES-->

<!-- SLIDE 1-->

<li id="tv1">
<a href="http://illiweb.com/fa/pbucket.gif?t=1303346009"><img height="177" width="354" src="http://illiweb.com/fa/pbucket.gif?t=1303346009" title="SOTW " />

#SOTW 5


<span>

   Vencedora : Y u u ki'

</span></a></li>


<!-- SLIDE 2-->

<li id="tv2">
<a href=" "><img height="177" width="354" src="http://i54.tinypic.com/1zqr4uf.jpg" title="WOTW" />

#WOTW

<span>

   Ainda sem resultados
</span></a></li>

<!-- SLIDE 3-->

<li id="tv3">
<a href=" "><img height="177" width="354" src="http://i54.tinypic.com/1zqr4uf.jpg" title="TDFS" />

#TDFS

<span>

   Ainda sem resultados
</span></a></li>

<!-- SLIDE 4-->

<li id="tv4">

<a href=" "><img height="177" width="354" src="http://i54.tinypic.com/1zqr4uf.jpg" title="AOTM" />

#AOTM


<span>

   Ainda sem resultados
</span></a></li>

</ul>


<script type="text/javascript">
channel(1);
</script>
</div>

Alguem poderia me dizer onde colocar para que centralize ?


Grato desde já!

Que medidas você tomou para corrigir o problema:
essa

Apresente-nos imagens do problema (se necessário):
não necessita
avatar

Caíque Andrade
Nível 8

Masculino
Inscrito dia : 09/03/2011
Mensagens : 116
Pontos Ativos : 162

Ver perfil do usuário http://topdesign.forumeiros.com/

Resolvido Re: Centralizando Slide

Mensagem por seender em Sab 30 Abr 2011 - 21:37

Olá!

É só colocar o código abaixo antes de todos os códigos:
Código:
<center>
e adicionar este no final de todos os códigos:
Código:
</center>

Resolve?

Melhores cumprimentos,
seender
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Centralizando Slide

Mensagem por Dury em Sab 30 Abr 2011 - 21:44

Não funciona. Já usei o comando "Left e right" de um código HTML e não deu certo, o center não funciona com Slides.
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Centralizando Slide

Mensagem por UNLead em Sab 30 Abr 2011 - 22:23

Olá,

Tente este código:
Código:
<div align="center">AQUI CODIGO</div>
avatar

UNLead
Usuário destaque

Masculino
Inscrito dia : 30/11/2010
Mensagens : 516
Pontos Ativos : 746

Ver perfil do usuário http://www.plusone.forumeiros.com

Resolvido Re: Centralizando Slide

Mensagem por Caíque Andrade em Sab 30 Abr 2011 - 22:57

Obrigado pela ajuda, mas infelizmente nenhum funcionou =/
avatar

Caíque Andrade
Nível 8

Masculino
Inscrito dia : 09/03/2011
Mensagens : 116
Pontos Ativos : 162

Ver perfil do usuário http://topdesign.forumeiros.com/

Resolvido Re: Centralizando Slide

Mensagem por valeria-o em Sab 30 Abr 2011 - 23:15

Amigo, esse codigo foi postado por mim e no meu funciona normal. te mandei uma mP. abraçoss
avatar

valeria-o
Nível 5

Feminino
Inscrito dia : 20/04/2011
Mensagens : 48
Pontos Ativos : 76

Ver perfil do usuário http://informaticaeaqui.forumeiros.com/

Resolvido Re: Centralizando Slide

Mensagem por Caíque Andrade em Seg 2 Maio 2011 - 17:59

Ele está funcionando normalmente, já editei e tudo, mas só quero uma coisa: Centralizar ele, apenas isso.
avatar

Caíque Andrade
Nível 8

Masculino
Inscrito dia : 09/03/2011
Mensagens : 116
Pontos Ativos : 162

Ver perfil do usuário http://topdesign.forumeiros.com/
  • 0

Resolvido Re: Centralizando Slide

Mensagem por Byte em Seg 2 Maio 2011 - 21:59

Olá Caíque!

Bom vou lhes explicar o problema de seu código que não permite centralizar.
Você utilizou o "float:left;" que faz o box ser jogado para a esquerda, assim sendo este código superior aos outros mostrados acima, que funcionariam se este float não existisse!

A tag <center> funciona sim, mas ela foi abolida das tags oficiais do HTML atual, de acordo com as normas.
Então uma solução, seria colocar um alinhamento com CSS, lembrando que este tipo de alinhamento só funciona se você especificar a largura do objeto.

Fazemos assim:

<style>
#obj{width:100px;margin: 0 auto;}
</style>

<div id="obj">asd</div>

Isso centraliza o objeto na tela, ele cria uma margem lateral o quanto for suficiente para preencher os espaços aos lados.

Mas como existe o IE6, este código não funciona nele, pois ele não obedece as normas dos códigos estabelecidas pela W3C.

Então usamos um "erro" do IE6 para funcionar, criamos mais uma div, colocamos a largura dela em 100%, e então colocamos o "align:center" que pelas regras de CSS deveria funcionar sómente para texto, o que não acontece no IE6 e 7:

<style>
.ie6{width:100%;align:center;}
#obj{width:100px;margin: 0 auto;}
</style>

<div class="ie6">
<div id="obj">asd</div>
</div>

Bom, esse "textão" foi para futuras dúvidas semelhantes, o seu código pronto para ser centralizado está aqui:

Código:
<style type="text/css">

#tv a {
font-size:16px;
font-weight:bold;
}

#tv span {
color:#FFFFFF;
font-size:12px;
font-weight:normal;
}

#hid {
display:none;
left:-5000px;
position:absolute;
top:-5000px;
}

#tv #nav {
height:170px;
left:359px;
overflow:hidden;
position:absolute;
top:5px;
width:46px;
}

#tv #nav img {
cursor:pointer;
height:30px;
margin:0 0 5px;
width:46px;
}

#tv .opac {
margin-bottom:5px;
opacity:1;
}

#tv .transp {
margin-bottom:5px;
opacity:0.1;
}


#tv img {
display:block;
margin-bottom:7px;
margin-left:-10px;
border:thin solid;
}
img {
border:medium none;
}

#tv {
background:url("http://i55.tinypic.com/dmw3ue.png") no-repeat scroll 0 0 transparent;
height:255px;
overflow:hidden;
padding:0 61px 0 10px;
position:relative;


width:344px;
margin: 0 auto;
}

#corpoh {
text-align:left;
}

</style>


<div id="tv">
<script type='text/javascript'>
// JavaScript para tv //
var index = 1; var menu_time = 6000; var anterior = 5; var timer = setTimeout('trocaMsg()',menu_time);
function trocaMsg() { index = index%5 +1; channel(index); tempo(); }
function tempo() { clearTimeout(timer); timer = setTimeout("trocaMsg()",menu_time);}
function channel(id) { index = id; document.getElementById("tvn" + anterior).className= "transp"; document.getElementById("tvn" + id).className = "opac"; document.getElementById('tvshow').innerHTML=document.getElementById('tv' + id).innerHTML; anterior = id;}
function tvch(id, out) {if (out == 1) { clearTimeout(timer); channel(id);} else { tempo();}}
//channel(1);




// JavaScript para tv-papeis //
var index_p = 1; var menu_time_p = 2800; var anterior_p = 5; var timer_p = setTimeout('trocaMsg_p()',menu_time_p);
function trocaMsg_p() { index_p = index_p%5 +1; channel_p(index_p); tempo_p(); }
function tempo_p() { clearTimeout(timer_p); timer_p = setTimeout("trocaMsg_p()",menu_time_p);}
function channel_p(idx) { index_p = idx; document.getElementById("tvp" + anterior_p).className= "transp"; document.getElementById("tvp" + idx).className = "opac"; document.getElementById('paptv').innerHTML=document.getElementById('ptv' + idx).innerHTML; anterior_p = idx;}
function tvch_p(idx, out) {if (out == 1) { clearTimeout(timer_p); channel_p(idx);} else { tempo_p();}}
//channel_p(1);

//Função p/ n Aparecer erro de JS no navegador do Tiozinho
function semerro(){
return true;}
window.onerror=semerro;

</script><div id="tvshow">

<!-- SLIDE INICIAL-->

<a href="http://topdesign.forumeiros.com/t763-resultado-sotw-5?t=1303346009="177" width="354" src="http://topdesign.forumeiros.com/t702-votacao-sotw-5" title="Fernando Lou" />

eleiçoes 2012


<span>
Em 2012 Vote Com o Coraçao

</span></a></div><div id="nav">

<!-- SLIDE DE NAVEGAÇÕES // escolher o slide a ser visto-->

<!-- SLIDE DE NAVEGAÇÃO 1-->

<a href=" "><img height="30" width="46" onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" src="http://i56.tinypic.com/24muwq0.png" class="transp" id="tvn1" /></a>

<!-- SLIDE DE NAVEGAÇÃO 2-->

<a href=" "><img height="30" width="46" onmouseout="tvch(2,0)" onmouseover="tvch(2,1)" src="http://i52.tinypic.com/289flp5.png" class="opac" id="tvn2" /></a>

<!-- SLIDE DE NAVEGAÇÃO 3-->

<a href=" "><img height="30" width="46" onmouseout="tvch(3,0)" onmouseover="tvch(3,1)" src="http://i51.tinypic.com/jqnp7o.png" class="transp" id="tvn3" /></a>

<!-- SLIDE DE NAVEGAÇÃO 4-->

<a href=" "><img height="30" width="46" onmouseout="tvch(4,0)" onmouseover="tvch(4,1)" src="http://i53.tinypic.com/5303n4.png" class="transp" id="tvn4" /></a>

<!-- SLIDE DE NAVEGAÇÃO 5-->

<a href="http://elementdowns.blogspot.com/search/label/hacker"><img height="30" width="46" onmouseout="tvch(5,0)" onmouseover="tvch(5,1)" http: / /www.asupr.com /asureport /wp-content /uploads /2008 /10 /hacker1.jpgclass="transp" id="tvn5" /></a>
</div>


<ul id="hid">

<!-- SLIDES-->

<!-- SLIDE 1-->

<li id="tv1">
<a href="http://illiweb.com/fa/pbucket.gif?t=1303346009"><img height="177" width="354" src="http://illiweb.com/fa/pbucket.gif?t=1303346009" title="SOTW " />

#SOTW 5


<span>

  Vencedora : Y u u ki'

</span></a></li>


<!-- SLIDE 2-->

<li id="tv2">
<a href=" "><img height="177" width="354" src="http://i54.tinypic.com/1zqr4uf.jpg" title="WOTW" />

#WOTW

<span>

  Ainda sem resultados
</span></a></li>

<!-- SLIDE 3-->

<li id="tv3">
<a href=" "><img height="177" width="354" src="http://i54.tinypic.com/1zqr4uf.jpg" title="TDFS" />

#TDFS

<span>

  Ainda sem resultados
</span></a></li>

<!-- SLIDE 4-->

<li id="tv4">

<a href=" "><img height="177" width="354" src="http://i54.tinypic.com/1zqr4uf.jpg" title="AOTM" />

#AOTM


<span>

  Ainda sem resultados
</span></a></li>

</ul>


<script type="text/javascript">
channel(1);
</script>
</div>

Espero ter ajudado Caíque!
Byte
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

Ver perfil do usuário http://gabionicle.forum.st/

Resolvido Re: Centralizando Slide

Mensagem por Taynã em Seg 2 Maio 2011 - 22:26

Olá ja tentou o Código HTML que Seender lhe passou?

Se Seender não se encomodar vou repetir oque ele disse.

Use este código HTML:
Código:
<center>Código do Slide Aqui</center>
Ao Começar:
Código:
<center>

Ao Terminar:
Código:
</center>

Pelo menos aqui a Tag <center> ainda esta funcionando.
Em meu Slide que eu usava funcionava não sei agora,se eu estiver errado me desculpe.

Att Taynã
avatar

Taynã
Membro do Fórum

Masculino
Inscrito dia : 22/11/2010
Mensagens : 1172
Pontos Ativos : 1550

Ver perfil do usuário http://publieiros.com

Resolvido Re: Centralizando Slide

Mensagem por Caíque Andrade em Ter 3 Maio 2011 - 15:32

Byte,

Você é simplesmente o cara, entende tudo desses códigos, eu entendo apenas o básico, queria muito entender como você, você fez algum curso ?
@OFF
Muito obrigado Byte, você solucionou meu problema perfeitamente e me explicou o motivo e tal, perfeito! Dei um OBRIGADO e um +.
avatar

Caíque Andrade
Nível 8

Masculino
Inscrito dia : 09/03/2011
Mensagens : 116
Pontos Ativos : 162

Ver perfil do usuário http://topdesign.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum