Dando prosseguimento ao tutorial começado aqui, hoje veremos como centralizar as benditas div's no pior browser atualmente existente, o Internet Explorer 6.
Pior não porque é da Microsoft, mas porque ele é largamente utilizado ainda e foi uma das únicas coisas que a Microsoft não obrigou os usuários a instalar, mas enfim, ao que interessa.
Existe um defeito muito chato no IE6 onde ele não reconhece o valor "auto" para as propriedades do CSS, no IE7 esse problema foi corrigido. A maneira mais prática e simples de centralizar uma div é usar:
<div style="margin: 0 auto;" ></div>
Acontece que o no IE6 você deverá alterar o código html pra poder contornar o erro, e aí damos o nosso primeiro passo rumo aos famosos "css hacks", que servem pra contornar problemas encontrados em browsers diferentes, uma vez que cada browser tem uma especificação distinta dos outros pra renderizar o CSS.
O código pra centralizar uma div no CSS no IE6 segue:
<div style="text-align:center">
<div style="text-align:left"></div>
</div>
Usar apenas o center no text-align não resolve o problema, por isso você precisa criar uma div dentro de outra div. A div que que fica na parte interna é tratada como texto pelo IE6, e por isso ela é centralizada, mas isso nos traz um outro problema, que todo o texto que estiver dentro da div interna será centralizado, e a não ser que você queira isso, temos de adicionar na div interna o valor left no text-align, dessa forma nossa div fica centralizada, mas o texto não.
Esse método não estraga a exibição do Firefox ou do Opera, mas você precisa usar o método que mostrei previamente (com o margin), confira:
<html>
<head>
<style type="text/css">
<!--
.div1{
/* largura da div */
width: 400px;
/* altura da div */
height: 400px;
/* azul */
background-color: #0066FF;
/* centraliza no firefox, opera etc.... */
margin: 0 auto;
}
.div2{
/* verde */
background-color: #CCFF00;
/* centraliza a div3 */
text-align: center;
}
.div3{
/* largura da div */
width: 100px;
/* altura da div */
height: 100px;
/* roxo */
background-color: #CC33FF;
/* centraliza no firefox, opera etc.... */
margin: 0 auto;
/* descomente o código abaixo, salve e veja */
/*text-align: left;*/
}
-->
</style>
</head>
<body>
<div class="div1">margin:0 auto; Funciona em todos menos no internet explorer 6</div>
<div class="div2">
<div class="div3">Funciona em todos</div>
</div>
</body>
</html>
Copie o código acima, salve e teste. Você verá que o texto que fica na div3 estará centralizado, pra corrigir esse problema caso você não queira manter assim, você deve descomentar a seguinte linha do código css:
/*text-align: left*/
o código deve ficar assim
text-align: left;
Salve e teste, sua página deverá ficar assim.
Sugiro que você altere e faça várias alterações pra ir entendendo bem o CSS, caso já não conheça, saber posicionar as divs está ligado diretamente a entender de CSS.
Por hoje é isso, até a próxima.
Nenhum comentário:
Postar um comentário