Alguns leitores do Pinceladas da Web já me perguntaram se o CSS no Lanche possuia Twitter, mas não, eu não possuo um Twitter específico para esse blog, mas sim uma conta onde centralizo a divulgação de posts dos meus 2 blogs.
Além de receber em primeira mão a divulgação de novos posts, você também acesso a várias novidades que eu encontro na internet no dia-a-dia, além de dicas sobre CSS, JavaScript e XHTML.
Provavelmente você já deve ter tentado desenvolver um site onde possuia pouco conteúdo e gostaria de deixar o rodapé sempre no rodapé independente de possuir conteúdo ou não. Eu particularmente já passei por muitos problemas com isso, onde, quando o conteúdo excedia a área visível do site o rodapé não acompanha a área do conteúdo e ficava por cima do mesmo quebrando todo o layout. Veja um exemplo desse problema aqui.
Nesse exemplo fazemos o uso da seguinte marcação HTML:
<div id="header"> ...Conteúdo... </div> <div id="content"> ...Conteúdo... </div> <div id="rodape"> ...Conteúdo... </div>
Uma marcação HTML simples, o grande segredo está no CSS:
html, body {height:100%}
#content {
height:auto !important;
height:100%;
min-height:100%;
}
#rodape {
position:absolute;
bottom:0px;
width:100%;
}
Essa seria basicamente a estrutura necessária para deixar o rodapé sempre no rodapé, mas esse código ainda não é satisfatório pois ocorre o problema do rodapé sobrepôr o conteúdo. Vamos agora a uma solução Crossbrowser:
<div id="wrap">
<div id="header"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
Agora vamos a marcação CSS:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 40px;} /* deve ser a mesma altura do rodapé */
#footer {
position: relative;
margin-top: -40px; /* A mesma altura do rodapé, o valor deve ser negativo */
height: 40px;
clear:both
}
Agora vocês podem ver um exemplo do rodapé sempre no rodapé através de uma solução Crossbrowser. Essa solução foi retirada do site CSS Sticky Footer.
Transparência é um efeito que, infelizmente, não têm obtido muito uso na web durante a sua história. Uma das maiores razões para isso é a falta de apoio para PNGs com canais alfa no IE6. Isso está começando a mudar com IE 7 e Firefox, ganhando mais e mais terreno nos sistemas Windows.
A maioria dos desenvolvedores web já deve estar ciente de que é possível utilizar PNGs com canais alfa, mas isso contempla vários problemas e não funciona muito bem quando você adiciona conteúdo em cima deles.
Existe uma maneira de tornar os conteúdos transparentes, usando a tag opacity e um código proprietário de opacidade para o Internet Explorer. O problema é como esta propriedade CSS se baseia, onde todos os filhos herdam a transparência também, que muitas vezes não é o efeito desejado.
Sabendo tudo isto, como vamos criar colunas transparentes que possam trabalhar em todos os navegadores? E se pudéssemos usar a propriedade de opacidade, mas ainda tem o conteúdo opaco?
Isso é possível utilizando algumas técnicas de posicionamento em CSS. O que vamos fazer é ter um elemento pai que contenha 2 filhos. Um fundo transparente que ocupa toda a largura e altura do pai, e um filho que contenha o conteúdo. Dessa forma podemos ter um fundo transparente, enquanto o conteúdo permanece opaco.
A base da marcação que iremos utilizar é a seguinte:
<div id="column-1" class="container">
<div class="overlay"></div>
<div class="content">
<h2>Content</h2>
</div>
</div>
Os elementos HTML possuem, por padrão, uma formatação que diferencia-se de browser para browser. Utilizar técnicas de Reset CSS é uma boa pedida para minimizar os seus problemas no dia-a-dia.
Se não você não conhece nenhuma técnica de Reset CSS, aconselho a dar uma olhada em meu post onde eu mostro 10 Técnicas de Reset CSS, e recentemente eu acabei descobrindo um site, o CSS-Reset.com, que hospeda algumas dessas técnicas nos servidores do Google App Engine, evitando assim consumir banda de seu servidor. As técnicas são as seguintes:
Sua utilização é muito simples, basta adicionar a URL completa do arquivo CSS ao seu site. Se atentem a um exemplo de utilização:
<link href="http://www.css-reset.com/css/meyer.css" media="screen, projection" rel="stylesheet" type="text/css" /> <link href="http://www.css-reset.com/css/yui.css" media="screen, projection" rel="stylesheet" type="text/css" /> <link href="http://www.css-reset.com/css/ejeliot.css" media="screen, projection" rel="stylesheet" type="text/css" />
Via: WebIntenta
Se você não ficou muito satisfeito com a primeira técnica que postei por aqui de como centralizar na horizontal e vertical com CSS, então vai ficar surpreendido com essa que dscobri recentemente, que faz o uso de float e clear para centralizar o elemento na horizontal e vertical.
Nesse exemplo, vamos utilizar uma div com o id “container”, esse será o elemento que iremos centralizar na página. Observem a seguinte marcação HTML:
<div id="distance"></div>
<div id="container">
<h1>Centralizar div na horizontal e vertical com float e clear - crossbrowser</h1>
<p>
Esse box fica no meio do browser em relação a seu viewpoint.<br />
O conteúdo não desaparece quando o viewpoint é redimensionado e fica menor que o box.
</p>
</div>
Um HTML simples, composto por uma div para conter todos os nossos elementos, e por fora dessa div, uma outra, chamada de distance(você pode chamá-la como quiser), que será responsável por empurrar o nosso box, emconsequência o deixando sempre no centro do viewpoint do browser. As regras CSS são as seguintes:
html, body {
height:100%;
}
body {
text-align:center; /* Centralizar na horizontal no IE caso o site entre em Quirks mode */
}
#distance {
width:1px;
height:50%;
background-color:#fc6;
margin-bottom:-13.75em; /* Metade da altura do nosso box que ficará centralizado */
float:left;
}
#container {
margin:0 auto;
position:relative; /* Coloca o container frente ao elemento com o id distance */
text-align:left;
height:27.5em;
width:45em;
clear:left;
background-color:#ff9;
border:1px solid #c93;
border-top-color:#fff;
border-left-color:#fff;
}
Como podem ver, deve ser definido que as tags html e body tenham uma altura de 100%. Depois definimos um height de 50% para nossa div “distance”, adicionamos float e um margin-bottom negativo, esse valor deve ser a metade da altura do elemento que você deseja centralizar, que no exemplo foi a div container. A utilização de clear é necessário para que o elemento fique centralizado na vertical. Vejam nesse exemplo o código em ação.
Esse exemplo foi retirado do site d-graff.
