Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde pessoal,
Estou finalizando um site, que de modestia parte, ta ficando muito bom, só tem um problema, usei um efeito jQuery no título, só que quando o PHP atualiza o texto ele fica alinhado a esquerda, quando na verdade o correto é alinhar ao centro.
Situação:
O problema real é que o código css ta usando position:relative e eu pretendia alinhar com text-align:center ai deu errado, pensei em usar de alguma forma o width pra reconhecer a largura automáticamente e alinhar no espaço margin: 0 auto. Bom falhei é claro.
O que preciso?
Preciso alinhar o texto no centro, não precisa ser como descrevi acima, é só alinhar.
Código:
.rainbow,.rainbows-highlight,.rainbows-shadow {
xline-height: 1;
}
.rainbow {
background: transparent;
display: block;
position: relative;
height: 1px;
overflow: hidden;
z-index: 4;
}
.rainbow span {
position: absolute;
top: 0;
left: 1px;
display: block;
xwhite-space: nowrap;
}
a .rainbow span {
white-space: nowrap;
}
.rainbows-highlight {
color: #999 !important;
display:block;
position: absolute;
top: 2px;
left: 3px;
z-index: 2;
}
.rainbows-shadow {
color: #006 !important;
display:block;
position: absolute;
top: 2px;
left: 3px; /* can be one or two depending on 90 or 135 degree global light */
z-index: 3;
}.back .text .rainbows-shadow {
color: #fff !important;
opacity: 0.3;
}Webdesign - Design gráfico
>
Situação:
O problema real é que o código css ta usando position:relative e eu pretendia alinhar com text-align:center ai deu errado, pensei em usar de alguma forma o width pra reconhecer a largura automáticamente e alinhar no espaço margin: 0 auto. Bom falhei é claro.
Ta... pq deu errado o text-align center ?
E a melhor forma de conseguir oque você qr.
Trabalhar com margins, sera inviavel, visto que você tera q ficar calculando o width do elemento, a cada troca de texto.
De que elemento estamos falando? <h1> ? <span> ?
position relative nada tem a ver com o alinhamento nesse caso.
Dica: Se usar float nos elementos, o text-align vai para o espaço... :rolleyes:
Ai que ferra tudo...
tem q ser position:relative, qualquer outra coisa e não aplica o efeito, e a tag que to usando é:
<h1 id="titulo_site"><!--Esse código PHP imprimi o título da página atual -->
<?php
$mydoc =& JFactory::getDocument();
$mytitle = $mydoc->getTitle();
echo $mytitle; ?>
</h1>O código
O ID titulo_site é usado como seletor do Jquery (enfim, ele identifica onde o Jquery deve aplicar o efeito) para aplicar o CSS que eu coloquei no primeiro post para diagramar o efeito de degradê e sombra nos textos.
Entenderam?
Na verdade não entendi. =/
Tem como postar o seu HTML gerado? O CSS referente ao HTML que você vai postar é este do primeiro post?
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
O html gerado é esse:
<h1 id="titulo_site">Aqui vai o título da página</h1>
O Jquery usa o id titulo_site como seletor pra aplicar o css (que postei no primeiro post) e o resultado é um texto com degradê e sombra.
Agora como que faço pra alinhar o position:relative sem saber a largura???
A dica do Thiago é boa, eu ja usava ela antes, mas agente precisa saber a largura pra alinhar, já nesse caso não funciona porque a largura é diferente para cada página do site (A primeira página chama PUBLICIDADE E PROPAGANDA e existe outra que chama GALERIA - na primeira a largura é maior por ter mais letras).
Caso alguém queira saber o Jquery é esse:
rainbows.init({
selector: '#titulo_site',
highlight: false,
shadow: true,
from: '#FFFFFF',
to: '#C8DFF7'
Entenderam?
Agora como que faço pra alinhar o position:relative sem saber a largura???
Essa é a sua dúvida, então? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif
Bem, é realmente complicado. Da para fazer algo não muito crossbrowser com display: table.
Se quiser algo que funcione em todos os browsers, da para fazer com JavaScript.
Já tentou colocar tudo dentro de um parágrafo e colocar nesse parágrafo text-align: center?
Mas eu não entendi uma coisa. Já tentou definir h1#titulo_site{ text-align: center; } e não funcionou?
Testei isso aqui e funcionou de boa:
h1#titulo_site{
position: relative;
text-align: center;
}http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
>
tem q ser position:relative, qualquer outra coisa e não aplica o efeito
Pode colocar position: relative + text-align uai!É como te disse, não faz sentido você ter que contar a largura do elemento para poder posiciona-lo com o relative.
Não use o relative para alinhar! não tá certo isso.
Tem um link para a página? Eu gostaria de ver isso em funcionamento, até para poder entender o problema, e achar a solução.
Então ta!
Baixa esse arquivo, descompacta e roda a página index.html
é isso que eu to fazendo.. só precisa que o texto fique alinhado no meio...
Há!... esqueci de falar... quem quiser pegar o script pra usar em seus layouts é bem fácil de configurar.. só não é facil de alinhar no meio da página http://forum.imasters.com.br/public/style_emoticons/default/grin.gif kkkkkk
O nome é Codename Rainbows e o site que eu peguei é esse:
É, man. O problema está no JavaScript. =/
Quer que eu mova o tópico para lá?
Manda lah então... pensei que era css.. caramba... Javascript num manjo nada...
Tópico movido:
Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript / DHTML » JavaScript Frameworks
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Baixei o fonte. Teremos que contar qntas letras tem a frase, para ai calcular um width, e conseguir alinhar.
O text-align não funciona porque para fazer o gradiente, usaram vários elementos com position absolute;
Se ninguém te respondeu, é pq ninguem que leu tem a solução ainda.
Não precisa dar 'up' no tópico. Vamos tentando a solução. A única forma que vi, é a que descrevi acima, tente implementar.
Onde você colocou o text-align: center? Já tentou colocar no parágrafo, ou qualquer que seja o elemento?
Para centralizar com position é só usar assim:
elemento{
margin: 0 0 0 -50px; / Metade do width /
}
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif