Problemas com position:absolute e position:relative

>
E então tive que utilizar z-index, position:relative e position:absolute para deixar a logomarca em cima da imagem grande (que no futuro vai ser um slider)...

Sério? E precisava mesmo?

:seta: http://www.w3schools.com/cssref/pr_class_position.asp

:seta: http://www.w3schools.com/cssref/pr_pos_z-index.asp

E no seletor da div conteudo, põe:

overflow:hidden;

 :seta: [http://www.w3schools.com/cssref/pr_pos_overflow.asp](http://www.w3schools.com/cssref/pr_pos_overflow.asp)

Como assim? Não entendi...

Pelo o que eu vi eu fiz o que você me passou...

Colocou o overflow:hidden?

Sim, coloquei na div conteudo... Mas acontece que daí esconde uma parte do quadrado...

Eu quero algo que vá se ajustando, por exemplo, o quadrado tem 300px de altura, e o conteúdo tem menos... então o conteúdo deveria se ajustar aos 300px... e se eu quiser dar uns <br /> no conteudo, ele se ajusta, não somente "ocultar" o conteudo abaixo...

Obrigado

Ah, tenta com um height:100% então...

Meio complicado de entender

não funciona com o 100%...

É o seguinte...

Dá um F5 no site... Assim está certo né, o quadrado azul está abaixo do slider

No Chrome fica certinho, no IE a imagem do slider fica para baixo da logo e não embaixo. E no Firefox fica alinhado tudo errado.

Então usei o position:absolute na div do slider, e isso resolveu em todos os navegadores... Mas daí dá o problema com o quadrado azul. Pois ele fica com o ponto de referencia junto com o slider...

Quando você usa float e acontece isso, você usa o clear:both para ajustar.

Já tentei usar o clear:both em vários lugares e nada...

E quando usa o position? Tem como fazer algo parecido?

Conseguiu me entender? :S

>
No Chrome fica certinho, no IE a imagem do slider fica para baixo da logo e não embaixo. E no Firefox fica alinhado tudo errado.

Então é um GRANDE problema mesmo...

>
Mas daí dá o problema com o quadrado azul.

Qual é o problema com o quadrado azul?

Se postar como era pra ser fica melhor de entender, daí dá até pra refazer :)

Então, pra arrumar o problema do IE e do Firefox, eu coloquei a div slider (que é a div com a imagem grande) com position:absolute.

Resolvido esse problema.

Mas daí eu preciso colocar o conteúdo para baixo da div slider...

Imagina sem o quadrado azul... QUALQUER div que eu colocar embaixo da div slider, ela vai ficar alinhada com o topo da div slider.. e não logo abaixo, como é o normal...

Entendeu?

Alguém?

No Chrome fica assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.buthy.com.br/fisk/chrome.jpg&key=f1d6d695eb85b2ad981f90859ef954599d5ff4dff801f8c80498e718c7284cfb" alt="chrome.jpg" />

E é assim que deveria ficar em todos os navegadores...

Mas no IE e no Firefox fica assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.buthy.com.br/fisk/ie-firefox.jpg&key=5d041324cb4973260fe86936d7a7e75d4d3c060b0428fb10bfa2c4e4720b940e" alt="ie-firefox.jpg" />

CSS:

<style type="text/css">
@font-face {

 font-family: 'delta';
 src: url('fonts/delta.eot');
 src: url('fonts/delta.eot?#iefix') format('eot'),
 url('fonts/delta.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

 height:100%;
}

 background-color:#d5d5d5;
 font-family:"delta";
 background:url('images/background.png') no-repeat center top;
 color:#818181;
}

#base {
 position:relative;
 min-height:100%;
}
#base2 {
 min-height:100%;
 padding-bottom:285px;
}
#linha_cabecalho {
 width:100%;
 height:3px;
 background-color:#cf2026;
}
#linha_rodape {
 width:100%;
 height:3px;
 background-color:#10437a;
}
#cabecalho {
 width:1000px;
 height:130px;
 margin:0 auto;
}
#menu-esq {
 width:378px;
 float:left;
 background-color:#0C0;
 height:130px;
}
#logo {
 width:243px;
 height:160px;
 position:relative;
 z-index:999;
 float:left;
}
#menu-dir {
 width:378px;
 float:left;
 background-color:#099;
 height:130px;
}
#conteudo-topo {
 width:1000px;
 height:5px;
 margin:0 auto;
 margin-top:-20px;
 background:url('images/bg-conteudo-topo.png') no-repeat center;
}
#conteudo {
 width:1000px;
 margin:0 auto;
 background:url('images/bg-conteudo-meio.png') repeat-y center;
 min-height:500px;
}
#conteudo-rodape {
 width:1240px;
 height:45px;
 margin:0 auto;
 background:url('images/bg-conteudo-rodape.png') no-repeat center;
}
#slider {
 width:990px;
 height:227px;
 margin:0 auto;
 z-index:-999;
}

