Div não estica

[DackAle 0]

E ae pessoal

 

Seguinte, comecei a fazer meu primeiro site em tableless e como é a primeira vez surgem dúvidas e problemas :P

 

Seguinte, tenho a div "conteudo" (bem no meio do site) aonde vai ficar o conteudo (jura? :P)

 

Dentro dela terei outras 3 divs para dividir os conteudo...

 

Até ai OK, alinhei as 3 bonitinho e talz... coloquei o conteudo na div "dir"... e bom... o conteudo que coloquei saiu da div "conteudo" e inclusive atropelou também a div "rodape" que fica baixo da div "conteudo"... passou por cima dela digamos... e não é isso que eu quero, queria que a div "dir" esticasse conforme fosse colocado o conteudo e consecutivamente a div "conteudo" esticasse para comportar a div dentro dela

 

Igual no esquema de tabela que faziamos, colocamos conteudo, estcica a tabela e se estive dentro de outra tale,a também estica a outra tabela :D

 

O código css é esse

 

#conteudo {

background:url(imagens/img_fundo_conteudo.jpg);

}

#esq {

position:absolute;

width:209px;

left:20px;

}

#centro {

position:absolute;

width:314px;

left:229px;

}

#dir {

position:absolute;

width:209px;

left:544px;

}

 

A página pode ser vista em http://www.infinitodigital.com.br/Teste/

 

Se alguem souber o erro que estou cometendo, ficarei muito grato se me explcar :D

 

Abraços e obrigado

[Guilherme Rambo 4]

#centro {position:absolute;width:314px;left:229px;height:auto;display:table;}

E na div do rodape ponha clear:both

 

 

PS: Estude mais, seu codigo ta muito confuso e, diagmos, incomum

 

[]'s

[Giovani 104]

E ai DackAle, uma pergunta, pq você tá usando tanto position:absolute?

você tá fazendo o código no braço?

 

Abraço!

[DackAle 0]

Sim, estou fazendo no braço, já que não é um layout liquido, preferi assim...Eu prefiro o position ao inves de float, porque tive muitos problemas com float em outra tentativa...Na verdade esse site é mais um teste, depois vou reestudando e descobrindo melhores formas, deixar o código mais limpo, site acessivel e etc...@Insider: Obrigado pela ajuda e critica, com certeza vou estudar bastante até usar todo o poder do CSS para deixar o código limpo :DMas não deu certo o que você citou :(Abraços

[Giovani 104]

Caso lhe interesse, e você ainda não tenha visto, no site do maujor tem alguns layout´s explicados e o #INSIDE# tab tem um tuto sobre layout, mas não lembro o link.

 

Grande abraço!

[DackAle 0]

opa vou olhar o do insider...o do maujor já dei uma boa olhada, mas na prática é bem diferente sahusauhas

[Guilherme Rambo 4]

Realmente, na prática é outra coisa. Então que tal um tuto prático?

 

http://www.web2ponto0.com.br/tutorial-layo...pleto-xhtmlcss/

 

[]'s

[DackAle 0]

Você é o phone gui do Orkut ? ahahhahahahaNossaaaaaaaaa nunca ia imaginar ahhahahaEntão gui, já fiz esse tutorial a um tempo atras e consegui reconstrui-lo e etc...Mas p*** m****, na pratica tableless é um saco, é comando que no FF funciona e no IE não, é margin e padding que um conta e outro não, é isso, é aquiloAté desanima... rsJá aprendi muita coisa,, mas tableless está me dando uma dor de cabeça a meses... rssssssssssMeu maior problema mesmo é mais isso da div comer a outra, da outra vez que treinei, fiz quase tudo, mas tive esse mesmo problma em outro layout :S:S:S:SMas valeuuuuuuuuuuuAbraços

[DackAle 0]

Meio que concertei usando float e colocando um elemento p depois da terceira coluna...Mas estou com um problema de alinhamento... o float aidicona algum tipo de espaçamento extra?Por exemplo, coloquei 20px de margem esquerda e ele pegou muito mais de 20px... rsssIsso é normal?

[Guilherme Rambo 4]

O IE duplica a margem que esta no mesmo lado do float, pra resolver, hack nele:

_display:inline;

[]'s

 

Mais um tuto, esse eh em video, quase 1h de duração, nele eu mostro como resolver alguns desses problemas comuns:

http://www.web2ponto0.com.br/video-2-imple...-de-layout-css/

 

[]'s

[DackAle 0]

Valei INSIDE Deu certinho, poderia explicar o por que deste hack? qual a função dele ?Queria agradecer, consegui fazer o site todo 100% funcional em todos os navegadores (Incluindo versões antigas do IE) e usei apenas esse hack em duas partes do site :)Agora próximo desafio é reconstruir o site, agora com uma semantica melhor, ver o que poderia retirar de código, ver se ficou alguma dúvida e etc.Mais 10 anos pego o jeito da coisa sahusahusahu muito obrigado pela ajuda GuiAbração

[Guilherme Rambo 4]

Deu certinho, poderia explicar o por que deste hack? qual a função dele ?

Qual o hack que você se refere?

[DackAle 0]

O IE duplica a margem que esta no mesmo lado do float, pra resolver, hack nele:

_display:inline;

deste :P

[Guilherme Rambo 4]

Este hack ninguem sabe porque funciona, simplesmente funciona, eh inexplicavel :)[]'s

[Paulo de Tarso F. M. 24]

Este hack ninguem sabe porque funciona, simplesmente funciona, eh inexplicavel :)

 

[]'s

O underline ( _ ) é um caracter q não faz parte da sintaxe do CSS... Mas por algum motivo estranho (mais um envolvendo o software da Microsoft) é q o IE reconhece o underline... Não q ele reconhece, ele meio q ignora o underline e dá continuidade na leitura do código...

 

Os browsers como FireFox, Opera, etc., eles, ao encontrar o underline, páram de ler ali e ignoram todo o bloco q vem depois dele até o próximo ponto-e-vírgula... Já o IE, como falei, ele ignora só o underline, e consegue compreender o q vem depois dele normalmente...

 

Ok? Um abraço!

[Guilherme Rambo 4]

Este hack ninguem sabe porque funciona, simplesmente funciona, eh inexplicavel :)

 

[]'s

O underline ( _ ) é um caracter q não faz parte da sintaxe do CSS... Mas por algum motivo estranho (mais um envolvendo o software da Microsoft) é q o IE reconhece o underline... Não q ele reconhece, ele meio q ignora o underline e dá continuidade na leitura do código...

 

Os browsers como FireFox, Opera, etc., eles, ao encontrar o underline, páram de ler ali e ignoram todo o bloco q vem depois dele até o próximo ponto-e-vírgula... Já o IE, como falei, ele ignora só o underline, e consegue compreender o q vem depois dele normalmente...

 

Ok? Um abraço!

 

Ninguem sabe porque DISPLAY:INLINE remove o problema da margin duplicada... essa do underline ja eh véia

 

[]'s

[DackAle 0]

exato :Pdo hack eu sei, queria saber a explicação lógico, por se usar o display:inline neste casoEu gosto de entender, para outros ocasiões, ctrl+c e ctrl+v sux :PMas obrigado galera