Ir para conteúdo

POWERED BY:

Arquivado

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

andrealoisio

Posicionamento de texto entre div's

Recommended Posts

Olá Pessoal, como vai?

 

Estou com o seguinte problema, tenho um div e dentro deste div tenho outros dois.

 

Gostaria de ter a direita um logo e a esquerda uma descrição, conforme a imagem abaixo:

 

Imagem Postada

 

Coloquei o div do logo como float: left para poder colocar o texto a direita, o problema é que quando o texto passa da altura do logo ele vai para baixo, como faço para que isso não aconteça?

 

Desde já muito obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

A div da descrição está dentro da div do logo? Se estiver, acho q é bom dividi-las, e colocar nas duas a propiedade "float: left"... Não sou expert mas acho q é isso...

 

você não teria o código, pra ajudar?

 

Abraços

(obs.: quando você disse "Gostaria de ter a direita um logo e a esquerda uma descrição, conforme a imagem abaixo:", você quis dizer ao contrário né? pq na imagem o logo q está na esquerda e a descrição na direita... só pra confirmar ;] )

Compartilhar este post


Link para o post
Compartilhar em outros sites

Isso amigo, o logo está em um div, e a descrição em outro. E realmente eu escrevi errado :D, queria o logo na esquerda e a descrição na direita

 

O Código agora tá assim:

 

CODE
<div style="border: 1px solid black; width: 500px;">

<div style="float: left">

<img src="http://forum.imasters.com.br/style_avatars/IPB_Community_Pack/Pink-sea.gif" >

</div>

<div>

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

</div>

</div>

Repare que depois que o texto passa a linha do logo ele começa a ficar embaixo do logo, eu gostaria que ele continuasse na mesma direção.

 

UPDATE: Coloquei no link http://andrealoisio.890m.com/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, para isso se usa o css... seria melhor em dois arquivos separados (o html e o css) mas eu vou lhe mostrar em apenas um:

 

(repare q eu mudei os "styles" das div's e coloquei-os no código css na tag "head" da pág, e dividi as div's em duas)

 

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<style>

#logo {
		border: 1px solid black;
		width: 20px;
		float: left;
		margin-right: 5px;
}

#descrição {
		float: left;
		border: 1px solid black;
}

</style>		 
</HEAD>

<BODY>


<div id="logo">		
<img src="http://forum.imasters.com.br/style_avatars/IPB_Community_Pack/Pink-sea.gif" >	
</div>	

<div id="descrição">
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />	
</div>


</BODY>
</HTML>

Veja se funciona

 

Se você não sabe sobre css, procure aqui no fórum msm alguns tutoriais e aulas, e se quiser uma explicação detalhada do codigo css me fala

 

Abraços

(Obs.: usar as tags com letras maiúsculas (HEAD, BODY, etc) é errado, mas o meu editor faz automaticamente e eu não mudei)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Até ai tudo bem, entendi certinho.

 

Agora só faltaria a borda em volta dos dois divs (conforme a figura).

 

Coloquei os divs #logo e #descricao dentro um novo div chamado #conteudo

 

Coloquei borda no div #conteudo, mas não funciona, deve ser por causa da propriedade float dos divs que estão dentro dele

 

Veja: http://andrealoisio.890m.com/

 

Muito obrigado pela sua ajuda

Compartilhar este post


Link para o post
Compartilhar em outros sites

você queria uma borda para o logo, uma para a descrição e outra para o "conteudo" (logo + descrição)?

 

Se for isso msm, seria assim:

 

<html>
<head>
<title>Untitled</title>
<style>

#conteudo {
		border: 3px solid blue;
		float:left;
		padding-bottom: 4px;
		background-color: #ADD8E6;
}

#logo {
		width: 20px;
		float: left;
		margin-right: 5px;
		margin-left: 2px;
		margin-top: 4px;
		border: 1px solid blue;
}

#descrição {
		float: left;
	 	border: 1px solid blue;
	 	margin: 5px 4px 4px 4px;
}

</style>		 
</head>

<body>

<div id="conteudo">

<div id="logo">		
<img src="http://forum.imasters.com.br/style_avatars/IPB_Community_Pack/Pink-sea.gif" >	
</div>	

<div id="descrição">
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />	
</div>

</div>

</body>
</html>
(aqui deu certo)

 

