, porque ela é transparente por padrão. Então, a primeira coisa que nós vamos fazer é colorir o fundo da div de vermelho, para nos dar um indicador do que estamos fazendo: #page-container background: red; }
Você deve ver algo como isto através do comprimento da p ágina do seu navegador:
Em primeiro lugar devemos atribuir uma largura de 760px para estadiv. #page-container { width: 760px; background: red; }
Recarregue a página no seu navegador para ver a regra sendo aplicada. No próximo passo vamos centralizar esta div. Isto é feito atribuindo suas margens para auto. Quando as margens esquerda e direita são atribuídas para auto, elas vão se igualar em ambos os lados e a div vai ficar no centro do contêiner. #page-container { width: 760px; margin: auto; background: red; }
Agora você deve ter um bloco vermelho de 760px de largura, centralizado e com os dizeres “Hello World.” dentro. Mas ele está situado a 8px de distância do topo e lados do navegador. Isto acontece porque as tags html e body tem margens e/ou alinhamento padrões em quase todos os navegadores. Então nós precisamos escrever uma regra CSS para resetar as margens e alinhamentos das tags html e body para zero. Adicione essa regra bem no topo do seu arquivo css: html, body { margin: 0; padding: 0; }
Uma vírgula entre os seletores CSS significa “ou”, então, aqui a regra será aplicada à tag html ou à tag body. Já que ambas existem na página, será aplicada a ambas. Maravilha, agora nosso bloco está do jeito que deveria estar. Note que quanto mais conteúdo é adicionado à esta div, ela vai automaticamente modificar sua altura para acomodar o conteúdo que é colocado dentro. Vamos lá. 5. Os Elementos principais
Nós precisamos adicionar 5 div’s, todas com id’s individuais que descrevem sua finalidade. Estas divs correspondem às áreas do design que nós identificamos na parte 2. Troque o texto Hello World. pelas div’s abaixo. Nós vamos inserir texto dentro das div’s somente para facilitar a identificação visual quando visualizarmos a página.
Main Nav
Content
Sua página deve ficar assim:
Sem CSS as div’s serão arranjadas do topo para baixo, uma após a outra, na mesma ordem que estão no código. Isto é comumente referido como o “fluxo” do documento. Bem, vamos então utilizar a informação que temos para fazer nossas div’s ficarem do tamanho correto. Remova o fundo vermelho da #page-container, e adicione uma nova regra para #main-nav. Mude o fundo da #main-nav para vermelho para que possamos vê-la, e atribua sua altura para 50px: #page-container { width: 760px; margin: auto; } #main-nav { background: red; height: 50px; }
Note que nós não especificamos a largura da div. Isto por que, por padrão, a div vai se esticar até preencher seu contêiner-pai, que neste caso, é nosso div #page-container que foi configurado para 760px de largura. Faça a mesma coisa para a div cabeçalho (header), utilizando a altura que usamos no primeiro passo. Use a cor azul para o fundo.
#header { background: blue; height: 150px; }
Já que estamos aqui, vamos configurar o rodapé (footer). Use a cor laranja para o fundo. Lembre-se de que quando escrever sua folha-de-estilos, você pode agrupar seus estilos. Então todos os estilos do cabeçalho (header) poderiam vir juntos. Todos os estilos do rodapé (footer) poderiam estar juntos, e os estilos de navegação poderiam estar juntos. Eu também acho que estruturar a folha-de-estilos similar à ordem do HTML ajuda bastante, assim sendo header fica próximo ao topo, footer ao final. #footer { background: orange; height: 66px; }
Agora as próximas 2 div’s são ligeiramente diferentes. Sua altura é dependente do conteúdo que vai dentro delas, portanto não vamos atribuir sua altura. Vamos pintá-las de verde-escuro e verde. Coloque as novas regras entre as regras header e footer na folha-de-estilos. Fica mais fácil encontrá-las, uma vez que a folha-de-estilo está ficando maior. #header { background: blue; height: 150px; } #sidebar-a { background: darkgreen; } #content { background: green; } #footer { background: orange; height: 66px; }
Se tudo correu bem, você deve ter uma página que se p arece com isso:
6. Floats
Floats (flutuadores) pode ser um conceito enganoso para fazer você perder a cabeça. Basicamente um float é um elemento que é alinhado contra os lados esquerdo ou direito do seu contêiner. ( para maiores detalhes, leia maxdesigns in depth introduction to floats. (em inglês).
No caso deste website, nós vamos fazer flutuar ( float) nossa div#sidebar-a à direita, com a largura de 280px. Adicione o seguinte à sua CSS: #sidebar-a { float: right; width: 280px; background: darkgreen; }
Você agora fez flutuar com sucesso sua primeira div, e você agora deve ter uma página que se parece com isso:
Somente para o propósito de testes, substitua o texto do conteúdo dadiv para o seguinte:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
Note que o texto rola no conteúdo da div flutuante, como visto abaixo:
Mas isto não é o que nós queremos. Nós queremos que o conteúdo dadiv seja distribuído através da div sidebar, a qual tem seu lado direito contra o lado esquerdo da barra lateral.
Um jeito fácil de conseguir isto num layout flutuante como esse é colocar uma margem direita na nossa div content que tenha a mesma largura de nossa barra lateral, nesse caso 280px. Isto vai empurrar o canto direito do conteúdo fora do canto direito do page-container. #content { margin-right: 280px; background: green; }
Ótimo, nós quase conseguimos fazer nosso layout flutuante funcionar. Mas há uma coisa a mais que devemos considerar… o que acontece se a div sidebar ficar mais alta que a div content? Vamos ver. Copie e cole este texto na div sidebar:
Isto não é o que queremos, afinal. A razão do rodapé não ter se movido pra baixo é porque a sidebar está “flutuada” à direita. Explicação: Por padrão, qualquer elemento flutuante não empurrará para baixo elementos que estejam abaixo deles. Isto por que elementos flutuantes não são considerados parte do “fluxo” do documento. É como se eles estivessem em uma outra camada “flutuando” acima dos outros elementos, e por causa disso, não podem afetar suas posições. E o que nós podemos fazer para contornar este problema? Introduzir a propriedade clear da CSS. Adicione isto à sua folha-de-estilos: #footer { clear: both; background: orange;
height: 66px; }
Quando um elemento tem sua propriedade clear atribuída, se ele entrar em contato com um elemento flutuante, ele é colocado exatamente abaixo de onde o flutuante termina. Você pode especificar se ele é afetado somente por flutuadores esquerdos ou direitos, neste caso nós poderíamos utilizar tanto right ou both. Nós vamos utilizar clear: both somente por segurança.
7. Estrutura adicional • • • •
Links para navegação Cabeçalhos (Cabeçalho do Site e os cabeçalhos do conteúdo) Conteúdo Rodapé informativo (informação de copyright, créditos, e navegação alternativa)
Agora que nós temos nossas divs de layout base nos devidos lugares, podemos adicionar o restante da estrutura que vai ser a “cara” desse website. O fundamental que ainda precisamos adicionar ainda são: Ao implementar essas coisas sem quebrar o layout da página, vamos criar uma pequena classe muito útil, chamada hidden. Adicione isto perto do topo da sua folha-de-estilos, depois da definição da tag body: .hidden { display: none; }
Isto significa agora que podemos atribuir a qualquer elemento no site com tag hidden e ele não será exibido logo de cara. Isto vai nos facilitar agora, portanto, você pode esquecê-la por um momento. Vamos falar sobre cabeçalhos Cabeçalhos num documento HTML são definidos pelas tags
até em ordem de importância no documento. Por exemplo: para o nome do website, para os cabeçalhos principais (ex.: nome da página), para cabeçalhos secundários, etc… Nós vamos adicionar um dentro da nossa div Header e atribuir o nome da companhia, Enlighten Designs, neste caso.
Enlighten Designs
Se você recarregar a página, notará que Enlighten Designs aparece em letras grandes dentro do cabeçalho, mas há também agora muito espaço em branco ao redor do cabeçalho. Isto é causado pelas margens padrões das tags . Então necessitamos cortar a margem e seu preenchimento dessa forma: h1 { margin: 0; padding: 0; }
Agora vamos adicionar a navegação. Os prós e contras de como a navegação vai funcionar podem ser um tanto complicados e serão discutidos em detalhes posteriormente em sua própria seção. A navegação será estruturada como lista de definição () com id’s individuais relevantes a cada termo de navegação com o uso da tag (- ). Estes itens de navegação terão dentro de si, links para nossas seções principais. Se isto parecer confuso, adicione somente este código à sua div main-nav:
Nota: Muitas pessoas usam listas não-ordenadas para navegação, mas para este simples nível de navegação resolvi usar listas de definição por se mostrarem mais fáceis de funcionar no IE. O IE tem alguns bugs de CSS irritantes com listas não-ordenadas. Mas com pequenos ajustes, uma lista não-ordenada pode fazer a mesma coisa facilmente. É questão de preferência, creio. Em termos fáceis para entender, a age como um contêiner, as- ‘s são identificadores únicos para cada item de navegação e os links… são links. Nós vamos usar id’s únicos mais tarde quando viermos a fazer o “look” da navegação como ele deve ser, com suas belas imagens de “rollover”. Só que mais t arde. Se você recarregar a página, vai notar que ela parece um tanto feia, então por ora, vamos esconder a navegação que adicionamos com a classe hidden que construímos anteriormente.
“E como num passe de mágica, tudo se transformou…” Agora vamos passar para o rodapé porque é relativamente fácil. Há duas partes no rodapé: a informação de copyright e os créditos na esquerda e a navegação alternativa do site na direita. Nós queremos que a navegação alternativa flutue à direita, como fizemos com a barra lateral e o conteúdo, então vamos colocar isso no primeiro div. Em teoria você poderia fazer as div’s flutuarem não importasse onde elas estivessem no código, mas erros no IE tornam isso difícil, então agora, qualquer item flutuante deve vir primeiro na ordem do código.
Posicione em uma div com uma id única como esta:
Abaixo dessa div, vamos acrescentar a marca de copyright e os créditos.
E agora o rodapé está pronto. Para ter certeza de que seu site está indo bem, ele deve se parecer com isto:
Movendo dentro da área de conteúdo principal, vamos adicionar o conteúdo. Estou pegando o conteúdo do design diretamente do passo 2. Use as tags para os cabeçalhos “About” e “Contact Us”. Coloque os parágrafos em tags
, e use
para a quebra de linhas.
About
More contact information...
Atualize a visualização da sua página. Você vai notar que há mais de um espaço em branco “pulando” ao redor da div de conteúdo. Isto acontece por causa das margens padrão nas t ags e
. Necessitamos diminuir as
margens e o espaçamento. Porém, nós não queremos fazer isto para cada simples tag de parágrafo ou cabeçalho secundário que estará no website. Para fazer isto, necessitamos usar seletores CSS “filhos”. Todos os elementos em HTML tem um relacionamento “filho, pai”. Se a “tag a” estiver dentro da “tag b”, então a tag b é filha da tag a. No código acima, nossas tags
e nossas tags
são ambas filhas da div #content. Se quisermos selecionar os elementos filhos de um pai específico, nós separamos eles com um espaço, como no exemplo abaixo: #content h2 { margin: 0; padding: 0; } #content p { margin: 0; padding: 0; }
Então as regras acima dizem para o navegador aplicar estes estilos SOMENTE para as tags
e para aqueles que são elementos filhos dadiv #content. Na próxima parte faremos o visual do texto parecer um pouco melhor. 8. Alguns estilos básicos de texto
Ó céus! Você está cansado de olhar aquelas terríveis cores de fundo ou o quê?! Liberte-se delas. Acabe com todos, exceto para a navegação, em vermelho. Isto vai parecer um pouco melhor, mas o texto ainda fica horrível. Vamos atribuir uma família de fontes global, cor e tamanho para usar como uma base legal. Os atributos de fonte que atribuímos no corpo serão automaticamente herdados para qualquer outro texto no site, a não ser que sejam especificamente sobrescritos com outro estilo. Crie a nova regra CSS antes da classe “hidden”, perto do topo da folha de estilos: body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; background: #ffffff; }
O conteúdo acima já é auto-explicativo. Se tudo está de acordo como planejado, você deve ver algo como isto:
O que isto necessita é algum espaçamento para separar cada um daqueles blocos de conteúdo. De acordo com o design, o vazio abaixo dos cabeçalhos de conteúdo é aproximadamente 15px, e os vazios abaixo de cada parágrafo estão na faixa dos 15px. Então vamos juntar aquelas duas regras CSS que criamos anteriormente e aplicar regras de “padding-bottom” abaixo: #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; }
Nós também necessitamos de 25px de espaçamento ao redor de todo o conteúdo do div, e todo o espaçamento do div, dando a eles algum espaço para respirar. Esta parte DEVERIA ser fácil. Na teoria, você somente deveria atribuirpadding: 25px; nas divs, mas infelizmente, devido a problemas no Internet Explorer, não podemos fazer isto. O problema do IE é descrito em detalhes aqui. Há dois possíveis caminhos para lidar com este problema: um envolve a escrita de alguns truques de CSS para esconder certas regras CSS de um navegador, enquanto as exibe em outro, p orque o espaçamento é algo que usamos muito, nós vamos fazer o truque do outro jeito. O outro jeito é inserir um div adicional dentro dos divs que queremos que sejam espaçados e atribuir suas classes para “padding”. Padding é a única coisa que será aplicada à estas divs espaçadas. A razão disto funcionar é porque as divs espaçadas não tem um comprimento atribuído. Como regra, tente não adicionar espaçamento e um comprimento estático ou altura no mesmo elemento.
Faça o mesmo para a div de conteúdo. Agora na folha de estilos, nós vamos criar duas novas regras, exibidas abaixo em verde:
#sidebar-a { float: right; width: 280px; } #sidebar-a .padding { padding: 25px; } #content { margin-right: 280px; } #content .padding { padding: 25px; }
Usando o mesmo método anterior, vamos selecionar somente os elementos com uma class="padding" que são filhas das divs#sidebar-a ou #content. O espaço vertical entre as linhas do texto no conteúdo do texto e no texto da sidebar devem ser largos, de acordo com o rascunho do gráfico. Em CSS, o espaçamento vertical é atribuído pelo atributo line-height. Vamos adicionar uma altura da linha de 18px: #sidebar-a { float: right; width: 280px; line-height: 18px; } #content { margin-right: 280px; line-height: 18px; }
À frente, os cabeçalhos que adicionamos parecem horríveis. Porque a fonte que eles estavam usando não é uma fonte para web, nós vamos ter de substituí-los por imagens. Crie duas imagens como as exibidas abaixo e salveas no diretório /images/headings/.
Substitua o texto do cabeçalho por estas imagens mas, lembre-se de manter as tags ao redor das tags das imagens, e lembre-se de colocar o atributo alt nas imagens. O atributo alt é designado para exibir um texto alternativo à imagem, se um usuário está visualizando a página em um browser que não suporta imagens, ou desabilitou a exibição de imagens. Isto é útil também para scripts robôs de sites, por que eles não conseguem entender imagens. 
Nosso site já está começando a tomar forma. Depois disso, você deve enxergar algo como:
9. O Cabeçalho
Para implementar o cabeçalho, necessitamos obter a imagem de fundo aplicada ao div header, substitua o cabeçalho “Enlighten Designs” com uma logo gráfica e posicione-a no local correto, no cabeçalho (a barra cinza escuro à direita). Primeiro, crie duas imagens como as abaixo (ou copie estas mesmo):
/images/general/logo_enlighten.gif
/images/headers/about.jpg
A primeira parte é fácil. Atribua uma imagem de fundo na CSS utilizando o formato abaixo: #header { height: 150px; background: #db6d16 url(../images/headers/about.jpg); }
A propriedade background que acabamos de usar é atualmente uma propriedade reduzida que permite-nos especificar a cor de fundo, imagem, posição da imagem e como a imagem deve ser repetida, tudo em uma só linha. Nós atribuímos o fundo para usar a mesma sombra alaranjada como a usada pelo cabeçalho somente para que a página não pareça tão agradável se o usuário não tem a exibição de imagens habilitadas em seu navegador. Os caminhos para as imagens em seu arquivo CSS são relativos ao arquivo CSS, não à página HTML. Isto porque o ../ é necessário no caminho acima. Agora, substitua o texto “Enlighten Designs” com a imagem da logo. Novamente, lembre-se de manter a tag e escreva uma descrição no atributo alt.
Agora nós temos que posicioná-la corretamente onde ela deve estar. Vamos fazer isto flutuando a tag à direita, e então usar as propriedades margin-top e padding-right para obter a exata posição. Adicione o seguinte texto à regra em sua folha de estilos: h1 { margin: 0; padding: 0; float: right; margin-top: 57px; padding-right: 31px; }
A razão porque usamos padding-right ao invés de margin-right é porque as margens podem frequentemente disparar erros grosseiros no IE se utilizado em certos lugares. E o cabeçalho está pronto. 10. O Rodapé
Primeiro nós necessitamos fazer o visual do texto aparecer corretamente. O design usa a fonte Tahoma 10px para o texto, colorido de um cinza bem leve ( #c9c9c9). Eu tenho certeza que você pode desenhar isto por si mesmo, mas se quiser usar o copiar/colar: #footer { clear: both; height: 66px; font-family: Tahoma, Arial, Helvetica, Sans-serif; font-size: 10px; color: #c9c9c9; }
E para mudar a cor do link (e remover o sublinhado), adicionamos isto: #footer a { color: #c9c9c9; text-decoration: none; }
Mas os links necessitam de destaque algumas vezes, quando seu mouse estiver sobre eles. Então, vamos fazê-los mudar sua cor para laranja, quando o mouse estiver sobre eles:
#footer a:hover { color: #db6d16; }
Nós também tivemos de adicionar uma borda de 1 pixel na borda superior do div do rodapé, atribuir algum espaçamento, e fazer a altura da linha ficar em 18px (aumentando o espaçamento). Por estarmos atribuindo espaçamento no div do rodapé, nós teremos de remover a propriedade height para não disparar o bug espaçamento/comprimento/altura que mencionei anteriormente. Nós não necessitamos realmente de atribuir a altura neste div: #footer { clear: both; font-family: Tahoma, Arial, Helvetica, Sans-serif; font-size: 10px; color: #c9c9c9; border-top: 1px solid #efefef; padding: 13px 25px; line-height: 18px; }
A última coisa que deixamos para fazer é flutuar a navegação alternativa à direita. Note que elementos flutuantes devem ter um comprimento especificado para funcionar corretamente, então atribua o comprimento um ligeiramente maior do que a navegação atualmente necessita e atribua o alinhamento do texto à direita para que o texto se encaixe onde deveria estar. #footer #altnav { width: 350px; float: right; text-align: right; }
Tadá! Nós temos um rodapé. 11. A navegação (argh!)
Há muitos truques de CSS neste capítulo, e não é imperativo que você entenda exatamente o que cada parte da css faz, somente que você esteja pronto para modificar esta CSS para fazer o que você quer em outros websites, o que é basicamente a mudança de altura, comprimento e imagens. Porém eu vou dar o melhor de mim para explicar o código. Vamos começar pela parte fácil. Remova o fundo vermelho na CSS e exiba a navegação removendo a classe hidden na lista de definição. O método de “rollover” das imagens que vamos usar neste menu é uma solução 100% feita em CSS. A premissa básica por trás disso é posicionar os itens em uma lista de definição próxima uma da outra (lado a lado), esconder o texto delas, e usar CSS para trocar a imagem de fundo dependendo de qual estado o botão está (“rollover”, normal ou selecionado).
Para cada um dos 4 itens de navegação, necessitamos criar uma imagem como as exibidas acima. O primeiro terço da imagem é o estado normal, o segundo é o estado mouseover e o terceiro é o estado selecionado. O gif animado abaixo mostra como isto vai funcionar:
Espero que você tenha entendido como isto funciona, através do diagrama acima. Vamos fazer nossas 4 imagens de navegação. Salve-as em /images/nav/
Agora vou dar o melhor de mim para explicar a css por trás de tudo, bloco por bloco. Descubra comigo. Substitua sua regra #main-nav com o código abaixo: /* Main Navigation */ #main-nav { height: 50px; } #main-nav dl { margin: 0; padding: 0; }
Isto muda a altura da div main-nav para 50px e retira todas as margens das listas de dados. /* IE5 Mac Hack \*/ #main-nav { padding-left: 11px; } /*/ #main-nav { padding-left: 11px; overflow: hidden; } /* End Hack */
Isto é um truque que faz duas coisas: Atribui o espaçamento da esquerda, da main-nav para 11px (para que bata ligeiramente como é mostrado no design) e conserta um bug no IE5 para mac. #main-nav dt { float: left; }
Isto atribui a definição dos títulos (nossos contêineres de item de navegação individual) para flutuar à esquerda, o que os junta da esquerda para a direita, ao invés de um abaixo do outro.
#main-nav dt a { display: block; height: 0px !important; height /**/:50px; /* IE 5/Win hack */ padding: 50px 0 0 0; overflow: hidden; background-repeat: no-repeat; }
Atribui ao link a mesma dimensão que seu contêiner correspondente e esconde o texto usando a propriedade overflow. #main-nav dt a:hover { background-position: 0 -50px; }
Faz com que a posição do fundo se mova até 50px quando o cursor do mouse passa por cima de um link. #main-nav dt#about, #main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); } #main-nav dt#services, #main-nav dt#services a { width: 84px; background-image: url(../images/nav/services.gif); } #main-nav dt#portfolio, #main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); } #main-nav dt#contact, #main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }
Atribui o comprimento individual de cada item de navegação e o caminho para cada imagem. Agora se todas as nossas imagens estiverem nomeadas como acima e salvas em seus lugares corretos, sua navegação deve funcionar. A última coisa que necessitamos fazer para que a navegação funcione, é obter os estados dos botões selecionados para mostrá-los quando você estiver na página correspondente. Necessitamos adicionar algumas novas CSS e modificar algumas CSS existentes para concluir isto. Adicione a CSS abaixo ao restante de sua navegação CSS: body.about dt#about, body.about dt#about a, body.services dt#services, body.services dt#services a, body.portfolio dt#portfolio, body.portfolio dt#portfolio a, body.contact dt#contact, body.contact dt#contact a { background-position: 0 -100px; }
Este seletor CSS enorme checa qual classe a tag body tem e então atribui a posição da barra de navegação correta. então se você quisesse que a navbar about fosse selecionada, você atribuiria class="about" à tagbody. Vamos fazer isto agora:
Agora o problema que temos é que também queremos que a imagem do cabeçalho mude baseada em qual seção estamos visualizando. Então necessitamos modificar a regra #header como abaixo: body.about #header { height: 150px; background: #db6d16 url(../images/headers/about.jpg); }
Agora quando você criar páginas para suas outras seções, você só tem de modificar a classe do body de about para, por exemplo, contact, atribuir uma regra de CSS apontando para a imagem do cabeçalho correta e está pronto. 12. Fazendo funcionar no IE
Nota: Para seguir esta seção, você vai precisar instalar as “versões padrão do IE. Nestas estão truques não suportados em versões mais antigas do IE que você pode instalar junto com sua versão atual do IE. Vamos iniciar os truques com a criança problema atual, IE5. Abra seu navegador IE5. Há duas coisas que eu notei instantaneamente que estão erradas. A primeira é que a página não é centralizada como deveria ser, e a segunda é que o rodapé tem um problema de alinhamento estranho. O problema de alinhamento é bem conhecido, então vamos nos deter primeiramente neste. O IE 5 e o 5.5 não reconhecem a propriedade CSS margin: auto; como deveria ser. Para corrigir isto nós necessitamos usar a propriedadetext-align: center; no body, que vai centralizar o contêiner div. body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; text-align: center; }
Isto vai centralizar nosso contêiner div, mas vai centralizar também todo o texto dentro do div. Nós não queremos isto, então necessitamos sobrescrever o text-alignment dentro do contêiner div. #page-container { width: 760px; margin: auto; text-align: left; }
O que resolve o problema de centralização. Agora, o rodapé esquisito. Eu não consegui encontrar atualmente qualquer referência a este bug particular através de uma ráp ida pesquisa no google, então eu tentei imaginar um jeito de consertar isso. Eu pensei que o bug tinha algo a ver com o div altnav flutuante mas não pude identificar onde estava o problema exatamente. Então, eventualmente eu tentei colocar um divao redor da informação de copyright e que fez com que o bug desaparecesse.
Isto disparou alguns problemas de padding-top no rodapé, então eu removi o atributo padding-top: 13px; da regra #footer, e adicionei a ambas as div’s: #copyright e #altnav. #footer #altnav { clear: both; width: 350px; float: right; text-align: right; padding-top: 13px; } #footer #copyright { padding-top: 13px; }
Há um último bug do IE que pude verificar, e é quando você passa o cursor do mouse sobre item selecionado da navegação. Ele reverte o fundo para branco como se não fosse selecionado. Nós não queremos que o item selecionado mude quando o cursor do mouse estiver sobre ele. Se adicionarmos mais algumas poucas regras para nossa enorme regra que define a seleção da navegação, teremos nosso problema solucionado. body.about dt#about, body.about dt#about a, body.about dt#about a:hover, body.services dt#services, body.services dt#services a, body.services dt#services a:hover, body.portfolio dt#portfolio, body.portfolio dt#portfolio a, body.portfolio dt#portfolio a:hover, body.contact dt#contact, body.contact dt#contact a, body.contact dt#contact a:hover { background-position: 0 -100px; }
E agora está tudo certo. Espero que você tenha aprendido alguma coisa sobre layouts em CSS. Minha recomendação é que você procure mais sites especializados em CSS como os listados abaixo e repare em suas codificações HTML/CSS para ver como eles tem feito as coisas funcionarem. Em caso de dúvida, dê uma googlada. Sinta-se à vontade para sugerir modificações ou melhorias neste tutorial (diretamente com o autor, em inglês), ou pergunte por tutoriais em outros tópicos do site.
