Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Não tenho ideia nem lembro se vi um tutorial que ensinasse isso..
Quero que fique assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img185.imageshack.us/img185/6293/img1v.png&key=26b7802150dd5a50b23e9b4945b786a9f8df7d21b8106f9b8c8fd738101c10ba" alt="Imagem Postada" />
Mas só consigo deixar assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img545.imageshack.us/img545/958/87097290.png&key=de88befabaf39ce76872346c0c652c7c68838adeac4e6ff7031882d3efaba334" alt="Imagem Postada" />
<html>
<head>
<style> width:400px;
height:250px;
border:1px solid black;
} float:left;
}
#img {
float:right;
width:100px;
height:100px;
}
</style>
<body>
<div>
<h1>Título</h1>
<p>akljdf ak dfkja fjdasl faklsdj faklmcak mcoak jcklas jdcklamd kcamsdkl caklsd cakmdsckla dcma kl kldaj mk kc dakm kkcmdakl cmklda ckakld cmkladakl cmldak al calal</p>
<div id="img"></div>
</div>
</body>
</html>Comofaz?
Edit
Consegui resolver colocando o div dentro do <p>...
Mas... Isso é certo?
É melhor usar <img src...> ou <div> com background-image no css?
Lembrando que o DTD que vou usar é o HTML 4.01 Strict
Pela leitura visual do seu layout, a imagem vem logo na seqüência do título. Testa invertendo a ordem, colocando a <img> antes do <p>.
Pode usar <img> mesmo. Ela serve pra isso, não tem o porque de não usar... ;)Fala Compadre!
Seguinte... você pode fazer exatamente como a turma já postou acima...ou pode fazer assim, para facilitar a sua vida:
Você cria, uma classe que aplique um float na imagem.. algo assim:
.imagemFloatEsquerda {
float:right;
display:inline; /*Pro IE não dar pau*/
}<h1>Título></h1>
<span><img src="sua-imagem.jpg" alt="Sua imagem" title="Sua imagem" class="imagemFloatEsquerda" /></span>
<p>texto</p>Ae vlw galera! A melhor solução que encontrei é colocar antes do <p> mesmo!
[Resolvido]
Edit
Surgiu outro probleminha, como faço pra div maior englobar a imagem com float? Resolvi colocando um display:table;
Está certo?
Por cima...
Poderia definir um tamanho para o "h1" e "p" e utilizar o "float:left" apenas no "p" e o "float:right" na imagem.
Att.