Prioridade no XHTM: e o CSS que se vire na organizaçãoe!

Nota importante tomada em 12 de Julho de 2006: infelizmente eu analisei depois e vi que cometi um erro grave neste documento, paciência... Realmente você precisa de usar uns códigos XHTML a mais para organizar DIVs, mas isso deve ser resolvido no XHTML 2. Eu espero :), o resto do artigo continua valendo...

Você aprendeu XHTML, CSS... Mas também aprendeu sobre semântica e outras coisas do tipo...
Entre elas que o assunto deve ser enviado depois do menu e tal... Por uma questão de prioridade e também para facilitar a vida dos [cegos] que usam leitores de tela, de um ou outro perdido que use o Lynx da vida e assim vai. Sem esquecer os coitados que usam conexão discada, claro. Basta isso, não é? Para que fazê-los perder mais tempo ainda para ver o que realmente querem ver...

Você pode pensar: ué, melhor mostrar primeiro a publicidade então, afinal, ela é que me trás lucro.

Ai ai, isso é tão século XX... Publicidade no topo do site? Come on! Coloque em algum lugar visivel por mais tempo... E use algum sistem legal como o Google AdSense! Coloque o banner entre um post e outro do teu blog, por exemplo... E nada de encher de propaganda... Bem, isso já é outro assunto...

Voltando...

- Tá legal... Mas se eu enviar o conteúdo primeiro eu não vou poder colocar o menu do lado esquerdo, nem uma imagem no topo do site não é, mané? Então eu seria limitado a fazer alguns layouts bizarros...

- Errado! Como você já devia saber, hoje o layout depende muito mais do CSS que do XHTML.

Então... eu sempre tive o problema acima até que decidi resolver isso hoje... Pensei em pegar o código da Wikipédia e filtrá-lo até achar o que queria, pensei novamente e pensei.. O layout de Bruno Torres deve ter essa coisa de "prioridade" feito assim. Fui lá, olhei o código XHTML do mesmo, tinha. Pronto, roubei o CSS dele, coloquei na página que estou criando e fui filtrando as coisas...

Pronto, achei o essencial... Era algo simples mesmo, eu que jamais consegui fazer isso...
Agora já estou limpando as coisas para ficar legal, bem encaixada e tal...

Só que depois que coloquei senti que tinha uma coisa que poderia ser legal ou não dependendo do que a pessoa quisesse... No meu caso, ficava ruim... Decidi pensar... Me lembrei do parâmetro display: block, coloquei, mas nada... Aí fui no Google ver o que "o display aceita", uma das coisas era table. Poxa! Como não tinha pensado antes? table resolveria. É, resolveu...

Aqui vai solução...

No XHTML, nada menos, nada mais que a coisa ridícula abaixo:
<div id="container">
<div id="main">
<p>Aqui é a parte principal. Na direita, segundo as tradições ocidentais...</p>
</div>
<div id="navbar">
<p>Aqui é a barra de navegação,<br />
No teu caso (não no meu, no teu), provavelmente você colocaria algo como:</p>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/pronto">Tá bom de exemplo...</a></li>
</ul>
</div>
<!-- Pronto, se quiser colocar ainda alguma coisa, como publicidade, no lado direito faz como vou fazer aqui e no CSS... -->
<div id="ad">
<p><a href="http://www.papainoel.com/">Papai Noel</a><br />
Peça o seu presente<br />
Você também é filho de Deus...<br />
www.papainoel.com<br />

Anuncie neste site</p>
</div>
<!-- Se não quiser colocar, não faz o que tá acima... o.O -->
</div> <!-- Esse é o fim do container -->

No CSS (agora sim!), a "obra de arte":
#container {
width:100%; /* Ou sei lá quantos percento ou pixels ou pontos ou sei lá o que você quer */
background: #000; /* Just kidding :) */
color: #000; /* É para colocar isso não, mané... :P */
display: table; /* Para o que tiver abaixo ficar como tivesse abaixo de uma tabela, não de um mero DIV. Ué, por que não usar uma tabela real? Tableless... Vai deixar o teu CSS porco assim não, tá? Ah, isso também ajuda se você quiser colocar um fundo de tela no container... */
}

#main {
width:75%; /* Ou... */
float: right; /* Veja que coisa incrível! Você diz onde ele tá, eu sabia disso mas era incapaz de fazer algo assim... Não me perguntem o motivo... Falta de tentativa com o uso da lógica, provavelmente */
background: #3e3e33; /* Volta lá no #container e deixa um background... É bom para ter uma noção de como a coisa realmente tá, às vezes... */
}

#navbar { /* que nome mais feio... Mas achei o que o Bruno Torres usa, secondary, pior :P */
width:17%; /* Por que não 15%? Duh */
float:left;
background-color: #ee332a; /* Para colorir um pouquinho... */
overflow: auto; /* Não usarei isso no meu porque, apesar de tudo, não gostei... Mas vai que você goste... Dica: escreva algum texto, estique a tela, "desestique"... E notará algo quando tiver muitooo pequena... Isso deveria ser mais útil no #main... Mas não gostei... Eu recomendo não colocar... Mas te vira, qualquer coisa, google "CSS overflow" e veja o que diz na W3C School */
}

#ad {
float: left;
width: 18%; /* ou quanto tu tiver, tv (=te vira) */
background: #ff4; /* novamente, só para ajudar */
/* ah, deixa uma boa margem... Se eu fosse falar em pixels, diria 250px, mas não vou falar não, então tv... Agora pronto, seu layout tá ok, pode colocar coisa embaixo do container à vontade que vai ficar embaixo de tudo mesmo... Se quiser deixar algo bem alinhado coloca o nome do #treco aí junto ao #ad... Na medida do possível... Ah, você entendeu e, se não entendeu, vai entender. Não funciona no Internet Exploder? Te vira, aproveita e deixa um comentário com o hack que usou para ajeitar!!! Nem esse bregueço eu tenho... */
}
<!-- tá bom por hoje, amanhã, depois de amanhã e até semana que vem ou mês, ano, sei lá... -->

Listen to this article