Tag Archives: Tableless

CSS: Centralizar Horizontal e Vertical #2

Há algum tempo postei sobre como centralizar verticalmente e horizontalmente usando CSS, o que gerou alguns posts de visitantes revoltados porque não funcionava no IE7, fato que na época eu não tinha testado para essa versão do IE.

Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers Firefox 2, IE6, IE7 e Opera 9.

html, body {
width:100%;
height:100%;
padding: 0px;
margin: 0px;
}

#table {
width: 100%;
height: 100%;
position: static;
display: table;
*overflow: hidden; /* hack para o IE6 e IE7 */
*position: relative; /* hack para o IE6 e IE7 */
}

#cell {
vertical-align: middle;
display: table-cell;
position: static;
*top: 50%; /* hack para o IE6 e IE7 */
*position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
top: -50%;
width: 500px;
margin: auto;
position: relative;
background: red;
}

link para o outro post e comentários

Anúncios

Flash e CSS: Banner Flutuante

Ver post no novo domínio: http://blog.rogeriolino.com/2007/02/04/flash-banner-flutuante/

Muitos sites, portais, adotaram o banner flutuante, aquele no qual ao você passar o mouse por cima ele “cresce” pela página e mostra os detalhes da propaganda, promoções, etc.

A idéia então consiste em posicionar o filme por cima dos outros elementos e ele tem que ter o fundo transparente para não “tampar” o conteúdo.

Então chegamos a conclusão que é só deixar o filme com o fundo transparente e colocá-lo numa div com position absolute? Certo.

Primeiramente vamos ao SWF, no Flash crie um novo documento. Nesse exemplo eu criei um de tamanho 468×280.

No primeiro frame coloque a action stop() para o filme não começar sozinho.

Desenhei um retângulo que cobre todo o palco na horizontal e com altura de 60 pixels. Dupliquei ele (copia e cola) e apertei o F8 para transformá-lo em um MovieClip. Ele vai ser o nosso botão para quando passar o mouse dar o play() no filme.

Instanciei de btn e apliquei o alpha para 0%, para deixar ele transparente. E adicionei no primeiro frame a seguinte action:

btn.onRollOver = function() {
_root.gotoAndPlay(2);
}

Com essa action definimos que ao passar o mouse sobre o botão (btn) o filme irá para seguir a partir do segundo frame.

E no frame 2 em diante fiz uma animação simple para dar impressão do fundo estar crescendo para baixo. No último frame da animação também adicionei a action stop(); para o filme não voltar para o primeiro frame.

Também temos que colocar uma action para ao tirar o mouse (rolar fora) do botão a animação ir e parar no primeiro frame. E também uma para quando clicar. Essa action pode ser colocada no primeiro frame também.

btn.onRollOut = function() {
_root.gotoAndStop(1);
}

btn.onRelease = function() {
getURL(“https://rogeriolino.wordpress.com/”, “_blank”);
}

Na primeira faz com que ao tirar o mouse de cima do botão volte para o primeiro frame mas não continua o filme (stop). Na segunda tem a função getURL() que funciona como a tag <a> no html, seus parâmetros são: página/endereço e alvo/target (_blank = nova página / _self = mesma página / _parent = pai do frame).

Com a nossa animação pronta vamos ao HTML:

Vamos colocar o SWF dentro de uma div chamada banner:

<div id=”banner“>
<object type=”application/x-shockwave-flash” data=”banner.swf” width=”480″ height=”280″>
<param name=”movie” value=”banner.swf” />
<param name=”allowScriptAcess” value=”sameDomain” />
<param name=”wmode” value=”transparent” />
<param name=”quality” value=”best” />
</object>
</div>

E o nosso CSS:

#banner {
margin-left: 250px;
_margin-left: 10px;
padding: 20px;
position: absolute;
}

O hack na margin é por causa do IE.

E pronto, já podemos ver nossa propaganda flutuante funcionando. Download do exemplo.

CSS: Position Fixed IE

Ver post no novo domínio: http://blog.rogeriolino.com/2007/01/23/css-position-fixed-ie/

Um atributo muito interessante quem tem na propriedade position é o fixed.

Com ele você pode posicionar um objeto no palco (como se fosse absolute) só que ele sempre estará na “mesma posição”, mesmo rolando a tela.

