Posicionamento de texto entre div's

andrealoisio · Fevereiro 12, 2008

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:

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.

MartinsV · Fevereiro 12, 2008

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

andrealoisio · Fevereiro 12, 2008

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/

MartinsV · Fevereiro 12, 2008

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)

andrealoisio · Fevereiro 12, 2008

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

MartinsV · Fevereiro 12, 2008

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

andrealoisio · Fevereiro 12, 2008

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.

MartinsV · Fevereiro 12, 2008

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!

andrealoisio · Fevereiro 12, 2008

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

brcontainer · Fevereiro 13, 2008

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>

andrealoisio · Fevereiro 14, 2008

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.

brcontainer · Fevereiro 15, 2008

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>

programador php · Fevereiro 15, 2008

coloca na div descricao margin-left: 100px;

Arquivado

Posicionamento de texto entre div's

Recommended Posts

andrealoisio 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

MartinsV 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andrealoisio 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

MartinsV 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andrealoisio 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

MartinsV 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andrealoisio 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

MartinsV 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andrealoisio 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

andrealoisio 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

programador php 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Fóruns

Tempo Real

Informação importante