Neste fim de semestre auxiliei um amigo meu a fazer seu trabalho de TCC (Trabalho de conclusão de curso) que era um site onde ele propôs uma navegação não muito convencional, onde cada link escorregaria para o conteúdo tanto na horizontal como na vertical. Até aqui procuramos alguns plugins que ajudaram mas não eram de fácil aplicação e instalação como este jQuery ScrollTo resolvi fazer algo mais simples que resolveria o problema, veja ai como ficou e logo abaixo o que eu fiz.

A primeira coisa foi definir o tamanho do site bem como o que teria dentro dele, veja no esquema abaixo como isso isso funcionou

Observe que o body vai variar de acordo com o seu monitor mas o que vamos estudar aqui é a rolagem do .site-palcoGeral e como ele vai ser visto dentro do .conteudo-geral ai você pode esconder  ou não as “laterais”, veja o CSS do esquema acima.

body{ margin:0px; padding:0px;width:100%; height:100%; overflow:hidden; border:1px solid #339900; }
.conteudo-geral{
	width:980px;
	height:600px;
	/*overflow:hidden;*/
	margin:auto;
	position:relative;
	border:1px solid #FF0000;
}
.site-palcoGeral{
	position:absolute;
	top:-2716px;
	left:-2374px;
	border:1px solid #FF0;
	width:6060px;
	height:3400px;
	border:1px solid #F0F0F0;
}
.site-palco{
	width:6060px;
	height:3100px;
	position:relative;
}
.site-geral{
	width:900px;
	height:520px;
	padding:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	border:1px solid #000000;
}
.site-home{left:2374px;top:2716px;}
.site-001{left:3344px; top:2716px;}
.site-002{left:2374px; top:1748px;}
.site-003{left:2373px;top:932px;}

/* Menu */
.conteudo-menu{
    position: absolute;
	left:0px;
	top:0px;
	z-index:10;
	padding:10px;
}
.conteudo-menu{
	position:relative;
}

E agora veja o HTML

<div class="site-palcoGeral">
    <div class="site-palco">
        <div class="site-geral site-home"><a name="item1" id="item1"></a>Home</div>
        <div class="site-geral site-001"><a name="item2" id="item2"></a>001</div>
        <div class="site-geral site-002"><a name="item3" id="item3"></a>002</div>
        <div class="site-geral site-003"><a name="item4" id="item4"></a>003</div>
    </div>
</div>

<div class="data-menu">
    <div class="conteudo-menu">
        <a href="#" class="linkHome">Home</a>
        <a href="#" class="link001">Link 001</a>
        <a href="#" class="link001">Link 002</a>
        <a href="#" class="link002">Link 003</a>
    </div>
</div>

Aqui o menu fica por fora para que você possa ver como funciona e por fim o jQuery, não se esqueça de chamar a biblioteca, aqui está referenciando da biblioteca do google

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    	$(function(){
			$('.linkHome').click(function(){
				$('.site-palcoGeral').animate({top:'-2716px', left:'-2374px'});
				return false;
			});

			$('.link001').click(function(){
				$('.site-palcoGeral').animate({top:'-2716px', left:'-3344px'});
				return false;
			});

			$('.link002').click(function(){
				$('.site-palcoGeral').animate({top:'-1748px', left:'-2374px'});
				return false;
			});

			$('.link003').click(function(){
				$('.site-palcoGeral').animate({top:'-932px', left:'-2373px'});
				return false;
			});
		});

    </script>

Veja como funciona, ao clicar no item do menu, aqui chamado pela classe que ele representa eu uso o Animate que muda a posição do “.site-palcoGeral”  para encaixar o conteúdo em seus respetivos pontos, veja no desenho abaixo a representação.

Bom é isso aí qualquer dúvida poste ai, es e quiser sugerir acesse o link aqui e poste alguma duvida que tenha e na medida que eu puder responder postarei aqui no blog, até mais!

html { margin-top: 28px !important; }

E com isso um espaço no topo do blog, procurei por ai e achei neste aqui uma solução, basta você ir na pasta dos eu tema que fica em: “wp-content/themes” elá dentro procure a pasta do seu tema, logo ache o arquivo “functions.php”, caso não tenha crie-o,agora acrescente as duas linhas de códigos abaixo:

function my_function_admin_bar(){ return false; }
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

Caso crie o arquivo coloque assim:

<?php
        function my_function_admin_bar(){ return false; }
        add_filter( 'show_admin_bar' , 'my_function_admin_bar');
?>

E pronto, acredito que isso seja para algum uso da atualização de barra de navegação, ou de usuários, bom depois procuro com mais afinco sobre o tema, até mais.

Para o caso da minha amiga vejamos o modelo era um vestido preto de bolinha branca veja a foto abaixo:

Note que o vestido tem um padrão de bolinhas não retilíneos, ou seja, eles se intercalam, daí pensamos em fazer uma do lado da outra, outra forma uma em cima da outra e do lado a outro e nada, então pensei um pouco fora “da caixa” e porque não se fosse metades?

Isso mesmo para que as bolinhas se repetissem como na foto acima precisei fazer algo assim veja:

Note que na área em vermelho são quatro bolinhas e depois é só cortar o quadrado, assim basta cortar ao redor do quadrado e colocar no backgound no seu site.

Por isso se desejar fazer um padrão de repetição mais suave e real outro exemplo você pode ver neste site.

Não se desespere o “Mago do CSS”, o Mr. M lhe ajudará!

Vejam a mágica aqui

Parece simples as imagens estão com bordas arredondadas, mas não, veja aqui a foto que está salva, e agora Mr M como você fez isso?

Hahah brincadeiras a parte vamos revelar o segredo, é muito simples, aqui estou usando uma máscara, um arquivo PNG por cima da imagem, confiram o passo a passo.

1.Criando as máscaras

Bom aqui vamos criar a máscara, mas antes devemos saber qual o tamanho dos nossos arquivos miniaturas aqui eu estou usando o tamanho de 210×131, mas você pode usar como quiser, logo come esta largura e altura vou para o Fireworks (pode usar o Photoshop ou outro programa que achar melhor também) e crio um novo documento com as mesmas medidas.

Bom agora vou falar de como fazer a borda arredondada no Fireworks, tente assemelhar isso ao seu editor de imagens ok?  No Fireworks eu crio um quadrado com o mesmo tamanho deste documento (210×131) e por cima dele um “Rounded Rectangle”, que fica no painel de “Vector” como mostra a imagem abaixo:

Este retângulo com bordas eu faço ele menor do que o tamanho do palco, neste caso eu usei o tamanho de 203×126 e ficou assim:

Note que as linhas vermelhas denominam os dois elementos agora com os dois elementos selecionados e com suas bordas removidas, lá em cima no menu “Modify->Combine Parths->Punch’ você irá recortar o quadrado “vazando” o retângulo deixando ele assim:

Note que usei a cor verde só para que você possa enxergar melhor, agora com a mascara criada, volte ela para branco e salve-a como quiser eu dei o nome de “mascara_thumb.png”

Nota: Porque não usar o bom e velho GIF?? Bom o GIF perde muita qualidade, se estiver usando a curva será mais rígida e não terá muita suavidade, mais na frente irei falar mais e ajustar um bug do IE6 pra variar…

Bom agora com a máscara criada vamos ao CSS, agora sim Mr. M eu quero ver…

2.HTML e CSS
“Agora sim sem usar cordas”... bom vamos começar com um html simples para chamar as imagens, uma div com seu class para cada imagem e dentro deles um SPAN e uma div geral que marca o tamanho do documento… veja:

<div id="conteiner_galeria">
  <div class="thumb">
     <span></span>
     <img src="fotos/thumb_img7.jpg" />
    </div>
</div>

Bom nada de mais né a não ser pelo SPAN que não tem nada, por enquanto… agora vamos ao CSS, o terror dos programadores

body,td,th {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #333333;
   text-align:center;
 }
 div#conteiner_galeria{
   margin:auto;
   width:700px;
 }
   div#conteiner_galeria .thumb{
   position:relative;
   float:left;
   margin:7px;
   width:210px;
   height:132px;
 }
 div#conteiner_galeria .thumb img{
   border:0px;
 }
 div#conteiner_galeria .thumb span{
   position:absolute;
   width:210px;
   height:132px;
   background-image: url(imagens/mascara_thumb.png);
   background-repeat: no-repeat;
   background-position: left top;
}

