Jump to content
Rodrigo Graça

Div fica cortada?

Recommended Posts

Rodrigo Graça

É o seguinte, estava aqui a editar um formulário de login que faz aquele efeito de "sliding" e acontece que quando a janela está em fullscreen esta tudo bem mas quando mudo para janela mais pequena que um X tamanho é cortada uma zona da div, como podem ver abaixo.

QQljU.png

Eu consegui fazer com que isso não acontece-se modificando a linha que se segue:

#toppanel {
    position: absolute;

para

#toppanel {
    position: relative;

Mas ai acontece outra coisa que está descrita em comentário que é o conteúdo da página vai para baixo o que não quero que aconteça.

Alguém tem alguma ideia de como resolver o problema do corte de outra maneira ou resolver este de o conteúdo ir para baixo?

Deixo aqui o código para que me possam ajudar.

http://hotfile.com/dl/132933439/64b8e49/2.rar.html

Share this post


Link to post
Share on other sites
KTachyon

Quando estás a desenvolver para a web, ajuda muito usar as potencialidades de alguns browsers que apresentam todas as propriedades de objectos, para conseguires perceber porque é que, por exemplo, a div sai cortada.

Se pegares no Chrome ou no Safari tens um inspector que te permite, não só, ver as propriedade, mas também assinalar o espaço das divs visualmente. Torna-se mais fácil de analisar o problema que olhar simplesmente para código.


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Share this post


Link to post
Share on other sites
Rodrigo Graça

@KTachyon

Hehe, isso estou farto de fazer! É muito mais prático isso é! Eu quase que programo lá, porque posso mudar valores, eliminar, etc etc tudo sem sair dali ou fazer F5.

EDIT: acontece o mesmo em todos os browsers mas maioria das vezes estou no chrome.

Share this post


Link to post
Share on other sites
Rodrigo Graça

@KTachyon

Embora já conhece-se a dica estive agora durante 30 minutos a usa-la tanto que achei a solução!

Desta vez programei mesmo lá, fui ao CSS criei uma div nova e comecei a fazer testes copiava e colava códigos CSS quase ao calhas nela até que de-repente já não cortava ai decidi ver se fazia o conteúdo ir para baixo e não fazia, depois foi só retirar um monte de atributos de CSS que estavam amais e descobrir quais estavam realmente a fazer aquele efeito.

Acabei com a seguinte solução, criei uma div que envolve-se a outra (toppanel) com 100% de tamanho (para ficar no ecrã todo e a outra centrar dentro dessa) e com (position: relative;) que ao não lhe especificar tamanho faz ficar fixa lá em cima e a outra tem o position: absolute; que faz deslizar dentro da outra sem empurrar o conteúdo para baixo.

Obrigado a todos pela ajuda.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.