Fórum WMO: [Resolvido] Como Alinha O Texto Ao Lado Do Thumb - Fórum WMO

Ir para

Página 1 de 1
  • Novo tópico
  • Responder
  • Ícone  Compartilhar

[Resolvido] Como Alinha O Texto Ao Lado Do Thumb

#1 Membro offline   fe_slash 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 8
  • Cadastrado: 24/07/2010
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 24/07/2010, 17:39

Fala galera, blz? por favor, peça a ajuda de vcs pra tentar alinhar o texto ao lado das thumbs... o texto ta ficando abaixo da thumb. já tentei um monte de coisa mas não to conseguindo.o site é http://www.trailersdocinema.com/

obrigado

abs
0

#2 Membro offline   LeoB 

  • Veterano
  • Ícone
  • Grupo: Usuários
  • Posts: 1.232
  • Cadastrado: 16/12/2003
  • Sexo:Masculino
  • Interesses:Programação
Pontos: 22
Excellent

Postou 24/07/2010, 18:02

float: left;

na imagem.
0

#3 Membro offline   fe_slash 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 8
  • Cadastrado: 24/07/2010
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 24/07/2010, 21:15

fala leob blz, já está dessa forma... mas mesmo assim nao da certo :(
0

#4 Membro offline   LeoB 

  • Veterano
  • Ícone
  • Grupo: Usuários
  • Posts: 1.232
  • Cadastrado: 16/12/2003
  • Sexo:Masculino
  • Interesses:Programação
Pontos: 22
Excellent

Postou 24/07/2010, 22:00

Não tem nenhum na imagem do "Os Mercenários",

a img {
border:medium none;
}
style.css (linha 47)
Herdado de a filme-os-mercenarios
a, a:visited {
color:#A91B33;
text-decoration:none;
}
style.css (linha 37)
Herdado dediv#content
#content {
line-height:18px;
}
style.css (linha 584)
Herdado de body
body {
color:#333333;
font-family:Arial,Tahoma,Verdana;
font-size:12px;
}
0

#5 Membro offline   fe_slash 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 8
  • Cadastrado: 24/07/2010
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 26/07/2010, 00:31

Ver postLeoB, em 24/07/2010, 22:00, disse:

Não tem nenhum na imagem do "Os Mercenários",

a img {
border:medium none;
}
style.css (linha 47)
Herdado de a filme-os-mercenarios
a, a:visited {
color:#A91B33;
text-decoration:none;
}
style.css (linha 37)
Herdado dediv#content
#content {
line-height:18px;
}
style.css (linha 584)
Herdado de body
body {
color:#333333;
font-family:Arial,Tahoma,Verdana;
font-size:12px;
}



então brother, nessa partes onde vc coloca herdado de tal, é onde devo colocar o float: left?

obrigado

abs
0

#6 Membro offline   LeoB 

  • Veterano
  • Ícone
  • Grupo: Usuários
  • Posts: 1.232
  • Cadastrado: 16/12/2003
  • Sexo:Masculino
  • Interesses:Programação
Pontos: 22
Excellent

Postou 26/07/2010, 01:38

Faz uma classe e pronto.

img.esquerda {
float: left;
}

<img class="esquerda"...
0

#7 Membro offline   fe_slash 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 8
  • Cadastrado: 24/07/2010
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 26/07/2010, 11:17

fiz isso, mas mesmo assim não deu certo.. na verdade ele fica pra esquerda ao clicar na postagem, ou seja, na pagina certa do post onde mostra todas as informações relacionadas ao filme... aquela thumb na página inicial, pra que ela apareça, eu tenho que adicionar em campos personalizados "thumb" e em valor "a url da imagem", porem, no style.css tem uma classe thumb já, onde está com float:left já... será que tem que colocar algo a mais nessa classe thumb?


no style essa classe tá assim

.thumb {
float: left;
margin: 0px 10px 0px 0px;
}

já fiz um teste tirando esse margin, mas mesmo assim o problema persiste.

o que será que tenho que fazer?


PS: Desculpa ai estar te incomodando... :lol:

valeu
0

#8 Membro offline   LeoB 

  • Veterano
  • Ícone
  • Grupo: Usuários
  • Posts: 1.232
  • Cadastrado: 16/12/2003
  • Sexo:Masculino
  • Interesses:Programação
Pontos: 22
Excellent

Postou 26/07/2010, 12:51

Você fez a classe e não aplicou na imagem.

<img width="70" height="70" alt="Filme Os Mercenários" src="http://4.bp.blogspot.com/_76qFQiOTE7c/TD90Wt4ciiI/AAAAAAAAGoU/bA96ZwKk52A/s400/mercenarios. jpg">

Como o navegador vai saber que tem que usar aí?

-----

Citar

aquela thumb na página inicial, pra que ela apareça, eu tenho que adicionar em campos personalizados "thumb" e em valor "a url da imagem"

