Hitskin.comIsto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
ArtigosPosicionamento de Imagens
5 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Posicionamento de Imagens
por ShaDownS 20.07.14 21:48
- Descrição:
Olá pessoal, eu gostaria de saber, como posicionar uma imagem em um texto, no caso à esquerda.
Mas, eu queria que o texto ocupasse o espaço embaixo dela. O que quero é um code que posicione ela, sem o texto se posicionar apenas o lado da imagem. Ou seja, posicionar a imagem à esquerda em um texto com o espaço abaixo dela ocupado pelo texto. Podem usar esta imagem:http://serebii.net/art/th/1.png
E o texto, bem, pode ser qualquer um. Contanto que me mostrem de como o efeito do code iria funcionar.
~ Abraços, Kiri.
- Informações:
| Fórum: | http://forumnarutoultimate.forumeiros.com | Versão: | PHPBB3 |
| Tipo: | Pedido de código | Tags: | Posicionamento,Imagens |
Última edição por Kirisama em 25.07.14 20:04, editado 2 vez(es)
ShaDownS- Membro
- Membro desde : 09/03/2014
Mensagens : 907
Pontos : 1484 -
Re: Posicionamento de Imagens
por Cream 21.07.14 16:40
Olá,
Perdoe-me, mas eu não entendi sua questão. Você quer posicionar uma imagem à esquerda em um tópico, e colocar textos em volta dela? Pois se for isso, basta utilizar uma tabela, como esta:
Aguardo mais explicações.
Até mais!
Perdoe-me, mas eu não entendi sua questão. Você quer posicionar uma imagem à esquerda em um tópico, e colocar textos em volta dela? Pois se for isso, basta utilizar uma tabela, como esta:
- Código:
[table]
[tr]
[td][img]http://serebii.net/art/th/1.png[/img][/td]
[td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies est et velit fringilla auctor. Etiam in semper tortor. Proin eu cursus turpis. Suspendisse arcu lacus, luctus at ligula ut, malesuada placerat nibh. Vivamus faucibus luctus lectus, ut facilisis mi cursus vitae. Etiam nibh justo, venenatis nec erat in, dignissim convallis sapien. In venenatis condimentum sem ut pellentesque. Nulla ultrices luctus urna eget consequat. Fusce aliquet est ut mattis volutpat. Curabitur rhoncus commodo nisl, non rhoncus tortor fringilla vel. Duis vel ante vitae libero rutrum lacinia. Duis sed elit justo. Suspendisse fermentum id diam at sodales. Aliquam a porta neque. Praesent justo turpis, bibendum sit amet suscipit a, imperdiet sed diam. [/td]
[/tr]
[tr]
[td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies est et velit fringilla auctor. Etiam in semper tortor. Proin eu cursus turpis. Suspendisse arcu lacus, luctus at ligula ut, malesuada placerat nibh. Vivamus faucibus luctus lectus, ut facilisis mi cursus vitae. Etiam nibh justo, venenatis nec erat in, dignissim convallis sapien. In venenatis condimentum sem ut pellentesque. Nulla ultrices luctus urna eget consequat. Fusce aliquet est ut mattis volutpat. Curabitur rhoncus commodo nisl, non rhoncus tortor fringilla vel. Duis vel ante vitae libero rutrum lacinia. Duis sed elit justo. Suspendisse fermentum id diam at sodales. Aliquam a porta neque. Praesent justo turpis, bibendum sit amet suscipit a, imperdiet sed diam. [/td]
[td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies est et velit fringilla auctor. Etiam in semper tortor. Proin eu cursus turpis. Suspendisse arcu lacus, luctus at ligula ut, malesuada placerat nibh. Vivamus faucibus luctus lectus, ut facilisis mi cursus vitae. Etiam nibh justo, venenatis nec erat in, dignissim convallis sapien. In venenatis condimentum sem ut pellentesque. Nulla ultrices luctus urna eget consequat. Fusce aliquet est ut mattis volutpat. Curabitur rhoncus commodo nisl, non rhoncus tortor fringilla vel. Duis vel ante vitae libero rutrum lacinia. Duis sed elit justo. Suspendisse fermentum id diam at sodales. Aliquam a porta neque. Praesent justo turpis, bibendum sit amet suscipit a, imperdiet sed diam. [/td]
[/tr]
[/table]
Aguardo mais explicações.
Até mais!
Cream- Membro Entusiasta
- Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644 -
Re: Posicionamento de Imagens
por ShaDownS 22.07.14 18:45
Não, eu me refiro ao posicionamento em HTML 
E com esse efeito:
É mais ou menos isso. Queria posicionar a imagem, à esquerda, e que o texto ocupasse o lado dela e embaixo sem o uso de tabelas, pois já tentei e não gostei...
~ Kiri
E com esse efeito:
- Código:
#img {
position: absolute
top: 50px
left: 50px
}
É mais ou menos isso. Queria posicionar a imagem, à esquerda, e que o texto ocupasse o lado dela e embaixo sem o uso de tabelas, pois já tentei e não gostei...
~ Kiri
ShaDownS- Membro
- Membro desde : 09/03/2014
Mensagens : 907
Pontos : 1484 -
ShaDownS- Membro
- Membro desde : 09/03/2014
Mensagens : 907
Pontos : 1484 -
Re: Posicionamento de Imagens
por Sennior 25.07.14 7:47
Saudações,
Seria isso amigo?
Um CSS para personalização seria assim:
É isso que deseja?
Abraços.
Seria isso amigo?
- Código:
<html>
<span class=sennior><img src="http://serebii.net/art/th/1.png" /></span>
</html>
TESTE ao lado
Um CSS para personalização seria assim:
- Código:
.sennior {
position: absolute
top: 50px
left: 50px
}
É isso que deseja?
Abraços.
Sennior- Principal Contribuidor
- Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903 -
Re: Posicionamento de Imagens
por waghcwb 25.07.14 12:04
Olá,
Bem simples de ser feito, basta usar a propriedade display: block na imagem. Mas com isso, chegamos num impasse aqui, se usar em todas as imagens, todas terão quebra de linha, então terá de criar uma classe ou usar CSS inline na imagem para conseguir o efeito.
Veja:
Com classe
Com CSS inline
Ou por exemplo você pode conseguir o efeito só nos tópicos, ou só dentro de tal div..
Para isso precisaríamos de mais informações, mas caso o código passado já resolva seu problema creio que não seja necessário...
Bem simples de ser feito, basta usar a propriedade display: block na imagem. Mas com isso, chegamos num impasse aqui, se usar em todas as imagens, todas terão quebra de linha, então terá de criar uma classe ou usar CSS inline na imagem para conseguir o efeito.
Veja:
Com classe
- Código:
.img-block{display:block;}
- Código:
<img src="http://serebii.net/art/th/1.png" class="img-block">
Com CSS inline
- Código:
<img src="http://serebii.net/art/th/1.png" style="display:block">
Ou por exemplo você pode conseguir o efeito só nos tópicos, ou só dentro de tal div..
Para isso precisaríamos de mais informações, mas caso o código passado já resolva seu problema creio que não seja necessário...
waghcwb- Membro
- Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097 -
Re: Posicionamento de Imagens
por Shek 25.07.14 15:48
Bom dia!
Em caso de BBcode, poderá usar uma tabela:
Em caso de BBcode, poderá usar uma tabela:
- Código:
[table][tr][td][img]http://serebii.net/art/th/1.png[/img][/td][td]SEU TEXTO AQUI[/td][/tr][/table]
- Resultado:
Seu texto aqui, sem o uso de CSS ou HTML específico para tal. Para cada imagem, é só criar um TD.
Shek- Principal Contribuidor
- Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969 -
Re: Posicionamento de Imagens
por ShaDownS 25.07.14 19:58
Muito bem, eu queria fazer isto:
»» KjxdyfffjcvbxfkSlxslvfeuotcaa. wblmczlfaubvçmxakcwjcskcsjbdjbfkbsçbawlfebçdabKjx. dyfffjcvbxfkSlxslvfeuotcaawblmczlf. aubvçmxakcwjcskcsjbdjbfkbsçbawlfebçdab
Nem precisa inserir formatações ^^
Só pôr a imagem, e o texto normalmente ^^
~ Satisfeito. Abraços.
~ Angel.
»» KjxdyfffjcvbxfkSlxslvfeuotcaa. wblmczlfaubvçmxakcwjcskcsjbdjbfkbsçbawlfebçdabKjx. dyfffjcvbxfkSlxslvfeuotcaawblmczlf. aubvçmxakcwjcskcsjbdjbfkbsçbawlfebçdabNem precisa inserir formatações ^^
Só pôr a imagem, e o texto normalmente ^^
- Código:
[img]http://serebii.net/art/th/1.png[/img] »» KjxdyfffjcvbxfkSlxslvfeuotcaawblmczlfaubvçmxakcwjcskcsjbdjbfkbsçbawlfebçdabKjxdyfffjcvbxfkSlxslvfeuotcaawblmczlfaubvçmxakcwjcskcsjbdjbfkbsçbawlfebçdab
~ Satisfeito. Abraços.
~ Angel.
ShaDownS- Membro
- Membro desde : 09/03/2014
Mensagens : 907
Pontos : 1484 -
Tópicos semelhantes» Posicionamento de imagens
» Posicionamento
» Posicionamento
» Posicionamento do logo
» Categorias: posicionamento
» Posicionamento
» Posicionamento
» Posicionamento do logo
» Categorias: posicionamento
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos