Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
opa
sera que alguem pod eme ajudar a fazer uma div com foto alinhada na esquerda e o texto na direita?
eu esqueci como faz e nao consigo de jeito nenhum
[]s
>
opa
sera que alguem pod eme ajudar a fazer uma div com foto alinhada na esquerda e o texto na direita?
eu esqueci como faz e nao consigo de jeito nenhum
[]s
Fala Desisto,
Cara você pode fazer assim:
/ CSS /
div#imagemcomtexto {
width: 50px;
height: 100px;
padding-left: 50px;
float: left;
display: inline-block;
background: url(images/sua_imagem_aqui.jpg) no-repeat;
}/ HTML /
<div id="imagemcomtexto">
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
</div>
Ai você vê o tamanho da sua imagem, e do texto e calcula o tamanho que vai ficar a div, lembrando que o **padding** é onde você vai espaçar para o texto entrar a direita, então se sua imagem tem 50px de largura;opa
valeu aos 2
1000 posts, que beleza heim :)
eu to recem nascido aqui ainda hehehe
seguinte...
a imagem nao pode ser como fundo pois é linkada e é do anuncio da empresa
to tentando fazer assim:
div.xx {margin:0 20px 0 20px; height:auto}
div.xx img{ float:left}
div.xx p{font:normal 1em/2em Verdana, Arial; color:#666; background:#f8f8f8; padding:5px;}
<div class="DescAcomodacao"><p>
<img src="teste.jpg" />acontece que a div com float na imagem, nao acompanha o tamanho da foto e sim do texto
se o texto ficar com 50px e a imagem tiver 100, o backgroundfica na metade da imagem
ela nao estica a div, fica por cima
mais alguma dica?
[]s
Sobre o float:; é só da uma olhada nos artigos(ja tem solução para esse problema):
http://forum.imasters.com.br/index.php?showtopic=261803
falow abraço
Tem que pesquisar no fórum, tem bastante coisa respondida.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
a solucao do float, infelizmente é uma gambiarra...
to tentando deixar o css o mais "natural" possivel pois to testando em 9 navegadores, entao como a maioria que to testando eu nao conheco bem, posso fazer uma gambiarra pra funcionar no IE e acaba travando em outro :(
acabei definindo o tamanho da div
como elas serao pra exibir apenas a miniatura, optei pela definicao de tamanho mesmo
obrigado a todos pela ajuda :)
[]s
desisto, quem te falou que usar o float é gambiarra? Desde quando isso foi considerado gambiarra?
Pesquise sobre as css, sobre HTML e (x)HTML antes de fazer qualquer afirmação.
Aqui no próprio fórum tem o seguinte link: Div pai não acompanha a altura dos filhos que estão com float. Como fazer para que acompanhe
mas o link que lhe passei não é gambiarra é bem natural na verdade, o clear:both; elimina o efeito float:;
isso é natural e na verdade é a maneira mais correta ;)
ta na mão cara, como a imagem é dinâmica, declaramos apenas as dimensões dela no css
a imagem teste que foi utilizada é de 200x150
versão online >> AQUI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Texto alinhado a imagem</title>
<style type="text/css">
* {margin:0; padding:0;list-style:none;}
#wrapper {
width:776px;
margin:0 auto;
}
#menu {
width:150px;
float:left;
background-color:#f0f0f0;
}
#content {
width:600px;
float:right;
}
#content img.imgNoticia {
width:200px;
height:150px;
border:1px solid #000;
padding:5px;
margin:5px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div id="content">
<img src="teste.jpg" class="imgNoticia" alt="Imagem" />
<h3>There are many variations of passages of Lorem Ipsum available</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>
</div>
</body>
</html>>
desisto, quem te falou que usar o float é gambiarra? Desde quando isso foi considerado gambiarra?
Pesquise sobre as css, sobre HTML e (x)HTML antes de fazer qualquer afirmação.
Aqui no próprio fórum tem o seguinte link: Div pai não acompanha a altura dos filhos que estão com float. Como fazer para que acompanhe
que arrogancia é essa?
existe uma forma correta de se programar e essa forma deveria ser interpretada igualmente em todos navegadores, ie, ff, opera, avant...
quando uma forma correta é interpretada erroneamente pelo ie e temos que usar de outros atributos desnecessario, para enganar o navegador, é considerado gambiarra sim
acho que você deve ler o que é gambiarra antes de falar das minhas afirmações
Silver
eu nao falei que gambiarra esta errado, muito pelo contrario
quem nunca usou uma gambiarra pra corrigir o ie que atire a primeira pedra :)
o que eu disse foi que eu testo em muitos navegadores, no caso do IE eu ja conheco os bugs, e o que pode corrigir no IE pode estragar em outro
esse é o meu medo, nao conheco os bugs dos outros navegadores ainda
mas fica trank que nao estou te recriminando nao, ok?
Willian, valeu pelo codigo, vou dar uma olhada mais tarde pq agora nao to nem conseguindo mais ler
e vamos manter a ideia do topico se quiserem ainda pois nao to afim de discussão
[]s a todos
MAs desisto isso NÃO É UMA GAMBIARRA :huh: (hehehe)
é na verdade a maneira correta para todos navegadores que usam CSS2 é como estruturamos o layout ^^
Quanto ao que o Giovani falou, ele não foi arrogante (desculpa comentar isso) ele só está falando que você
entendeu mal as coisas, e por isso lhe falou para pesquisar ;)
acredite você está quase no caminho, se você ler minha tutotial vai entender que na verdade ela serve é para evitar gambiarras ;)
desisto, me desculpe, mas não fui, nem quis ser, arrogante. Só fiquei assustado, pois float para mim (e para várias pessoas) não é gambiarra.
Até hoje nunca li que era errado trabalhar com float. Se você tem alguma referência, por favor, passe para gente, vai ser de grande valia para todos.
Você olhou o link que postei na minha última, e assustada, resposta?
E sobre a "discussão", saiba que se isso acontecer serei o primeiro a interferir.
silver, nao precisa se desculpar por comentar
eu comentei justamente pra resolver o mau entendido http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
tempo é dinheiro, discussão nao da grana :)
bom, as vezes as coisas escritas acabam tendo sentido diferente das faladas...
se você ler novamente o que eu havia escrito em cima, nao disse em momento nenhum que float é gambiarra, por isso nao entendi o que você quis dizer
mas deixa quieto, assunto esquecido
o que eu disse foi que a SOLUCAO do topico que você postou era uma gambiarra. nao escrevi que flot é gambiarra
vamos la, vou tentar explicar melhor o que to tentando dizer
eu uso basicamente o IE 5 ao 7, ff e opera; os outros sao pra testes
height:auto !important;
height:_50px
e outros que nem faco ideia, sao usados pra corrigir os bugs do IE, certo?
eu sei que esses 2 exemplos funcionam no ie e ff de forma iguais sem erro, ate ai tudo bem, todos concordamos
o problema é o seguinte, se eu aplicar em um navegador X, e ele interpretar esses codigos, o layout ja vai ficar diferente
eu nao conheco os bugs dos outros navegadores, nao conheco as interpretacoes que eles darao aos erros do ie
cada mes aparece um navegador diferente na estatistica, ai vou la, baixo e testo
se eu colocar height:_50px e no navegador X interpretar isso, eu vou ter problemas, pois vou ter que criar hacks para esse navegador tb
deu pra entender o que to falando?
por isso evito ao maximo essas formas "paleativas" pra corrigir o IE, o problema é que a gente descobre os bugs quando da pau
[]s
mas então é isso mesmo que eu quiz dizer aquilo(O TOPICO QUE LHE PASSEI) não é gambiarra e sim como é solução mais correta, é como usar FLOAT e CLEAR para fazer o efeito que você deseja.
quanto ao efeito de altura para funcionar no IE opera FF:
height:auto !important;
min-height:200px;
height:200px;só isso pode ser considerado gambiarra:
height:auto !important;
min-height:200px;Tente fazer assim(como exemplo):
<style>
*{
margin:0;
padding:0;
}background:#fc0;
width:250px;
height:auto!important;
min-height:25px;
}float:left;
width:100px;
height:100px;
}
</style>
<div id="div">
<img src="">
<p>teste teste teste teste teste teste teste teste teste </p>
<p>teste teste teste teste teste teste teste teste teste </p>
<p>teste teste teste teste teste teste teste teste teste </p>
<p>teste teste teste teste teste teste teste teste teste </p>
<p>teste teste teste teste teste teste teste teste teste </p>
<p>teste teste teste teste teste teste teste teste teste </p>
</div>
Bom Dia!
Confere este tópico aqui:
http://forum.imasters.com.br/index.php...a+foto+esquerda
Talvés possa te ajudar... Pesquise sobre a propriedade float aqui no f´roum que irá achar um conteúdo que pode ser util.
Caso a dúvida persista retorne e post. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Até Mais.
PS: Meu Post de número 1.000 \o/ http://forum.imasters.com.br/public/style_emoticons/default/clap.gif