Alinhar Position:Relative no centro

[Erik 2]

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;
	}

Obrigado, Erik

Webdesign - Design gráfico

[Thiago Retondar 18]

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{
width: 100px;
position: relative;
left: 50%;
margin: 0 0 0 -50px; /* Metade do width */
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[William Bruno 1501]

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.

[Henrique Barcelos 290]

Dica: Se usar float nos elementos, o text-align vai para o espaço... :rolleyes:

[Erik 2]

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?

[Thiago Retondar 18]

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

[Erik 2]

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?

[Thiago Retondar 18]

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;
}

Realmente não estou entendendo muito bem o problema.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[William Bruno 1501]

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.

[Erik 2]

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...

[Erik 2]

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:

 

labs.dragoninteractive.com

[Thiago Retondar 18]

É, man. O problema está no JavaScript. =/

 

Quer que eu mova o tópico para lá?

[Erik 2]

Manda lah então... pensei que era css.. caramba... Javascript num manjo nada...

[Thiago Retondar 18]

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

[William Bruno 1501]

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.