Eu mudei a cor das bordas para ficar parecido com a imagem... Mas o link q você passo não tá funcionando agora, depois eu vejo, parece q "o admin do 000webhost tá checando o conteudo do site"

 

Veja se é o q você quer,

 

Abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, é isso mesmo que eu queria,

porém não funciona no firefox

 

O mais próximo que eu cheguei foi isso http://andrealoisio.890m.com/divs01.html (já voltou) que funciona no IE.

 

Porém nem esse código que eu fiz, nem esse que você me passou funcionam no firefox.

 

Eu só consegui fazer funcionar nos dois navegadores usando tabelas, ou seja, nada webstandards, assim ó: http://andrealoisio.890m.com/divs02.html

 

Eu também não posso colocar o height fixo no div #conteudo pq a descrição vem do banco de dados e pode variar.

 

Esse tá dando trabalho hein.

 

Abração e obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ah, nd,q isso!!

 

Bom, aí eu já não sei... eu não tenho o firefox, então não dá pra eu tentar... mas eu vo dá uma olhada aqui, pensa um pouco e ver o q eu consigo...

 

Abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ah, nd,q isso!!

 

Bom, aí eu já não sei... eu não tenho o firefox, então não dá pra eu tentar... mas eu vo dá uma olhada aqui, pensa um pouco e ver o q eu consigo...

 

Abraços!

Valew fera.

 

Eu vou tentar resolver esse problema também, se encontrar a solução eu posto aqui.

 

Abraço

Compartilhar este post


Link para o post
Compartilhar em outros sites

trabalhar com margens execivas é meio complicado tipo de usar hacks

mas tah ae:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>

#conteudo {
		background: #ADD8E6;
		border: 2px solid #00f;
	width:769px;
	height:333px;
}

#logo {
		width: 150px;
	height:97px;
		float: left;
		margin: 29px 0 0 28px;
		*margin-left:15px;
		border: 1px solid blue;
}

#descrição {
	float: right;
	width:551px;
	height:289px;
		border: 1px solid #00f;
		margin: 27px 21px 0 0;
		*margin-right:12px;
}

</style>		
</head>

<body>

<div id="conteudo">

<div id="logo"></div>	

<div id="descrição">
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />		
descricao descricao descricao descricao descricao descricao<br />	
</div>

</div>

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Silverfox, obrigado pela tentativa.

 

O problema desse código é que eu não posso, fixar o height do div #descricao nem do #conteudo, pois a descricao vem do banco de dados e pode variar de tamanho.

 

Mas encontrei uma solução, na verdade é uma gambiarra, mas já é melhor do que usar tabela.

 

Vocês podem ver como ficou aqui: http://andrealoisio.890m.com/divs01.html

 

O que eu fiz foi colocar um div vazio, logo após os divs #logo e #descricao e colocar a propriedade "clear: left" nele, desse jeito a borda do div #conteudo vai se expandir até esse div, pq ele não tá com float.

 

A princípio essa foi a melhor solução para o caso, se alguém souber de algo mais "correto" fica em aberto ai.

 

Abraços a todos que me ajudaram.

Compartilhar este post


Link para o post
Compartilhar em outros sites

basta você criar uma plataforma um DIV que quebre o efeito float:

leia esse link para entender:

http://forum.imasters.com.br/index.php?showtopic=261803

 

lembre-se antes de perguntar procure no forum ;)

 

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled</title>

<style>

#plataforma{

clear:both;

height:1px;

overflow:hidden;

}

#conteudo {

background: #ADD8E6;

border: 2px solid #00f;

width:769px;

height:auto !important;

height:333px;

height:333px;

}

 

#logo {

width: 150px;

height:97px;

float: left;

margin: 29px 0 0 28px;

*margin-left:15px;

border: 1px solid blue;

}

 

#descrição {

float: right;

width:551px;

height:auto !important;

min-height:289px;

height:289px;

border: 1px solid #00f;

margin: 27px 21px 25px 0;

*margin-right:12px;

}

 

</style>

</head>

 

<body>

 

<div id="conteudo">

 

<div id="logo"></div>

 

<div id="descrição">

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

descricao descricao descricao descricao descricao descricao<br />

</div>

<div id="plataforma"></div>

</div>

 

</body>

</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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