Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lith1

Formatando trecho de letras de músicas com cifras

Por , em Desenvolvimento frontend

Recommended Posts

Lith1    0

Lith1
Postado

Salve,Estou fazendo um site de cifras de músicas mas estou com o seguinte problema:Criei um código em php pra ler do banco de dados a letra da musica, que vem numa string formatada assim: As <cifra tal>vezes no <cifra tal>silêncio da <cifra tal>noite...Onde o trecho '<cifra tal>' é a cifra daquela parte da letra...daí faço um parser em php que retira essa cifra da frente e a coloca em cima da palavra que sucede a cifra. Contudo, ainda não consegui fazer isso direito. Não consegui por as cifras em cima das palavras. Igual aos demais sites de cifras.Penso que css seja a solução pra isso, tentei usar alguns atributos mas não consegui. Alguém sabe como fazer??? Pode ser css ou outra tecnologia.Agradeço qq ajuda!

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

O conceito:

 

1 - Voce deve colocar um estilo nas cifras pra elas ficarem numa altura acima de sua altura normal (através de top negativo)

2 - Porém o espaço delas ainda tá reservado lá. A forma de fazer o espaço que era delas sair de lá, é dar às cifras o posicionamento absoluto.

3 - Só que o posicionamento absoluto é em relação ao primeiro ancestral que tiver posicionamento setado ou , se não houver, em relação ao body. Por isso, colocamos um posicionamento relativo no <p> que é pai dos span cifras.

 

O código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"><head><title>Página de Teste</title><style>.musica {	position:relative;	line-height:15px;}.cifra {	position:absolute;	color:#990000;	top:-15px;}</style></head><body><p class="musica"><span class="cifra">C#</span>Florentina, florentina,<span class="cifra">Dm</span>Florentina de<span class="cifra">F</span>Jesus</p></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lith1    0

Lith1
Postado

Man,Obrigado! Funciona perfeitamente!Eu tinha conseguido chegar só até o conceito 2...e nao tava bom...agora tá perfeito

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito