Ir para conteúdo

POWERED BY:

Arquivado

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

Bergs

[Resolvido] posicionamento de div

Por , em Desenvolvimento frontend

Recommended Posts

Bergs    53

Bergs
Postado

Olá para todos estou com um pequeno problema com posicionamento de div, bem é o seguite,

 

Tenho um box simples no qual coloquei uma image e um texto até ai tudo bem posicionei

a imagem com o texto do lado tranquilo,no final do texto eu poderia colocar um link

normalmente, mas me surgiu a invenção de colocar este link no fundo do box no lado direito

dentro de uma div.

 

Aí vai o código.

<html>
<head>
<style type="text/css">
<!--
.lad_d{
       background: #669922;
padding: 10px;
z-index: 3;
text-align: left;
border: 1px solid #000;
margin-top: 10px;
width: 257px;
height: 140px;
}

.tex{
font-weight: bold;
font-size: 10px;
}


.go {
position: relative; 
bottom:0; 
right:0; 
z-index:1;
margin-top: 8px;    
margin-left: 45px;
background: #ffffff;
height: 20px;
width: 90px;

}
-->
</style>
</head>
<body>
<div class="lad_d">
	<img style="float: left; margin-right: 10px; width: 94px; height: 71px;" alt="" src=""/>
	<span class="tex">Titulo</span><br/><br/>
	Para entender como fun- cionam os acordes pre- cisamos 
	compreender a sua estrutura harmônica
	<div class="go">
	<a href="acordes.html">>>Ler Mais</a>
	</div>
</div>


<div class="lad_d">
	<img style="float: left; margin-right: 10px; width: 94px; height: 71px;" alt="" src=""/>
	<span class="tex">Titulo</span><br/><br/>
	Para entender como fun- cionam os acordes pre- cisamos 
	compreender a sua estrutura harmônica 
			compreender a sua estrutura harmônica
	<div class="go">
	<a href="acordes.html">>>Ler Mais</a>
	</div>
</div>

</body>
</html>

 

Usando o margin-left ou float: right; eu até consegui posicionar do lado direito , mas o margin-top

para posicionar no fundo até seria a solução, só que se eu usar dois boxs e este outro com texto maior

a div com o link não irá ficar no mesmo lugar. Tentei de tudo vi varios tutorias mas não obtive exito

Alguem saber como solucionar isto?

 

Desde já agradeço a todos fico no aguardo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

2Flex    1

2Flex
Postado

Bom Dia,

 

Amigo experimente este pequeno trecho modificado:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

	<head>
		<title>Teste</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	
	<body>

		<div class="lad_d">
			
				<img class="teste" alt="" src=""/>
				
				<span class="tex">Titulo</span><br /><br />
				
					Para entender como funcionam os acordes precisamos compreender a sua estrutura harmônica <br />
					Para entender como funcionam os acordes precisamos compreender a sua estrutura harmônica
				<div class="go">
					<a href="acordes.html">>>Ler Mais</a>
				</div>
			
		</div>

	</body>
	
</html>

CSS:

* {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.lad_d {
	background: #669922;
	padding: 10px;
    text-align: left;
	border: 1px solid #000;
	margin-top: 10px;
	width: 257px;
	height: auto;
	float: left;
}

.conteudo {
	height: auto;
	float: left;
}

.tex {
	font-weight: bold;
	font-size: 10px;
}


.go { 
	float: right;
	background: #fff;
	height: 20px;
	width: 90px;
	font-size: 14px;
}

.teste {
	float: left; 
	margin-right: 10px;
	width: 94px; 
	height: 71px;
}
Qualquer duvida apite :).

 

Cumprimentos

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

Bom dia amigos!

 

Reexplicando a minha dúvida ao Thiago Retorna:

 

Testando no Explore fica tudo beleza o box fica maior se adequando ao conteúdo,mas

no FireFox o problema aparece. BEM EU SÓ TESTEI NESTES DOIS.

 

e a modificação que o 2Flex fez minimizou o problema no FireFox, porque agora o div

com o link ficou um pouco fora do box.

 

Mesmo assim agradeço a dica do height: auto;. obrigado 2Flex

 

Quaquer melhora do código posta aí que eu

Vou continuar mexendo aqui Valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

Tentei enviar a imagem mas não consegui mas

O efeito é esse mesmo que você deve ter visto

quando colocou o float: right;.

O link no fundo do lado direito, colocando do jeito que o 2Flex disse minimiza o problema mas aparece outro

pois a div com o link sai um pouco do box.

 

O problema aparece só no FireFox. E eu que pensava que só o IE6 me daria dor de cabeça :wacko:

Compartilhar este post

Link para o post
Compartilhar em outros sites

2Flex    1

2Flex
Postado

Olá,

 

Deve de estar a existir um conflito qualquer, se você vir esse código que postei e colocar num ficheiro à parte fica como deve de ser, pelo menos no meu FF.

 

Cumprimentos,

Força com isso

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

Olá amigos!!!

 

Até que enfim consegui ver no FireFox tudo normal os códigos que o

2Flex postou estão corretos , eu não conseguia visualizar porque

eu tinha feito uma pequena mudança apenas tinha apagado

o float: left; da CSS .lad_d porque eu queria colocar mais boxs só que embaixo

 

E a solução para concluir o serviço é apenas colocar uma div pai com o mesmo

tamanho de width dos boxs para que eles fiquem um embaixo do outro e com o famoso link no

fundo do lado direito.

 

Html:

<html>
<head>
<link rel="stylesheet"type="text/css" href="css_.css" />

</head>
<body>
<div id="coluna">
<div class="lad_d">
		<img style="float: left; margin-right: 10px; width: 94px; height: 71px;" alt="" src=""/>
		<span class="tex">Titulo</span><br/><br/>
		Para entender como fun- cionam os acordes pre- cisamos 
		compreender a sua estrutura harmônica
		<div class="go">
		<a href="acordes.html">>>Ler Mais</a>
		</div>
	</div>
	
<div class="lad_d">
		<img style="float: left; margin-right: 10px; width: 94px; height: 71px;" alt="" src=""/>
		<span class="tex">Titulo</span><br/><br/>
		Para entender como fun- cionam os acordes pre- cisamos 
		compreender a sua estrutura harmônica 
				compreender a sua estrutura harmônica compreender a sua estrutura harmônicacompreender a sua estrutura harmônica
		<div class="go">
		<a href="acordes.html">>>Ler Mais</a>
		</div>
	</div>
</div>
</body>
</html>

CSS:

#coluna{
	width: 257;
}
.lad_d {        
	background: #669922;
	padding: 10px;    
	text-align: left;        
	border: 1px solid #000;        
	margin-top: 10px;        
	width: 257px;        
	height: auto;        
	float: left;
}

.tex {        
	font-weight: bold;
	font-size: 10px;
}
.go {         
	float: right;
	background: #fff;
	height: 20px;
	width: 90px; 
	font-size: 14px;
}
.teste {        
	float: left;
	margin-right: 10px;
	width: 94px;
	height: 71px;
}

Valeu 2Flex obrigado pela força. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

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