Buenas povo, entre um script e outro para o And After estou escrevendo para contar a emocionante história de madrugadas sem sono para conseguir migrar para o tão falado tableless.
Eu era uma pessoa doente por tabelas, por isso foi sofrido, mas existem várias razões para usar o tableless então resolvi me dedicar um pouco e corri atrás de tutoriais, o resultado vocês estão vendo aqui.
O passo inicial
Acredito que o caminho mais fácil é começar do zero a página, e não utilizar as tabelas já montadas e ir "adaptando". Gabiarra não, gente.
O método que eu utilizava para montar as tabelas não me permitiu usar as mesma imagens, então tive que cortar o .psd denovo pensando nos webstandards e não nas tabelas como de costume. Estudei antes e entendi como funcionava, fui cortando as imagens e montando o css ao mesmo tempo.
Com o dreamweaver criando o CSS e o arquivo .asp (ou html, ou o que for) e no photoshop com o PSD pronto para ser cortado de acordo com as necessidades e método que eu usaria na folha de estilos.
Criando o CSS
* {
margin: 0px;
padding: 0px;
}
Esse código zera a o margin e padding de todos os elementos da página.
body {
padding: 0px 0px 30px;
background: #FFFFFF url(../images/bg.gif) repeat-y center;
font: 11px/130% Verdana, Arial, Helvetica, sans-serif;
}
Agora defini as configurações de todas as páginas, como o background e configurações de tamanho de fontes. Nesse caso o fundo é branco, a imagem de fundo vai ser centralizada e repetir apenas no eixo Y, ou seja, o vertical.
#page {
margin: 0px auto;
width: 761px;
}
#topo {
height: 70px;
position: relative;
padding: 0px;
margin: 0px;
}
Está aí em cima a estrutura onde vai o conteúdo (page) com as limitações de tamanho e alinhadas ao centro, e também o topo do site, onde inseri o logo do And After e a direita alguns links e o formulário de busca (que veremos logo). Com as configurações da página e o topo definifo, criei as configurações para a imagem:
#logotopo {
width: 400px;
padding: 10px 0px 0px 10px;
float:left;
margin: 0px;
}
Optei por não usar a imagem como background, então ela está inserida no outro arquivo (html). O comando float faz a div flutuar, neste caso pela esquerda. Isso significa que posso inserir depois dela outra dic e não haverá quebra de linha, a próxima div ficará na direita desta.
O arquivo html está da seguinte forma:
<div id="page">
<div id="topo">
<div id="topo">
<div id="logotopo">
<a href="https://andafter.com.br"><img src="images/logo.gif" alt="Ir para página inicial" width="202" height="59" border="0" />
</a>
</div>
</div>
</div>
</div>
O resultado disso é o topo do And After, ainda sem os links e o campo de busca na direita.
#menutop {
float:right;
margin: 10px 25px 0px 0px;
padding: 0px;
}
Esta é a div que fica dentro da div topo, logo depois da div do logo. O código anida não ficou compacto como deveria, a div topo por exemplo poderia ser deletada com adaptações da logotopo e da menutop.
O conteúdo é divido em duas colunas:
#direita {
float: left;
width: 520px;
overflow: hidden;
}#esquerda {
float: left;
width: 220px;
overflow: hidden;
}
Essas duas divs ficam dentro da div page, isso cria o menu a esquerda e a página de conteúdo a direita.
Para a melhor fluência do html (carregar o conteúdo antes do menu) estou estudando alterações nisso. Será necessário a div da direita aparecer no html antes da div da esquerda, provavelmetne com um espaçamento "puxando" ela para o lado direito e a esquerda com o espalamento puxando para o lado direito.
Para não me extender muito, paro por aqui. Vou deixar aqui alguns estilos do CSS do And After que foram bastante úteis para mim.
CSS
.esquerda {
float: left;
}
Criei um estilo para divs que flutuam pela esquerda, evitando repetição de código desnecessário.
img { border: none; }
Tira a borda de todas as imagens
p {
padding: 0px 0px 15px;
margin: 0px;
}
Formatação do espaçamento do parágrafo
Deixe um comentário