P, body, td, tr, div { font-style: normal; font-weight: normal; font-size: 12px; color: #50283F; font-family: verdana; line-height: 17px; } body scrollbar-3dlight-color:006699; {scrollbar-face-color: black; scrollbar-highlight-color: #50283F; scrollbar-3dlight-color: black; scrollbar-darkshadow-color: #50283F; scrollbar-shadow-color: #50283F; scrollbar-arrow-color: #50283F; scrollbar-track-color: black;overflow:auto;} a{ color: #ffa8c7; text-decoration: none;} a:link{ color: #ffa8c7; text-decoration: none;} a:visited{ color: #ffa8c7; text-decoration: none;} a:active{ color: #ffa8c7; text-decoration: none;} a:hover{ color: #bbccae; border: 1px dotted #bbccae; background-color: #eef3e9;} B{ color: #bbccae; border-bottom: 1px dotted #ffc1d7;} I{ color: #ffc1d7; font-size: 11px;} U{ color: #ffa8c7; border-bottom: 1px solid #bbccae; font-family: arial ;} STRONG{ color: #bbccae;} textarea {font-family: tahoma; font-size: 10px; color: #6D0101; background: #FCF4EF; border-right: 1px solid #549EE9; border-bottom: 1px solid #549EE9; border-left: 1px solid #FFF; border-top: 1px solid #FFF; margin-top: 2px; margin-right: 2px; padding: 1px; height:140px; width:415px; overflow-x:hidden;} #textarea2 {font-family: tahoma; font-size: 10px; color:#6D0101; background: #FCF4EF; border-right: 1px solid #549EE9; border-bottom: 1px solid #549EE9; border-left: 1px solid #FFF; border-top: 1px solid #FFF; margin-top: 2px; margin-right: 2px; padding: 1px; width:253px; height:31px; overflow-x:hidden;} #textarea3 {font-family: tahoma; font-size: 10px; color:#6D0101; background: #FCF4EF; border-right: 1px solid #549EE9; border-bottom: 1px solid #549EE9; border-left: 1px solid #FFF; border-top: 1px solid #FFF; margin-top: 2px; margin-right: 2px; padding: 1px; width:88px; height:31px; overflow-x:hidden;} .table2 { color: #bbccae; border-bottom: 1px solid #bbccae; text-align: right; background-image: url('http://www.drikoti.net/Goodies/CSS/Lays/Tables/verde.png');} #nav a {color: #483058; ;font-size: 12px;text-decoration: none;text-align: center;background-color: #BA789B; border-bottom: #301825 4pt solid; } #nav a:hover {color: #7B0028; ;background-color: #EFE2E9;font-size: 12px; border-bottom: white 4pt solid; }

Link-me

Gostou do tuto e quer linkar? Claro, fique a vontade.



Quadro de Avisos

Ultima Atualização: 17/12/2009.
-Adicionei um novo layout.
-Quer ser parceiro da petpage? Basta enviar um neomail para mim com o seguintes dados:

Endereço da sua petpage:
Sobre o que é a sua petpage:
Peço que tenha um button de 88x31 para caber ali na caixinha de cima :3

Página criada por Bia__x

Nijul, o Lorde


Em breve texto sobre Nijul :3
moldes de lays

Tutorial de Codificação

Introdução

Bem vindo(a) guest ao meu tuto de codificação. Gostaria de deixar claro que codificar é a coisa mais fácil do mundo :) Só é preciso achar as coordenadas e colocar no molde de código. Assim, você cria seu próprio layout, do jeito que quer. Espero que goste, qualquer dúvida, por favor me envie um Neomail para a minha adicional.

Usando o paint



Codificar no paint é fácil, é uma boa opção para quem não tem nenhum programa além dele.


Codificando um layout contínuo:

1- Abra seu layout no paint e selecione a ferramenta retângulo (imagem ao lado). É com ela que você irá achar as coordenadas.
Com a ferramenta selecionada, selecione todo o espaço de onde ficará seu texto no layout (a coluna que você fez), e logo em seguida, sem soltar o mouse, tire print screen ( - essa tecla fica no topo do teclado, logo após o F12. No seu teclado ela pode estar escrita de outra forma como PrtScn SysRq, é a mesma coisa). Observe a imagem para ver como fica a parte selecionada:





(Logo após selecionar toda a parte onde ficará seu texto no layout , tire print screen.)


2- Abra um novo arquivo do paint e cole lá o print screen que você tirou. Ache, embaixo e no canto, as coordenadas:


(As coordenadas da sua coluna)


Essas serão as coordenadas que você substituirá no código. Abaixo segue a legenda para você entender:


(Erro na imagem: não é WIDHT e sim WIDTH)

3: Agora, é hora de você colocar esses números no código e assim, codificar o seu lay. Pegue o código abaixo e substitue onde é necessário.

Aqui ficará seu texto !!

Onde têm ENDEREÇODOBACKAQUI.jpg é onde você deve colocar o endereço do Background do seu layout (o fundo). Para fazer o background, siga o tuto abaixo:

1- Abra seu layout no paint.
2- Vá em Imagem no topo e clique em Inverter/girar..


3- Selecione Inverter verticalmente:



4- Seu lay irá ficar de cabeça para baixo, isso é normal. Clique em Imagem - Atributos:



5- Irá abrir uma caixinha. Em altura coloque um número menor de 10 que faça aparecer somente a coluna. Eu coloquei dois.



No final, você terá o background pronto. Veja como ficou o meu:



Hospede a imagem e substitua no código.

E pronto, você acaba de codificar um layout, em menos de 30 minutos :) Espero que tenha conseguido!

Codificando um layout de caixinha

Codificar esse tipo de layout é a mesma coisa que o de coluna, porém no código, você acrescenta o overflow:auto; que faz ter barra de rolagem.
Então você só precisa achar as coordenadas, como explicado acima e substituir no código normalmente:

Seu texto ficará aqui!!

Se seu layout tiver mais que uma caixinha, basta adicionar o código, no final: Não se esqueça de achar as coordenadas para essa outra caixinha.

Seu texto ficará aqui!!

Usando o Fireworks



O fireworks é um programa de edição que eu uso para fazer gráficos, inclusive codificar. Se você têm o programa, pode codificar com ele, é fácil e mais rápido que no paint.

1- Abra seu layout em File - Open.
2- Selecione a ferramenta Rectangle Hotspot Tool:


3- Com ela, Selecione toda a parte onde terá seu texto, a coluna ou a caixinha.



4- Vá em Properties, em baixo, e onde tá escrito Hotspot tem as coordenadas:



No código abaixo, substitua com as coordenadas.

Coluna

Aqui ficará seu texto!!

Caixinha


Seu texto ficará aqui!!

Adicionar caxinha: (colar no final do código)

Seu texto ficará aqui!!

E pronto, seu lay está codificado :D




NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2013.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions