Alinhamento de texto com imagem

[Wesley Rodrigues]

Ola pessoal boa noite.
Estou precisando alinhar um texto com uma imagem onde um fique ao lado do outro, ou seja, tenho uma imagem de 370x245 e um texto, o campo onde ele esta tem 660px, só que não estou conseguindo colocar o texto ao lado direito dessa imagem, ele esta ficando abaixo da imagem, já tentei diminuir os espaços e mesmo assim não esta rolando.
Sei que deve ser algo bem simples de resolver com CSS mas não estou achando a forma correta de fazer, alguém aqui na lista pode me dar um help.

Abrs.

Wesley Rodrigues


Enviado do meu BlackBerry® da TIM

[wpmidia lab]

use a propriedade float: left

<img />

<p>texto</p>

no CSS:

img { float: left }

Só pra tu ter uma idéia.. =)

Beijokas

Drika

--
Você recebeu esta mensagem por estar inscrito na lista de debates "WordPress Brasil" através do sistema Google Groups.

Para enviar uma mensagem: wordpres...@googlegroups.com
Para cancelar sua inscrição: wordpress-bras...@googlegroups.com
Para visitar o grupo: http://groups.google.com.br/group/wordpress-brasil?hl=pt-BR

Temas: http://wordpress.org/extend/themes/
Plugins: http://wordpress.org/extend/plugins/
Projeto WordPress: http://br.wordpress.org/

--

Míriam de Paula 

(a.k.a. Drika)

Twitter: @miriamdepaula

wpmidia
desenvolvimento web
http://wpmidia.com.br
twitter: @wpmidia

WordPress Brasil no Facebook: http://www.facebook.com/groups/wordpress.brasil

OpenCart Brasil no Facebook:
http://www.facebook.com/groups/opencart.brasil/

[Wesley Rodrigues]

Drika, estou sando o float em ambos, como estou fazendo um link eles estão tanto na ul quanto na ul li além de estar também na img.

Wesley rodrigues

Enviado do meu BlackBerry® da TIM

---

From: wpmidia lab <wpm...@gmail.com>

Sender: wordpres...@googlegroups.com

Date: Sun, 4 Mar 2012 21:48:14 -0300

To: <wordpres...@googlegroups.com>

ReplyTo: wordpres...@googlegroups.com

Subject: Re: [wordpress-brasil] Alinhamento de texto com imagem

[Vinicius Gomes]

posta o html pro pessoal te ajudar

[wpmidia lab]

Pois é.... como disse o colega Vinicius... posta o trecho do HTML pra gente poder analisar melhor.

Abs.

Drika

[Gil Porta]

Olá Wesley, sou novo neste grupo.

É exatamente o que a Drika postou:
<img style="float:left"....... /><p>Seu texto Seu texto Seu texto Seu
texto Seu texto </p>

Não precisa usar o float no segundo elemento.

Abraços,
Gil Porta.

[Wesley Rodrigues]

Ola pessoal, segue o código que estou usando, como eu estava pelo celular não deu pra colocar o código....

Imagem de como deve ficar: http://img841.imageshack.us/img841/4639/emd006.jpg
HTML: http://pastebin.com/t9s68d0V
CSS: http://pastebin.com/Pyq4sFHF

Obrigado...

 

Wesley Rodrigues
Email: wesle...@gmail.com
Site: www.bitmaisbit.com.br
Tel: (11) 8748-3369

2012/3/5 Gil Porta <gilp...@gmail.com>

[Vinicius Gomes]

#content_destaque-um ul li { 

1. display: inline;
2. float: left;
3. width: 665px;
4. margin-bottom: 5px;
5. padding-bottom: 5px;

}

O valor que estava implicando no achatamento do conteudo.

[Wesley Rodrigues]

Ola Vinicius, valeu pelo help ai, um detalhe muito bobo e deixei passar, valeu mesmo... alterei o valor e o texto foi para o lado, mas o de cor laranja que seria o titulo acabou ficando abaixo e o texto acima, vc saberia me dizer o porque., uma vez que só alterei o valor...

 

Wesley Rodrigues
Email: wesle...@gmail.com
Site: www.bitmaisbit.com.br
Tel: (11) 8748-3369

2012/3/5 Vinicius Gomes <vinigom...@gmail.com>

[Vinicius Gomes]

Ajusta o tamanho do texto do paragrafo e limita seu tamanho...se puder joga por cima do conteudo de manda um float left, ah por acaso vc não usa nenhuma ferramenta de debug ou de assistencia em seus trabalhos?

[Wesley Rodrigues]

