Uma largura fixa
Existem várias formas de proporcionar tamanho a um site. Para não enrolar e ir diretamente ao que interessa comentarei o imprescindível porque todas as discussões sobre esse tema foram superadas e o tempo deu a razão aos que em seu dia analisaram bem as coisas.
Portanto, podemos fazer que ocupe toda a tela do navegador do usuário seja qual seja seu tamanho, a tenha ou não maximizada (a janela...) ou outra opção é dar uma largura concreta de modo que os que tenham um monitor pequeno verão o site maior, em proporção aos que tenham uma tela maior que o verão menor...
Em ambos casos têm sua parte boa e sua parte ruim. No primeiro caso, quando ocupar toda a tela do navegador é possível que a web desmorone se o usuário mudar o tamanho dessa janela. Os elementos grandes não cabem e deslocam o conteúdo seguinte para baixo, produzindo um verdadeiro caos no site. O bom é que aproveitaria todo o espaço, quando tiver, claro..
A outra forma é dar uma largura fixa ao site ( por exemplo 20cm ou 800pixels). Assim o usuário poderá fazer o que quiser com a janela do seu navegador que o site seguirá mantendo seu formato e não deformará de nenhuma maneira. Esse é o lado bom, o mal é que se não dermos uma boa largura, passará que alguns a verão muito grande e outros a verão tão pequena que terá mais margens dos lados que espaço para o site.
Com qual opção ficamos?
O melhor é ficar com a segunda opção, dar uma largura fixa ao site. Essa largura tem que ser cômoda para a resolução mais usada pela maioria. Assim os que usam uma resolução de tela um pouco maior não verão as margens exageradas e os que usam uma resolução um pouco menor que a largura dada por nós, não terão que usar muito a barra de rolagem para ver o conteúdo e além do mais é a minoria.
E como isso já está mais que estudado, hoje em dia a largura ótima para um site é de 800 pixels. Pode conferir olhando vários site na rede e verá que fica um resultado muito bom com a maioria das resoluções. Portanto o nosso exemplo terá essa largura e faremos também que apareça centralizado na janela do navegador, vamos lá as duas coisas juntas...sim, sim, sim, podemos...Temos o poder...
Um div para dominar a todossss
Como vamos centralizar tudo, o que faremos será colocar toda a parte visível do site em um div (ou capa) ao qual definiremos na Folha de Estilos a propriedade de centralização, entretanto de um modo algo especial para que funcione em todos os navegadores. Chamaremos a essa capa de: ”global”. Como vai ser único e somente existirá um elemento “global” por página, a definimos com um ponto na frente e o class="global" no Html, verdade???
Não, mentira se não concordou ou achou estranho é sinal que está atento e entendendo, muito bom; mas se não é assim, veja a diferença entre: Classes de Estilo e Estilos Únicos, insisto novamente é importante entender a diferença, clique no link acima para compreender o que estamos fazendo.
Então como é um estilo único vamos fazer usando o jogo da velha ”#” na Folha de Estilos e com id="global" na plantilha.html.
Para conter toda parte visível, colocar a etiqueta de início justo depois do <body> e a de fechamento justo antes do </body>. O código Html fica assim:
<body>
<div id=”global”>
<div id="cabeceira">Bem-vindos ao meu site</div>
<div id="navegaçao">Barra de Navegação</div>
<div id="conteudo">Esta será a zona principal do site</div>
<div id="pe">Este é o pé da página</div>
</div>
</body>
Veja como contém dentro dele aos outros divs (ou capas).
Agora, na Folha de Estilos definir #global com as seguintes propriedades:
#global {width:800px ; margin: 4px auto }
Significa que a capa global terá uma largura de 800 pixels, aparece também uma propriedade que não havíamos visto antes, (margin: 4px auto) que define a margem, quer dizer, deixar entre o elemento (no caso o div global) e o resto das coisas ao seu redor. O 4px é o espaço da margem que vamos deixar na parte de cima e também na parte de baixo da página. O auto é o espaço de margem que deixaremos de cada lado. Auto, significa isso mesmo que você está pensando... automático, pelo que deixará tudo que exceda de 800 pixels, automaticamente distribuído por igual tanto à esquerda quanto à direita, portanto centralizado. Veremos isso melhor mais a frente, não se preocupe senão entender muito bem, beleza???
Desse jeito que está não funcionará em todos os navegadores, a menos que definamos uma característica no body da Folha de Estilos (estilo-geral.css). Abrir e escrever no início de tudo a linha seguinte:
body {text-align: center}
O body não é o nome de um estilo inventado por nós, como cabeceira, pe, etc... senão que é uma etiqueta do Html e a elas não as introduziremos nem com um ponto na frente e nem com o jogo da velha. Na realidade o que fazemos ao colocar propriedades a uma etiqueta é mudar as propriedades que já estão pré-estabelecidas. Com isso ficará todo o site centralizado em todos os navegadores.
Guardar agora a Folha de Estilos e dar uma vista prévia na planilla.html, verá como tudo aparece centralizado e com uma largura fixa de 800 pixels. Agora não será fácil embaralhar o site. Temos o poder!!!!! Kkkkk...
Já vai melhorando, melhorando, melhorando, é isso aí..devagar e constante.
Menu