Infelizmente o IE (até o 6) não reconhece esse atributo, mas antes de sairmos tentando bolar um código em javascript para ficar posicionando a janela quando o usuário rolar a tela. Vamos usar só o CSS.

Pensando: Poderíamos usar como position o absolute já que com ele a gente tem uma liberdade maior para posicionar o objeto. Mas ainda temos o problema com a rolagem.

Mas tem o overflow, podemos colocar como auto para criar uma barra de rolagem para o que ultrapassar o limite, e o nosso objeto continuará sempre no mesmo lugar. Pronto!

Nos browser espertos (smarts) fica assim:

#menu {
top: 15%;
left: 50px;
width: 200px;
padding: 20px 0px;
border: 2px solid #CCCCCC;
position: fixed;
}

Dá para notar que é como estivéssemos colocando como absolute mesmo (left, top). Só isso basta.

Agora para o IE vamos colocar o CSS dentro de um comentário do HTML (que por sua vez só ele mesmo para ler como código o comentário):

<!–[if IE]>

<style type=”text/css”>
html, body {
height: 100%;
overflow: auto;
}

#menu {
position: absolute;
}
</style>

<![endif]–>

Colocamos o body e o html com overflow auto e altura 100% para confirmar que sua altura é toda a janela (a visão do usuário). E definimos o objeto com postion absolute, não precisamos colocar left nem top, porque já foram passados acima, e só estamos sobrescrevendo (position).

Veja esse exemplo funcionando. Dê uma olhada no código-fonte.

Na internet podemos encontrar outros métodos para isto. Vi um que continha expressões javascript no CSS (coisa do IE) e outro que usava javascript puro para posicionar.

Para mais exemplos, resultado da busca:

Powered Google

CSS: Centralizar Horizontal e Vertical

Ver post no novo domínio: http://rogeriolino.com/2007/01/17/css-centralizar-horizontal-e-vertical/

Uma grande dúvida que sempre surge é como centralizar um elemento no HTML, tanto verticalmente quanto horizontalmente, usando CSS.

Há duas maneiras de se fazer isso sem muito trabalho.

A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade de sua altura e metade de sua largura na margem. Por exemplo se um elemento tem 500px de largura e 400px de altura na margem vai ter um valor negativo (para top e left) igual a metade destes valores:

#minhaDiv {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
position: absolute;
border: 1px solid black;
}

ou resumindo: margin: -200px auto auto -250px;

Pronto sua div vai ficar centralizada na janela. Mas temos um problema com isso.

Nesse caso sabemos o valor da altura do objeto, então tiramos a diferença na margem. Mas e se tivessemos um objeto em que sua altura pode variar (ou seja não sabemos o valor da altura) ?

Podemos solucionar isso usando o vertical-align, mas para ele funcionar temos que definir o display da div como table. A má notícia é que o nosso amigo IE não reconhece essa propriedade (e nem o valor table como display). A boa notícia que usando um hack para o IE dá pra acertar isso.

A estrutura para simular uma tabela fica assim:

<div id="tabela">

        <div id="cell">

                <div id="conteudo">

                       <p>parágrafo</p>
                </div>

         </div>

</div>

E definimos no CSS o display da div tabela como table e da div cell como table-cell. Mas antes temos que acertar o html, body e a tabela para 100% (largura e altura).

html, body {
width: 100%;
height: 100%;
margin: 0px; /* retirando a margem padrão */
padding: 0px; /* retirando o padding padrão */
}

#table {
width: 100%;
height: 100%;
display: table;
}

#cell { display: table-cell; }

Com as divs já funcionando como tabela vamos definir a vertical-align como middle, isso na div cell.

#cell {
vertical-align: middle;
display: table-cell;
}

Falta agora setar a margin do conteudo como auto. E colocar um valor para largura, senão vai ficar 100%.

#conteudo {
width: 500px;
margin: auto;
}

Pronto, a div já vai aparecer centralizada no browser. Mas ainda está faltando o nosso amigo IE.

A idéia é quase a mesma da primeira situação. Como antes do conteudo temos uma div (cell), a gente defini seu position como absolute, e top como 50%. E na conteudo com position como relative, e top como -50%.

Lembrando que para não atrapalhar a definição correta, usaremos um hack que só influenciará no Internet Explorer.

Ficando o CSS final assim:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

#table {
width: 100%;
height: 100%;
display: table;
background: #f1f1f1;
}