#sobre {
 margin:5px 0 0 5px;
 width:340px;
 height:300px;
 background:url('images/bg-sobre-a-fisk.png') no-repeat;
 overflow:hidden;
}
#base-rodape{
 width:100%;
 height:290px;
 position:absolute;
 bottom:0;
}
#rodape{
 width:1000px;
 margin:0 auto;
 padding-top:15px;
 color:#fff;
}

 color:#818181;
 text-decoration:none;
 font-weight:600;
 font-size:13px;
}
#contador {
 background:url('images/ico-visitantes.png') no-repeat left;
 padding-left:25px;
 height:16px;
 padding-top:8px;
}
.delta {
 font-size:12px;
 font-weight:bold;
 font-style:normal;
 color:#818181;
}
.separador-rodape {
 width:14px;
 height:263px;
 float:left;
 margin-right:12px;
 background:url('images/separador-rodape.png') no-repeat center top;
}
.rodape-item {
 background:url('images/marcador-rodape.png') no-repeat left;
 padding-left:10px;
 margin-bottom:4px;
}

 font-weight:400;
 font-size:13px;
 font-style:normal;
 color:#cf2026;
 padding:0 0 7px 0;
}

 font-weight:400;
 font-size:13px;
 font-style:normal;
 color:#10437a;
 padding:0 0 7px 0;
}
</style>

Tenta usando position absolute no logo

>
Tenta usando position absolute no logo

Daí o topo fica todo bagunçado... Não funcionou não...

>
Daí o topo fica todo bagunçado... Não funcionou não...

Ajustando o posicionamento correto das divs não tem como ficar bagunçado, pra isso serve o position absolute. Se puder colocar o código com o position absolute "bagunçado" pra eu dar uma olhada...

>
Ajustando o posicionamento correto das divs não tem como ficar bagunçado, pra isso serve o position absolute. Se puder colocar o código com o position absolute "bagunçado" pra eu dar uma olhada...

Coloquei no ar, já com o position:absolute na div logo...

http://www.buthy.com.br/fisk

Ali no topo eu estava usando float:left para dividir em 3 colunas (menu esquerda, logo, menu direita)...

Daí com o position:absolute bagunçou tudo, para ajeitar eu precisaria usar left, top, etc..?

Muito obrigado!

Usa float só nas divs do menu...a div logo você determina a posição através dos valores de left, right, etc...

>
Usa float só nas divs do menu...a div logo você determina a posição através dos valores de left, right, etc...

Certo cara...

Ficou assim:

#menu-esq {
width:378px;
float:left;
background-color:#0C0;
height:130px;
}
#logo {
width:243px;
height:160px;
position:absolute;
z-index:999;
margin-left:378px;
}
#menu-dir {
width:378px;
float:right;
background-color:#099;
height:130px;
position:absolute;
margin-left:621px;
}

Aparentemente está tudo certo... Em todos os navegadores...

Muito obrigado pela ajuda!

Algumas considerações pra melhorar o código: Quando você usa position absolute não precisa do float, ou o posicionamento é fixo (absolute) ou flutuante (float).

Recomendo não usar "margin-left", apenas "left" para posicionar o elemento com o position absolute.

Fui debugar no Firefox, mas o layout estava certo. Está igual em todos os navegadores, inclusive no IE.

Vê os Property Values aqui:

http://www.w3schools.com/cssref/pr_class_position.asp

Relative foi meio desnecessário... Trabalha em cima do absolute :thumbsup:

Ok, melhorei o código...

Quanto a usar left no lugar de margin-left, acho que não irá dar certo... Porque o left está pegando como ponto 0, o a resolucao 100%... sendo que deveria começar a contar do centro, e ficar dentro dos 1000px de largura...

#menu-esq {
width:378px;
background-color:#0C0;
height:130px;
position:absolute;
}
#logo {
width:243px;
height:160px;
position:absolute;
z-index:999;
margin-left:378px;
}
#menu-dir {
width:378px;
background-color:#099;
height:130px;
position:absolute;
margin-left:621px;
}

O position absolute calcula a posição pela div pai, desde q essa div tenha uma largura fixa, não tem pq da erro.

Tenta isso:

#menu-esq {
 width:378px;
 background-color:#0C0;
 height:130px;
 float:left;
}
#logo {
 width:243px;
 height:160px;
 position:absolute;
 z-index:999;
 left:378px;
}
#menu-dir {
 width:378px;
 background-color:#099;
 height:130px;
 float:right;
}

A propriedade position deve ser usada em casos específicos, quando realmente são necessárias, como a do logo por exemplo.

Como você ja conseguiu o resultado que você queria, fica a seu critério.

Então, esse seu código, a logo fica na metade do menu-esq

Sendo que a div pai da logo, menu-esq e menu-dir é a cabecalho que tem width:1000px;

valeuu!