? O site é sistema pronto? Então não estamos falando da mesma coisa.

Este post foi editado por LeoB: 26/07/2010, 12:55

0

#9 Membro offline   fe_slash 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 8
  • Cadastrado: 24/07/2010
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 26/07/2010, 13:15

é wordpress...
0

#10 Membro online   André Manoel 

  • Mestre
  • Ícone
  • Grupo: Monitores
  • Posts: 689
  • Cadastrado: 15/12/2009
  • Sexo:Masculino
  • Localidade:Brasilia
Pontos: 85
Excellent

Postou 26/07/2010, 14:06

Coloque na linha 47 do style.css:

a img{
    border: none;
    vertical-align: top;
}



(y)
Iniciando na Ajuda On line...

Imagem Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.
1

#11 Membro offline   fe_slash 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 8
  • Cadastrado: 24/07/2010
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 26/07/2010, 14:57

fala andre, blz.... deu certo, o titulo da postagem alinhou, somente o texto (conteudo do post) que não tá subindo, sabe o que fazer agora?

valeu pela ajuda (y)
0

#12 Membro online   André Manoel 

  • Mestre
  • Ícone
  • Grupo: Monitores
  • Posts: 689
  • Cadastrado: 15/12/2009
  • Sexo:Masculino
  • Localidade:Brasilia
Pontos: 85
Excellent

Postou 26/07/2010, 17:26

Bem aí você terá um problema... porque o texto está dentro de um parágrafo.

Vou te sugerir algo melhor...

Você pode criar ali aonde está o thumb e a imagem... 3 divs.

Você teria uma div principal... que seria a maior

Vamos supor que seja a

<div class = "box">
</div>


Dentro dela você teria mais duas divs:


<div class = "box">
    <div class = "thumb">
    </div>
    <div class = "texto">
    </div>
</div>


Aí você poderia fazer assim:

A classe box teria 100% de largura,
A classe thumb teria 30%(suposição, adapte aos valores do seu layout);
A classe texto teria 70%;

E você utilizaria a propriedade float para posicionar corretamente as divs.

A classe thumb você coloca a esquerda;
A classe texto você coloca a direita;

Aí não precisar se preocupar com o posicionamento de texto... porque tudo o que estivesse dentro das divs seria independente...

Tenta fazer assim e vê o que acontece...
Acredito que fica mais fácil.

(y)
Iniciando na Ajuda On line...

Imagem Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.
0

#13 Membro offline   fe_slash 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 8
  • Cadastrado: 24/07/2010
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 27/07/2010, 19:53

mas aí que tá, a thumb não fica na postagem, ela é adicionada em campos personalizados.... o modelo de postagem que eu uso, que no caso é o do post http://www.trailersd...-os-mercenarios é todo feito em tabela.... na postagem mesmo, nessa url, está tudo certinho, tudo alinhado, o problema é que ao exibir o resumo na pagina inicial, ele ta dando todo esse erro. :(

alguem tem mais sugestões?? valeu!
0

#14 Membro offline   webbz 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 10
  • Cadastrado: 26/07/2010
  • Sexo:Masculino
  • Localidade:Curitiba
  • Interesses:Musica - Futebol - Design
Pontos: 2
Neutral

Postou 27/07/2010, 22:09

Seguinte amigo, no style.css


a img{
    border: none;
    vertical-align: top;
    float:left;
    margin-right:20px;
        }


Adcionando essas duas ultima linhas, vc já tem o texto ao lado, se quiser o texto e link mais proximos, ou mais afastados, só mudar o valor em margin.

OK (y)

Ver postfe_slash, em 26/07/2010, 14:57, disse:

fala andre, blz.... deu certo, o titulo da postagem alinhou, somente o texto (conteudo do post) que não tá subindo, sabe o que fazer agora?

valeu pela ajuda (y)


Aqui deu certinho: SS
Imagem
1

#15 Membro offline   fe_slash 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 8
  • Cadastrado: 24/07/2010
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 28/07/2010, 00:52

Ver postwebbz, em 27/07/2010, 22:09, disse:

Seguinte amigo, no style.css


a img{
    border: none;
    vertical-align: top;
    float:left;
    margin-right:20px;
        }


Adcionando essas duas ultima linhas, vc já tem o texto ao lado, se quiser o texto e link mais proximos, ou mais afastados, só mudar o valor em margin.

OK (y)

Ver postfe_slash, em 26/07/2010, 14:57, disse:

fala andre, blz.... deu certo, o titulo da postagem alinhou, somente o texto (conteudo do post) que não tá subindo, sabe o que fazer agora?

valeu pela ajuda (y)


Aqui deu certinho: SS



webb, deu certinho.... :D (y) mto obrigado!

e mto obrigado a todos q me ajudaram tb.... valeu, abs
0

Página 1 de 1
  • Novo tópico
  • Responder

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)