Ir para conteúdo

Arquivado

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

Kay_

[Resolvido] Problema com floats

Por , em Desenvolvimento frontend

Recommended Posts

Kay_    0

Kay_
Postado

Galera, eu tava fazendo o layout, e depois de quase todo pronto, agora que eu fui em dar conta que a propriedade float, esta realmente flutuando, ou seja, ficando em cima da outra div. E isso está me atrapalhando.

 

Como resolver o problema abaixo: Quando voces verem aí o codigo aí no browser, vai ter 4 divs. 2 estaram flutuando 1 para a esquerda e a outra para a direita dentro da div azul, só que essa div azul irá servir como conteudo, no caso quando eu coloco o conteudo(div branca), na div do conteudo(div preta), ela fica por tras da div flutuando.

 

Aí o codigo:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

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

div {
	border: red solid thin;
}

#black {
	background-color: black;
	width: 200px;
	height: 50px;
	float: right;
}

#green {
	background-color: green;
	width: 200px;
	height: 50px;
	float: left;
}

#geral {
	width: 960px;
	height: 800px;
	margin: 0px auto;
	background-color: yellow;
}

#blue {
	background-color: blue;
	height: 300px;
}


</style>
</head>
<body>
<div id="geral">
	<div id="green"></div>
	<div id="black"></div>
	<div id="blue"><div style="background-color: white; width: 120px; height: 60px;"></div></div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Adicione um clear:both no elemento que está após o flutuado..

<div id="blue"><div style="background-color: white; width: 120px; height: 60px; clear: both;"></div></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kay_    0

Kay_
Postado

Opa povo, vlws aí pelas respostas, mais já consegui resolver aqui, Ow William, acho que você intendeu meio errado, esse clear: both não ia funcionar aqui. Eu queria tipo fazer o seguinte, que a div azul, ficasse ao lado da div verde e da preta, ou seja, seria tipo uma div de conteudo, ficando ao lado dos dois menus laterais. Porem, essa div azul estava ocupando todo o espaço(960px), e a div verde e preta estava em cima da azul. Logo, dessa forma quando eu adicionasse uma div dentro da div conteudo(div azul), essa div ia tomar como referencia o topo esquerdo da div azul(div pai), se localizando abaixo da div verde(quando eu falo abaixo, eu tou falando por tras da div verde, a div verde ia ta cobrindo).

 

Aí para arrumar isso eu deixei a div verde com float: left / a div azul com float: left / e a div preta com float: right!!

 

Vlws aí povo.

 

 

Deixa eu aproveitar para tirar uma dúvida. Existe alguma outra forma, de você especificar qual div irá ficar por cima e qual por baixo, sem ser por z-index. A propriedade z-index só pode declarar, se o elemento estiver com position: absolute ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

z-index; só funciona se o elemento tiver position: relative ou absolute;

 

'cima e embaixo', que você diz.. é em relação ao eixo-z mesmo? (perpendicular à tela)

se for, só com z-index mesmo, para garantir que funcione bem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kay_    0

Kay_
Postado

Sim william, é perpendicular a tela. Hum beleza vlws aí ;)

 

Cara eu tenho uma duvida, não sei se deve postar nessa seção de web standards. Mais a dúvida é a seguinte:

 

Imagens png sao interpretadas no o ie6? Se não existe algum hack que tem 100% de certeza de que as imagens png seram interpretadas? Pois preciso de formato de imagem que tenha como recurso transparência. E quando eu salvo como .gif, sai muito serrilhado a borda. Por isso preciso da png.

 

Vlwss

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tenta usar essa solução aqui:

http://forum.imasters.com.br/index.php?/topic/325686-png-transparent-no-ie6-e-ie5-solucao-definitiva/

 

Eu notei um bug com ela, qndo os elementos que vamos aplicar possuem positions... mas é raro dar novidades.

Fora isso, existem alguns arquivos .htc que resolvem esse problema de transparência dos PNGs para o IE6

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