5 replies to this topic

[Pedropauloalmeida]

E ae galera.

Tenho uma dúvida de iniciante para CSS

Se eu tenho uma div e dentro delas existem outras divs. Essas divs de dentro possuem alturas diferentes.
Mas tudo bem. Com position: absolute eu consigo posicionar elas exatamente ocmo desejo.

Mas a div "mãe", a que contém essas divs, não fica do tamanho que deveria. Pra dizer a verdade, não fica de tamanho nenhum.

Ela simplesmente fica com "0px" de altura.

Quando eu vou no CSS e coloco uma altura fixa pra ela como height:30px aí posso ver, por exemplo sua cor de fundo.
Mas o que eu gostaria é que ela ficasse do tamanho que suas divs internas, a meu ver, fariam com que ela ficasse.

É como se a "caixa" que contém os objetos não "estufasse" com seu conteúdo. Como isso funciona exatamente ? Vou ter que fazer um javascript para tratar isso ? Não tem como deixar a altura de uma div automática para o tamanho de seu conteúdo ?

Quando eu faço uma div e vou inserindo texto, ela vai aumentando o bottom automaticamente. Mas quando uso divs dentro isso não acontece.

Alguma sugestão ou correção ?


Abraços.

pp

[Kadu DG]

cara, não tem um lugar pra ver?
eu não entendi nada :$

[JurisCode]

eu entendi, mas a tag position: absolute esvazia o conteúdo da tabela ou camada que contém a layer em position: absolute.

no meu site eu usei algumas layers em position: absolute e relative, tive que setar o tamanho manualmente em todas

essa layer só vai "estufar" se vc colocar algum conteúdo fora de alguma subordinação com position: absolute.

entre uma layer e outra escreva alguma coisa que vc vai ver

[Pedropauloalmeida]

É isso aí JurisCode. Obrigado pela resposta. As divs dentro da div "main" tem que ser position:relative para significarem um espaço dentro da div "main".

Considerando uma div "main" com duas divs dentro, "conteudo1" e "conteudo", eu coloquei position:relative para as divs "conteudo1" e "conteudo2" e elas "estufaram" a div "main". Mas a div "conteudo2" deveria ficar ao lado da div "conteudo1" e usei então float:left para a div conteudo1. No firefox funciona. No IE não.

Float não funciona no IE ? E, se não funciona, existe uma alternativa?



Agora o conteúdo do que estou trabalhando:

CSS:

