Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

desisto

problema com div com foto

Por , em Desenvolvimento frontend

Recommended Posts

desisto    0

desisto
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rasp    3

Rasp
Postado

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;

Compartilhar este post

Link para o post
Compartilhar em outros sites

desisto    0

desisto
Postado

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" />
texto texto texto 
</p></div>

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

desisto    0

desisto
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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 ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

WillianAndrade    0

WillianAndrade
Postado

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">

<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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

desisto    0

desisto
Postado

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

eu nao sei o que é gambiarar

 

 

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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 ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

desisto    0

desisto
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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;

é 100% funcional por enquanto, leia direitinho o tópico que lhe passei, ele não é uma gambiarra, é na verdade como usar estes elementos corretamente.

 

só isso pode ser considerado gambiarra:

height:auto !important;
min-height:200px;
height:200px;
MAS FUNCIONA CORRETAMENTE, e é bem limpa ;)

 

Tente fazer assim(como exemplo):

<style>
*{
margin:0;
padding:0;
}
div#div{
background:#fc0;
width:250px;
height:auto!important;
min-height:25px;
}
#div img{
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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito