[Resolvido] centrar dentro da div mae

[razs 0]

tenho este pequeno banner na div header que queria centrar mas nao funciona no ie.

no firefox funciona na perfeição mas no ie nao a maneira dele sair da esquerda

 

Alguma ideia?

 

#header_general {
width: 100%;
background:#fff;
}

#header {
margin-left:0 auto;
margin-right:0 auto;
clear: both;
width: 480px;
height: 100px;
padding: 0 10px;
background: url(../images/header.jpg) no-repeat;

[CarlosMarx 4]

Primeiro, você não pode declarar

margin-left: 0 auto;

. margin-left - define a margem esquerda e a mesma não pode ser 0 e auto ao mesmo tempo;

 

O correto seria

margin: 0 auto;

margin - maneira abreviada para todas as margens, podendo ser delcarada como:

margin: top/bottom left/right;

ou

margin: top right bottom left;

 

Então o código correto para a div header seria:

#header {
       margin:0 auto;
       clear: both;
       width: 480px;
       height: 100px;
       padding: 0 10px;
       background: url(../images/header.jpg) no-repeat;
}

 

e para o IE precisamos usar um artifício (hack) acrescentando text-align: center a nossa div header_general:

#header_general {
       width: 100%;
       background:#fff;
       text-align: center;
}

 

Obs: Funciona inclusive no IE6.

[razs 0]

obrigado mas nesse caso o pequeno butao que tenho dentro do header_general tambem vai para o centro e preciso que ele fique na esquerda.

[CarlosMarx 4]

Bom aí já é outra questão, a questão do tópico creio que estaria resolvida. Mas o principio é o mesmo, recomendo você a dar uma lida nesse artigo do Maujor Centralizar horizontalmente uma página na tela. Se ainda assim não conseguir resolver, posta o restante do código que fica mais fácil por que aqui, o enunciado da questão funcionou perfeitamente.

 

Dá pra conferir aqui: Clique aqui para ver a imagem

[razs 0]

Sim funciona bem, o problema e mesmo a outra imagem.

 

Vou ver o artigo e ja digo algo.

 

Obrigado

 

nao estou a conseguir, alguma sujestao?

 

body {
text-align:center;
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #707b84;
background: #3e464d;
}


#header_general {
       width: 100%;
       background:#fff;
       text-align: left;
}

#header {

margin:0 auto;
       clear: both;
       width: 480px;
       height: 100px;
       padding: 0 10px;
       background: url(../images/header.jpg) no-repeat;


}

[CarlosMarx 4]

Posta o código do HTML bem como o CSS para os botões e demais conteúdos do "header" para poder ter noção real do que vai ser alinhado a direita e a esquerda.

[razs 0]

Consegui, pus o butao na div ddddd

 

 

#header_general {
       width: 100%;
       background:#fff;
       text-align: center;
}

#dddddd {float:left;background:#fff;}

#header {
	margin:0 auto;
       clear: both;
       width: 480px;
       height: 100px;
       padding: 0 10px;
       background: url(../images/header.jpg) no-repeat;
}

[CarlosMarx 4]

Aew garoto. Com esforço e dedicação dá pra conseguir. Qualquer dúvida estamos por aqui.

[razs 0]

Obrigado ;)