@charset "utf-8";/* Resetando valores default *//* =INITIAL    v2.1, by Faruk Ates - www.kurafire.net   Addendum by Robert Nyman - www.robertnyman.com *//* Neutralize styling:    Elements we want to clean out entirely: */html, body, form, fieldset {	margin: 0;	padding: 0;	font: 100%/120% Verdana, Arial, Helvetica, sans-serif;}/* Neutralize styling:    Elements with a vertical margin: */h1, h2, h3, h4, h5, h6, p, pre,blockquote, ul, ol, dl, address {	margin: 1em 0;	padding: 0;}/* Apply left margin:   Only to the few elements that need it: */li, dd, blockquote {	margin-left: 1em;}/* Miscellaneous conveniences: */form label {	cursor: pointer;}fieldset {	border: none;}/* Form field text-scaling */input, select, textarea {	font-size: 100%;}/* CSS DESLIZANTES */body {border:0px;background:#3f3f3f;}div {	background-color:      #fff;	padding:		    0px;	margin-bottom:		auto;	position:		     absolute;	top:			       0px;}div.topFlashMenu { 	border:			       0px;	background:		    #cecece;	width:				780px;	height:				186px;}div.mainStyle {	width:				780px;	height:				auto;	top:				186px;	background:			#fff;}div.logoStyle {	position:			relative;	width:				265px;	height:				166px;	background-color:	#FF0000;	background-image:	url(../imgs/logo.jpg);	float:				left;	}div.animaStyle {	position:			relative;	width:				515px;	height:				166px;	margin-left:		266px;	background:			#009966}div.subtitleStyle {	width:				400px;	height:				20px;	margin-left:		263px;	margin-top:			187px;	background-image:	url(../imgs/home_subtitle.jpg);	padding-left:		26px;	padding-top:		6px;	float:				left;	border:#FF0000;	z-index:1000;	}div.thumbStyle {	width:				76px;	height:				101px;	margin-left:		695px;	margin-top:			23px;	background-image:	url(../imgs/thumb.jpg);	position:			relative;	float:right;}div.textoOqueStyle {	position:			relative;	width:				420px;	height:				auto;	margin-left:		263px;	padding-left: 		5px;	background:			#FF0000;	margin-top:50px;}/*TEXTOS*/.subtitulo_txt {	font-family:		Verdana, Arial, Helvetica, sans-serif;	font-size:			11px;	color:				#f5bd00;}p {	font-family:		Verdana, Arial, Helvetica, sans-serif;	font-size:			11px;	color:				#4a5655;}

e HTML:

<!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>:: Deslizantes ::</title><link rel="stylesheet" type="text/css" media="screen" href="css/deslizantes.css" />&lt;script language="javascript">AC_FL_RunContent = 0;</script>&lt;script src="js/AC_RunActiveContent.js" language="javascript"></script></head><body><!-- Menu em Flash - Topo da página --><div id="menu" class="topFlashMenu">	Div do menu em flash. O Flash tem uma dimensão de 780px(w) x 186px(h).	Ok. O menu fica bem posicionado e alinhado com o topo da página.   </div><!-- Div de todo conteúdo abaixo do menu --><div id="main" class="mainStyle">	<div id="logo" class="logoStyle">Div do logo Aqui está inserida uma imagem de logotipo de 265 x 166px. Ok.</div>    	            <div id="animaHome" class="animaStyle">   			Div animação. Aqui uma animação em flash 512 x 166.    <!-- fim div anima -->    </div>                	<!-- subtitulo do texto -->    <div id="subtitulo" class="subtitleStyle"><span class="subtitulo_txt">O que é Arquivo Deslizante</span></div>           <!-- thumb de foto produto -->        <div id="thumb" class="thumbStyle"></div>        <!-- texto de conteúdo -->    <div id="textoOque" class="textoOqueStyle">Nullam et enim ac eros tempor congue. Morbi egestas eros eget odio facilisis fringilla. Cras nisl purus, iaculis non, sollicitudin ac, lacinia eu, sapien. Suspendisse sit amet elit laoreet nisi venenatis pretium. Integer sollicitudin.       	</p>       </div>     	<!-- fim div main --></div></body></html>

PS: logo vou subir isso no server e ficará mais fácil de visualizar.

Abraços.

pp

[Alex Hiroshi]

Float funciona no IE sim, o problema é a largura das divs. Quando o conteúdo é maior, ele quebra a linha, por isso no IE uma das divs foi para baixo. Diminua alguns pixels que isso será resolvido.

[Mochii]

Acho que estou com o mesmo problema!

Quando preciso de duas colunas faço uma DIV (Div1) e dentro dela mais outras 2 DIVs (Div2 e Div3)

Quando a Div3 fica mais comprida que a Div2 o fundo Div1 aparece normal, agora quando tenho q por a Div2 mais comprida que a Div3, o fundo naum aparece

<style type="text/css">
<!--
#div1 {
	float: left;
	width: 700px;
	background-color: #FF0000;
}
#div2 {
	background-color: #33CCFF;
	float: left;
	width: 350px;
}
#div3 {
	float: left;
	width: 350px;
	background-color: #FFFF33;
}
-->
</style>




<div id="div1">
  <div id="div2">
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
  </div>
  
  <div id="div3">
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
  </div>
</div>

Quero saber oq tenho que colocar, ou onde estou errando!

Obrigado


Editado>

Tentei usar Relative, nesse exemplo deu certo, porém no site q estou fazendo não deu, talvez por ter grande quantidade de divs
E creio q sabendo fazer o mais simples e o porq isso acontece, posso resolver o meu problema!!

Editado2 >

Esqueci de mandar imagem em anexo

Attached Files

•  Div2Maior.JPG   11.69KB   5 downloads
•  Div3Maior.JPG   12.75KB   4 downloads

Edição feita por: Mochii, 27/05/2008, 17:43.