← HTML + CSS

DIVS - Footer fora do sítio...

Lida 3653 vezes

Offline

Thomato 
Membro
Mensagens 4125 Gostos 2
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Boa tarde...

Como é conhecido na praça pública, eu sou um noob em DIVS e CSS...

O CSS é este:
Código: [Seleccione]
  <style type="text/css">
* { padding: 0; margin: 0; }
body { padding: 10px; }
body,td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }
.header
{
width: 900px;
height: 13px;
background: url(images/header.png);
}
.middle
{
width: 900px;
background: url(images/mid.png);
}
.footer {
background:transparent url(images/footer.png) repeat scroll 0 0;
height:13px;
margin:0 auto;
width:900px;
text-align: center;
}
  </style>

O código da DIV é este:
Código: [Seleccione]
<div class="footer"></div>
Tudo fica centrado, excepto o Footer que fica do lado esquerdo no IE... No FF está bom! :s

Alguma solução?

[]'s
Offline

Diogo Pinto 
Administrador
Mensagens 4395 Gostos 368
Feedback +4

Troféus totais: 37
Trófeus: (Ver todos)
Avatar Search Level 6 Linux User Mobile User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Adiciona no CSS:

.clear {
clear:both;
}

Adiciona antes do footer:
<div class="clear"></div>
Offline

Thomato 
Membro
Mensagens 4125 Gostos 2
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Adiciona no CSS:

.clear {
clear:both;
}


Adiciona antes do footer:
<div class="clear"></div>

Não deu :S
Offline

Emanuel Santos 
Elite
Mensagens 848 Gostos 2
Feedback +25

Troféus totais: 25
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1

Experimenta envolveres isso num div e fazeres então ai

margin:0px auto;
Offline

Thomato 
Membro
Mensagens 4125 Gostos 2
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

O Mambley acabou de me resolver a situação de novo!

Obrigado mais uma vez ao Mambley! :D
Offline

Spread 
Membro
Mensagens 1433 Gostos 2
Troféus totais: 29
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

E a solução é?

Cumps 8)
Offline

Thomato 
Membro
Mensagens 4125 Gostos 2
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

E a solução é?

Cumps 8)

Também quero saber...

Eu fui estupido e coloquei o ficheiro antigo no servidor, que substitui-o o decente >_>
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

A solução mais rápida que achei na altura passou por:

body {text-align: center;} e depois na DIV que queremos centrar div {text-align: left; }

Cumprimentos
Offline

Thomato 
Membro
Mensagens 4125 Gostos 2
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

A solução mais rápida que achei na altura passou por:

body {text-align: center;} e depois na DIV que queremos centrar div {text-align: left; }

Cumprimentos

Só precisei da primeira :D

Obrigado de novo :D
Offline

spec 
Elite
Mensagens 989 Gostos 1
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

para centrar divs a solução mais normal é

#divcentrado {margin: 0 auto;}

mas varia de caso para caso, às vezes precisas ter em conta o posicionamento (absoluto ou relativo) e os floats... em 90% dos casos apenas, margin: 0 auto; funciona bem para centrar horizontalmente

text-align para centrar divs que apenas contem TEXTO é uma boa solução... se tiveres algo mais que texto já fica mal, é a chamada solução à sapateiro...


CSS é fácil é preciso é praticar... a mim faz-me lembrar LEGOS!!!



ainda sou do tempo do align:center; LOLOLOL (OMG estou tão velho)
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Spec:

o margin: 0 auto, já ele lá tinha, que inclusivé fui eu que coloquei, mas só funcionou no FF, Opera e Chrome, não me perguntes porque porque habitualmente funciona em todos.

A solução do text-align foi uma solução rápida que encontrei, certamente não é a melhor, mas resolveu o problema de forma rápida, que era o que ele queria e eu estava com pouco tempo para analisar melhor.
Offline

Thomato 
Membro
Mensagens 4125 Gostos 2
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Resolveu e está resolvido... Mas ao entrar nas notícias para ler a notícia completa volta a desalinhar :S

Quando lançar o site podem ver melhor
Offline

spec 
Elite
Mensagens 989 Gostos 1
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Spec:

o margin: 0 auto, já ele lá tinha, que inclusivé fui eu que coloquei, mas só funcionou no FF, Opera e Chrome, não me perguntes porque porque habitualmente funciona em todos.

A solução do text-align foi uma solução rápida que encontrei, certamente não é a melhor, mas resolveu o problema de forma rápida, que era o que ele queria e eu estava com pouco tempo para analisar melhor.

Se falhar no IE significa que muito provavelmente o código está BOM... se funcionar no IE normalmente significa que está uma salganhada...

podes tentar o margin-left:auto; e margin-right:auto; em vez do margin: o auto; é quase a mesma coisa e às vezes faz a diferença no IE

o IE dá muitas dores de cabeça... alinhamentos e posicionamentos no IE é doloroso... e transparências no IE6? uiui...
Offline

Thomato 
Membro
Mensagens 4125 Gostos 2
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

O problema já foi resolvido!

Estava um PHP include dentro das notícias a desalinhar quando se liam as notícias
:D
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Se falhar no IE significa que muito provavelmente o código está BOM... se funcionar no IE normalmente significa que está uma salganhada...

podes tentar o margin-left:auto; e margin-right:auto; em vez do margin: o auto; é quase a mesma coisa e às vezes faz a diferença no IE

o IE dá muitas dores de cabeça... alinhamentos e posicionamentos no IE é doloroso... e transparências no IE6? uiui...

O código não fui eu que o fiz, apenas dei uma ajuda a resolver um alinhamento, mas já disse ao Thomato para mudar aquilo que está uma autêntica salada russa :)

O IE é só chatices, pelo menos em grande parte dos projectos que fazemos há sempre regras especificas para o IE lolol...A transparência é uma das que mais chateia, mas com uma hack lá vai...