Aqui serei breve na explicação, o mais importante é saber sobre alinhamentos de elementos com CSS, regra básica elementos absolutos se alinha aos elementos relativos, por exemplo aqui o elemento “div#conteiner_galeria .thumb” é relativo e o elemento “div#conteiner_galeria .thumb span” é alinhado absoluto ao elemento anteiro a ele no caos o “div#conteiner_galeria .thumb”.

Daí é só dar a ele o tamanho desejado com o fundo sendo a nossa máscara,é importante também deixar tudo em ordem, ou seja o SPAN vem antes da Imagem, mas Tio pode ser diferente, pode “desinfeliz” mas é preciso colocar um z-index maior para que possa ficar por cima da imagem, assim:

div#conteiner_galeria .thumb span{
   z-index:10;
}

Outro detalhe importante é que sua máscara deverá ter o mesmo fundo (no caso aqui a borda) da sua página neste exemplo ela é branca, se seu site fosse verde ela deveria ser verde.

Prontinho, nãããooo… ainda tem mais Mr. M, no caso do Explorer 6 ele coloca um preenchimento azul (deve vir da tela azul da morte) nos lugares onde tem transparência em PNG, “ha tá, deposi deste trabalhão que você me diz isso?!”

3.Corrigindo Bug do IE
Calma para tudo tem um jeitinho, vamos lá para solucionar seu problema lhe apresento  o IE PNG Fix, este componente faz uma doideira para remover este bug, veja a documentação completa no site, mas para adiantar seu lado usaremos apenas dois dos arquivos baixados no site:

