Problemas com position:absolute e position:relative

Buthy · Fevereiro 6, 2012

Entao galera, se puderem me dar uma ajuda...

O site é esse: http://www.buthy.com.br/fisk

O que fiz foi utilizar alguns códigos css para deixar o "rodapé sempre no rodapé"...

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)...

Daí tudo o que eu tento posicionar abaixo dessa div slider, fica atrás dela... não se alinha abaixo dela.

Agora está "funcionando", usei top para ajustar, mas acho que é meio que "gambiarra", e alem disso, a div conteudo não se ajusta ao conteúdo.

Se alguém souber algum jeito de resolver isso, agradeço.

Muito obrigado!

Até mais!

Diéssica · Fevereiro 6, 2012

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

Buthy · Fevereiro 6, 2012

Como assim? Não entendi...

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

Diéssica · Fevereiro 6, 2012

Colocou o overflow:hidden?

Buthy · Fevereiro 7, 2012

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

Diéssica · Fevereiro 7, 2012

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

Meio complicado de entender

Buthy · Fevereiro 7, 2012

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

Diéssica · Fevereiro 7, 2012

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 :)

Buthy · Fevereiro 8, 2012

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:

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

Mas no IE e no Firefox fica assim:

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;
}
html, body {
       height:100%;
}
body {
       background-color:#d5d5d5;
       font-family:"delta";
       background:url('images/background.png') no-repeat center top;
       color:#818181;
}
*html #base { height:100%; }
#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;
}
#slider img, #sobre, #novidades, #cursos {
       -moz-border-radius: 3px; /* Para Firefox */
       -webkit-border-radius: 3px; /*Para Safari e Chrome */
       border-radius: 3px; /* Para Opera 10.5+*/
}
#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;
}
#rodape a:visited, #rodape a:link, #rodape a:active, #rodape a:hover {
       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;
}
h1 {
       font-weight:400;
       font-size:13px;
       font-style:normal;
       color:#cf2026;
       padding:0 0 7px 0;
}
h2 {
       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...

Thiago Moraes · Fevereiro 8, 2012

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...

Buthy · Fevereiro 8, 2012

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!

Thiago Moraes · Fevereiro 8, 2012

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

Buthy · Fevereiro 8, 2012

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!

Thiago Moraes · Fevereiro 8, 2012

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.

Diéssica · Fevereiro 8, 2012

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:

Buthy · Fevereiro 8, 2012

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;
}

Thiago Moraes · Fevereiro 8, 2012

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.

Buthy · Fevereiro 8, 2012

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!

Arquivado

Problemas com position:absolute e position:relative

Recommended Posts

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Fóruns

Tempo Real