Ola Vinicius, eu não uso não, o que uso para meus trabalhos é apenas o DW, RapidCSS, Notepad++, o que vc e sugere? ah, reduzi o texto e deu certo...
Eu faço uso de vídeos aulas de CSS, Tableless, HTML, JavaScript dentre outras pra me ajudar nos pequenos projetos que faço, uma coisa que faz falta nessas vídeos são as explicações mais detalhadas tipo, o porque disso e daquilo, qual o significado desse código e tal, e outras informações eu busco na net mesmo, ai quando a coisa aperta eu recorro ao grupo porque meus trabalhos são todos em WP.

[Vinicius Gomes]

Entendi, você está no caminho..

http://www.w3schools.com/

http://dev.w3.org/html5/html-author/

http://www.w3.org/TR/CSS/

Esses sites podem ser sua referencia

[Piters Macri]

Olá Wesley.

Cola isso no arquivo style.css:

img.alignleft, div.alignleft {
float:left;
margin:0 1.5em 0.5em 0;
}
img.alignright, div.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter {
text-align:center;
margin:0 auto;
}

Isso corrige o bug do alinhamento.

Já usei em vários projetos e funciona perfeitamente.

Testa e nos dá retorno.

Att.

Piters Macri.

On 4 mar, 21:43, "Wesley Rodrigues" <wesleysa...@gmail.com> wrote:

[Jefferson Maes]

no texto use display: inline-flex;

[Rafael Martins]

Estou com um problema parecido, no meu caso eu gostaria de alinhar o texto um pouco mais para esquerda e não sei em que página eu edito esse troço, estou alinhando via plugin: Ultimate short code usando colunas segue o código dentro do WP

<img src="http://192.185.176.164/~kidsc230/wp-content/uploads/2014/09/teste-quem-somos.png" alt="Quem Somos" />

[su_column size="1/6"]

<img src="http://192.185.176.164/~kidsc230/wp-content/uploads/2014/08/spacer.jpg" alt="" />

[/su_column]

[su_column size="5/6" last=1]

<p style="text-align: justify;">O <strong>KidsClub</strong> é um Programa de Relacionamento que visa a interação entre pais e filhos, com atividades socioculturais que são elaboradas a fim de resgatar o pensamento lúdico, estimulando o desenvolvimento físico, cognitivo e psicossocial.</p>

<p style="text-align: justify;">Ao se associar, preenchendo completamente a ficha cadastral, a criança recebe uma carteirinha do Programa que lhe dá o direito de participar de atividades e interações, tanto nos empreendimentos quanto no website.</p>

<p style="text-align: justify;">Participando dessas atividades, a criança irá acumular pontos que posteriormente, poderão ser trocados por brindes para toda família.

A carteirinha será entregue no balcão do Programa que estará presente nos eventos.</p>

Traga o seu filho e participe!

[/su_column]

[su_spacer size="25"]

http://192.185.176.164/~kidsc230/quem-somos-3/

http://192.185.176.164/~kidsc230/atividades/

Em domingo, 4 de março de 2012 21h43min39s UTC-3, Wesley Rodrigues ® escreveu:

[Phelipp de Avila]

Boa tarde!

Rafael, fiz um teste aqui e parece vai dar certo:

Ultimate short code usando colunas segue o código dentro do WP

[su_column] <= coloque antes do titulo

[su_column size="5/6"]  <= coloque antes do titulo

<img src="http://192.185.176.164/~kidsc230/wp-content/uploads/2014/09/teste-quem-somos.png" alt="Quem Somos" />

[/su_column]  <= coloque depois do titulo

[su_column] <= tirei o size="1/6"

<img src="http://192.185.176.164/~kidsc230/wp-content/uploads/2014/08/spacer.jpg" alt="" />

[/su_column]

[su_column size="5/6"] <= tirei o last=1

Text Content

[/su_column]

[su_spacer size="25"]

Att.

Phelipp de Avila
Web Designer e Designer Gráfico
www.phelippdeavila.com

E-mail: phelipp...@gmail.com  //  MSN: con...@phelippdeavila.com
Skype: phelippdeavila  //  GoogleTalk: phelippdeavila
Twitter: twitter.com/phelippdeavila // Facebook: facebook.com/phelippdeavila

(32) 9197-7962 (TIM)

(22) 98165-5834 (TIM)

Ouça a Palavra de Deus, acesse: www.ouvindoabiblia.com.br a Bíblia lida 24h.

--
Regras do Grupo: http://bit.ly/1lOeYqs
 
Projeto WordPress: http://br.wordpress.org/

Temas: http://wordpress.org/extend/themes/
Plugins: http://wordpress.org/extend/plugins/

Grupo no Facebook: http://www.facebook.com/groups/wordpress.brasil/
---
Você recebeu essa mensagem porque está inscrito no grupo "WordPress Brasil Lista" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para wordpress-bras...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.