iepngfix.htc
blank.gif

Coloque estes dois arquivos na raiz de sua aplicação basta acrescentar no CSS esta linha de código:

div#conteiner_galeria .thumb span{
   behavior: url("iepngfix.htc");
}

Agora sim! Está pronto e sem bug se quiser baixar os arquivos simples aqui e com um toque de chefe com um Ligthbox oferecido pela Colorbox.

É isso ai até a próxima, dúvidas postem ai!

Vamos lá primeiro você já deve conhecer um pouco sobre posicionamento de DIV’s, caso nào entendo muito me avise para colocar um novo artigo sobre isso. Para criar o rodapé seu conteúdo deverá ser disposto assim:

<div id="conteiner_geral">
 <div id="conteudo">
      Aqui vai todo o conteúdo
   <div class="clear"></div>
</div>

<div id="rodape">
      Aqui vai o rodapé
</div >
</div>

Passando rapidamente, temos uma DIV que está “cobre todo mundo” e dentro dela duas DIV’s uma com o conteúdo (dentro dela outra para limpar algum alinhamento float caso tenha, isso é opcional ) e outra com o Rodapé.

Com esta estrutura vamos ao CSS, primeiro insira isso:

html, body {height:100%;}

Aqui falo que a altura do body é de 100%, para alinhar as coisas é necessário ter valores de alturas definidos.

Depois vamos mexer na div geral e conteúdo, coloque isso:

div#conteiner_geral{
   position:relative;
   min-height:100%;
   margin:0 auto;
   text-align:left;
   padding-bottom: 43px;
}
* html #conteiner_geral {height: 100%;}
div#conteudo{
   padding-bottom:50px;
}

Aqui eu digo ao navegador que a DIV ID “conteiner_geral” terá seu posicionamento relativo e uma altura mínima de 100% par ao Firefox e outros navegadores, em seguida para o Explorer a altura é de 100% (velhos problemas com navegadores…), em seguida o conteúdo terá uma distancia de 50px na parte de baixo no “bottom”.

Ok, agora vamos para o rodapé, coloque este código no seu CSS:

div#rodape{
   height:43px;
   width:100%;
   position: absolute;
   bottom: 0;
   left:0px;
   background-color:#E6E6E6;
   text-align:right;
}

.clear {clear:both;}

Aqui eu digo ao navegador que a altura do rodapé é de 43px, aqui fica a seu critério, mas lembre-se de colocar um valor igual ou maior no “padding-bottom” da DIV “conteudo”, para que o seus dados não fiquem por baixo dele. Depois digo também que seu tamanho é de 100%, seu posicionamento é Absoluto em relação ao conteúdo geral (que já tá 100% de altura) e seu posicionamento é de ficar no fundo e a esquerda.

Por fim o estilo que limpa outros alinhamentos do tipo float, não é necessário fica a gosto do cliente.

Explicação extraída deste artigo.

Até mais!

Bom era o seguinte, quando o site abre no Firefox ou IE 7 e 8 a minha caixa que continha um formulário estava tudo ok, mas ao abrir no IE6 dava um “padding-top” e “padding-bottom” que nem Deus saberia de onde vem, haha… dai usei o seguinte código para dizer o quando o IE for o navegador mude o tamanho

_div#divTeste{ /* Para o IE*/
     padding-top:0px;
     padding-bottom:0px;
}

/* Ou então */

* div#divTeste{ /* Para o IE*/
     padding-top:0px;
     padding-bottom:0px;
}

Com este “underline” ele fica só par ao Explorer e funciona, façam um teste, as vezes vipor ai este código abaixo:

* html ul.menu { heigth: 1% }

Aqui temos o seguinte para o explorer 6 (*) todo o html->ul.menu terá uma latura de 1% e por ai vai, assim poderá corrigir algum conflito do IE6 para novos navegadores, mas infelizmente não todos…