Jump to content

Problema com margin


A.T
 Share

Go to solution Solved by mjamado,

Recommended Posts

Boas,

Estou a deparar-me com um problema que está, literalmente, a dar-me cabo dos nervos.

É assim:

Crio duas div's, uma dentro da outra:

<div id="1">
      <div id="2"></div>
</div>

Com o seguinte CSS:

#1 {
    height: 150px;
    width: auto;
}

#2 {
    height: 74px;
    width: 224px;
    margin-top: 50px;
}

e a pagina fica assim:

http://img251.imageshack.us/img251/4483/capturebw.jpg

Em vez de o margin "afastar" a segunda div 50 px dentro da primeira div, ele "afasta" 50px as duas div's e fico com um espaço enorme no inicio da pagina.

Espero ter sido claro, aguardo ajuda..

abraços.

Link to comment
Share on other sites

Tente padding-top: 50px; em vez de margin-top: 50px;

O padding é interior, a margin é exterior. O efeito não é o mesmo.

A.T, já testaste num browser? É que o preview do Dreamweaver... Acabei de testar numa página à pressão e fez o que era suposto...

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

A.T, já testaste num browser? É que o preview do Dreamweaver... Acabei de testar numa página à pressão e fez o que era suposto...

Ja tentei em 3 browsers diferentes.. FF, Chrome e IE.. todos o mesmo..

Vou reinstalar o EasyPHP e ver se o problema fica resolvido..

Link to comment
Share on other sites

Ja tentei em 3 browsers diferentes.. FF, Chrome e IE.. todos o mesmo..

Vou reinstalar o EasyPHP e ver se o problema fica resolvido..

Não vai ficar resolvido, porque não é um problema do PHP, ok? Isso é um problema de CSS.

Que mais estilos estão a afectar as divs, de forma global ou herdada? É isso que tens que ver...

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

Não vai ficar resolvido, porque não é um problema do PHP, ok? Isso é um problema de CSS.

Que mais estilos estão a afectar as divs, de forma global ou herdada? É isso que tens que ver...

A questão é que não há mais estilos a afectar as divs.. o que torna a situação mais problematica.

Link to comment
Share on other sites

A questão é que não há mais estilos a afectar as divs.. o que torna a situação mais problematica.

De certeza absoluta que há, directa ou indirectamente. Por acaso, apesar de não confiar no preview do DW, neste caso, até apresenta correctamente (testei agora). Tens aí outro gato, mas não é de nada que apresentaste até agora.

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

Em 11/08/2010 às 14:43, mjamado disse:

De certeza absoluta que há, directa ou indirectamente. Por acaso, apesar de não confiar no preview do DW, neste caso, até apresenta correctamente (testei agora). Tens aí outro gato, mas não é de nada que apresentaste até agora.

Não sei.. tenho isto:

<body style="padding:0; margin:0;">
<div style="background-color:#F00; height:200; width:auto">
	<div style="background-color:#03C; width:200; height:50; margin-top:50;"></div>
</div>
</body>
E dá isto:

http://img685.imageshack.us/img685/7476/captureyt.jpg

(O espaço branco continua ali, no topo da pagina)

Vou ver as definições do dreamweaver, pode ser que haja alguma coisa..

Link to comment
Share on other sites

Se só tens isso, é para admirar como é que vês alguma coisa... também depende do doctype que estás a usar, no XHTML 1.0 ou superior não vês mesmo nada...

Olha lá, as unidades são o quê, batatas? Tens que dizer que os tamanhos, as margens e tudo o mais, estão numa unidade, sejam pt, em ou px.

Espalha lá px por todos os width, height, padding e margin e vê se não fica logo a funcionar. Ah, e evita CSS inline, mas isso já é uma questão de boas práticas.

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

Se só tens isso, é para admirar como é que vês alguma coisa... também depende do doctype que estás a usar, no XHTML 1.0 ou superior não vês mesmo nada...

Olha lá, as unidades são o quê, batatas? Tens que dizer que os tamanhos, as margens e tudo o mais, estão numa unidade, sejam pt, em ou px.

Espalha lá px por todos os width, height, padding e margin e vê se não fica logo a funcionar. Ah, e evita CSS inline, mas isso já é uma questão de boas práticas.

Sorry mas fica na mesma..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body style="padding:0px; margin:0px;">
<div style="background-color:#F00; height:200px; width:auto">
	<div style=" background-color:#03C; width:200px; height:50px; margin-top:50px;"></div>
</div>
</body>
</html>

Com o firebug activado: http://img94.imageshack.us/img94/3780/capturekrp.jpg

Ja reinstalei o Dreamweaver e nada...

Link to comment
Share on other sites

  • Solution

Ja reinstalei o Dreamweaver e nada...

'Tá lá sossegado... tu gostas é de ter trabalho... 😁 É um problema de CSS, exclusivamente. Não vale a pena andar a desviar do problema principal.

Só tens que definir mais uma coisinha, que é o overflow do div de fora; colocas mais este estilo, e voilá: overflow: auto;

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

'Tá lá sossegado... tu gostas é de ter trabalho...  😁 É um problema de CSS, exclusivamente. Não vale a pena andar a desviar do problema principal.

Só tens que definir mais uma coisinha, que é o overflow do div de fora; colocas mais este estilo, e voilá: overflow: auto;

AHHH caraças era o overflow.. e eu a andar no w3schools a ver todas as propiedades  😁

Obrigadão Marco  👍

Já me sinto melhor 🙂😉

Link to comment
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
 Share

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