Centralizando Slide

+3
Dury
seender
Caíque Andrade
7 participantes

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

Tópico resolvido Centralizando Slide

Mensagem por Caíque Andrade 29.04.11 23: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://i783.photobucket.com/albums/yy117/Kagamin_IzumiChan/TakeruSuGsotw.png?t=1303346009"><img height="177" width="354" src="http://i783.photobucket.com/albums/yy117/Kagamin_IzumiChan/TakeruSuGsotw.png?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
Caíque Andrade

Caíque Andrade
***

Membro desde : 09/03/2011
Mensagens : 116
Pontos : 162

http://topdesign.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Centralizando Slide

Mensagem por seender 01.05.11 1: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
seender

seender
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Centralizando Slide

Mensagem por Dury 01.05.11 1: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.
Dury

Dury
Membro Entusiasta
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizando Slide

Mensagem por UNLead 01.05.11 2:23

Olá,

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

UNLead
Membro

Membro desde : 30/11/2010
Mensagens : 516
Pontos : 746

http://www.plusone.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizando Slide

Mensagem por Caíque Andrade 01.05.11 2:57

Obrigado pela ajuda, mas infelizmente nenhum funcionou =/
Caíque Andrade

Caíque Andrade
***

Membro desde : 09/03/2011
Mensagens : 116
Pontos : 162

http://topdesign.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizando Slide

Mensagem por valeria-o 01.05.11 3:15

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

valeria-o
*

Membro desde : 21/04/2011
Mensagens : 48
Pontos : 76

http://informaticaeaqui.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizando Slide

Mensagem por Caíque Andrade 02.05.11 21:59

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

Caíque Andrade
***

Membro desde : 09/03/2011
Mensagens : 116
Pontos : 162

http://topdesign.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Centralizando Slide

Mensagem por Byte 03.05.11 1: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://i783.photobucket.com/albums/yy117/Kagamin_IzumiChan/TakeruSuGsotw.png?t=1303346009"><img height="177" width="354" src="http://i783.photobucket.com/albums/yy117/Kagamin_IzumiChan/TakeruSuGsotw.png?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
Byte

Byte
Super Membro

Membro desde : 12/02/2009
Mensagens : 1272
Pontos : 2341

http://gabionicle.forum.st/

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizando Slide

Mensagem por Taynã 03.05.11 2: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ã
Taynã

Taynã
Super Membro

Membro desde : 23/11/2010
Mensagens : 1172
Pontos : 1550

http://publieiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Centralizando Slide

Mensagem por Caíque Andrade 03.05.11 19: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 +.
Caíque Andrade

Caíque Andrade
***

Membro desde : 09/03/2011
Mensagens : 116
Pontos : 162

http://topdesign.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos