Formatando...
Dependendo do navegador que você esteja utilizando: Internet Explorer, Firefox, Opera, etc...vai ocorrer que em cada um deles o menu (e algumas coisinhas mais) vê-se ligeiramente diferente. Em uns os vínculos aparecem no centro, em outros um pouco á direita e em outros um pouco á esquerda, você deve estar perguntando: E por que? Porque enquanto não for indicado o contrário, cada navegador usa uma configuração, isto é, um decide deixar uma margem de poucos píxels para cada elemento entretanto outros não; e também não coincidem os espaços, uns deixam um pouco mais outros um pouco menos. Dá a impressão que é impossível ver um site igual em todos os navegadores.
Os problemas desse tipo não podemos arrumar todos eles de uma vez como num passe de mágica, porém nesta lição começaremos a arrumar e deixaremos a página igual seja qual for o navegador utilizado. Está lição é muito importante pois configuraremos a página. Os navegadores não são padronizados, isto é, são como a casa da mãe Joana, cada um dá um valor inicial para as margens, contornos, etc... o que faremos será indicar em nossa Folha de Estilos que todos os elementos terão um valor zero para as margens e contornos. Mais tarde, mudaremos alguns mas agora para que tenha uma noção exata do como é isso aqui, deixaremos tudo a zero ou o que é igual: Formatar os estilos.
Para indicar que temos que aplicar a todos os elementos, colocar um asterisco primeiro e depois escrever a margem, o padding (padding é um outro tipo de margem que explicarei adiante) e o contorno a zero, introduzindo na primeira linha, o código:
* {margin:0px ; padding:0px ; border: 0px}
Escrever esta linha no estilo-geral.css, salvar e dar uma vista prévia na planilha, verá como agora o menu aparece centralizado, justamente centralizado, sem margens. Também desapareceram outras margens que rodeavam a capa “global”, etc...Temos o poder!!!rsrsrsrs...
Isso sim, não esqueça de colocar essa linha como a primeira de todas, não a coloque no meio, deve ser a primeira de todas, acima de todas no estilo-geral.css. Do contrário, como os navegadores vão lendo os estilos de cima para baixo, quando lê depois anula as margens e os contornos das capas que poderão, no caso, ser definidos antes dessa linha. Lembre-se sempre!!! Tem que ser o primeiro.
Vínculos no menu do lado esquerdo
Viu como todos os elementos do site de exemplo ficam centralizados? Sabe por que? Porque colocamos text-align:center na etiqueta body e como ela contém todo o site, então todos os elementos dele estão centralizados a não ser que...tánnan..tánnan..a não ser que indiquemos outra coisa a cada estilo concreto. E sabe por que? Porque temos o poder..rsrsrsrsrs...
Por exemplo, os vínculos do menu ficam muito melhor se forem alinhados a esquerda, verdade? Vamos arrumar isso agora mesmo! Abrir no Html-kit a Folha de Estilos e escrever text-align:left dentro das propriedades da capa menu, tal que, fique assim:
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left }
Também poderíamos por o text-align:left no estilo #menu li, ou não? o que você acha? Essa eu não vou responder aqui, pense e formule sua resposta, você mesmo, e envia-me pelo site em Mensagens, vamos ver se você acerta!!!
Com essa nova linha de código os vínculos aparecem à esquerda mas d+++++++++++++++++++mais, ficam encostados do lado esquerdo, seguiremos melhorando o aspecto do site no próximo tema.
Relax
Final da Copa do Mundo 1970
Menu