#cell {
vertical-align: middle;
display: table-cell;
_position: absolute;
_top:
50%;
}

#conteudo {
width: 500px;
margin: auto;
padding: 20px;
border: 1px solid black;
_position: relative;
_top:
-50%;
}

E o HTML:

<div id=”table”>
<div id=”cell”>
<div id=”conteudo”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</div>

Mais sobre:

Exemplo com a primeira situação

Maujor – Centralizar Vertical

[update testado=”IE6, IE7, FIREFOX 2 e OPERA 9″]

html, body {
width:100%;
height:100%;
padding: 0px;
margin: 0px;
}

#table {
width: 100%;
height: 100%;
position: static;
display: table;
*overflow: hidden; /* hack para o IE6 e IE7 */
*position: relative; /* hack para o IE6 e IE7 */
}

#cell {
vertical-align: middle;
display: table-cell;
position: static;
*top: 50%; /* hack para o IE6 e IE7 */
*position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
top: -50%;
width: 500px;
margin: auto;
position: relative;
background: red;
}

[/update]

CSS Gallery

Sempre é bom estarmos observando, conhecendo, novos layouts e aprendendo com eles.

Já existem inúmeros sites indexadores de sites Tableless (CSS Layout).

Abaixo segue uma listagem de alguns deles:

http://www.cssdrive.com/
http://cssvault.com/
http://www.cssbeauty.com/gallery/
http://www.cssimport.com/
http://www.stylecrunch.com/
http://www.csselite.com/
http://www.unmatchedstyle.com/
http://cssmania.com/
http://www.cssreboot.com/gallery/
http://www.css-website.com/
http://www.cssbloom.com/
http://www.css-design-yorkshire.com/
http://cssbrain.hu/
http://screenfluent.com/
http://www.isquare.it/
http://www.webdigity.com/cssGallery/
http://www.creative-pakistan.com/

Quer mais?
CSS Galleries

Pullquote

Pullquote é um efeito utilizado em jornais (revistas) para destacar uma certa parte do texto. Um exemplo aqui: link.

Esses efeitos podem ser criados na sua página usando CSS, há quem use também Javascript. Nesse exemplo usaremos apenas CSS.

Crie um novo arquivo HTML. O texto que receberá um destaque ficará assim, dentro da tag blockquote:

<blockquote class=”pull”>Texto aqui dentro</blockquote>

No CSS definimos o tamanho (largura) da caixa, uma borda em cima e em baixo, texto alinhado ao centro. E pronto.

blockquote.pull {
width: 170px;
border-top: 3px solid #CC0099;
border-bottom: 3px solid #CC0099;
text-align: center;
float: right;
margin: 0px 20px;
padding: 15px;
}

Aí como podemos ver a caixa irá flutuar para a direita, podendo ser alterado como prefirir (left/right).

O exemplo final desse tutorial você confere aqui: pullquote.

Veja mais sobre:

Pullquote apenas com CSS:

http://www.sitepoint.com/test/pullquote.htm (inglês)
http://www.brpoint.net/arquivo/css/pull-quotes.html (português)

Pullquote com Javascript:

http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/javascript-pullquote/ (inglês)

Tutorial Caixa de Contrato

Esses dias no Fórum do Flashmasters perguntaram como poderia fazer um campo de texto que não pudesse ser alterado, modificado. Mas que tivesse uma barra de rolagem.

A minha sugestão foi que ao invez de usar um textArea como ele queria, usa-se uma div mesmo, com overflow auto.

Exemplo:

CSS

#contrato {
width: 400px;
height: 500px;
padding: 10px;
overflow: auto;
border: 3px groove #CCCCCC;
background: #F1F1F1;
}

Você pode alterar o estilo da borda: estilos de borda css.

HTML

<div id=”contrato”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam massa. Donec bibendum quam a augue. Fusce rhoncus. Proin laoreet facilisis ipsum. Nunc mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque semper porta lorem. Nunc libero. Pellentesque sollicitudin. Integer tincidunt cursus nulla. Vivamus lacinia condimentum ipsum. Quisque lacus diam, scelerisque vitae, vestibulum id, elementum vitae, ante. Cras ipsum. Sed lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Uma encheção de lingüiça aí.

E com apenas algumas linhas no CSS você tem sua caixa de contrato personalizada.

Clique aqui para ver o exemplo.