Recently in CSS Category
Quando declaramos posição relativa ( position: relative ) não acontece nada no posicionamento do elemento, mas quando incrementamos as propriedades top, right, bottom e left o elemento de movimenta apartir da sua posição inicial até o respectivo valor definido.
As propriedades right e left são destinadas a controlar o elemento no eixo X, respectivamente as propriedades top e bottom controlam o elemento no eixo Y.
Exemplo:
XHTML
CSS
Teste essa parte do código e veja que estão normais as divs.
Agore declare as seguintes propriedades e valores para a div#dois:
Veja que o resultado é que a div#dois sai da sua posição inicial até a distância definida pelo top e left, mas perceba que seu espaço aonde ocupava é preservado.
Como na imagem seguinte:
O bom é que essa forma de trabalhar com posicionamento relativo não importa se o elemento é bloco ou inline, qualquer forma renderiza igual.
Créditos:
- Livro Maujor - Conteúdo baseado do livro Construindo Sites com CSS e XHTML (12.1.1.3)
Junto com os amigos do trabalho estamos sempre buscando uma forma interessante de documentar nossos padrões. A idéia começou quando o Carlitos criou alguns pdfs de Checklist para desenvolvimento XHTML e CSS. Para abranger mais o pessoal de tecnologia criou uma wiki para que todas equipes colocassem seus padrões, dicas e soluções. Só que acabou não dando muito certo... Então resolveram usar o Vanilla, é um sistema de fórum e que deu muito certo e ainda está online e funcionando, mas só que é restrito. O problema é que a gente não sossega em quanto só ajudamos "nóis" mesmos, por isso após alguns probleminhas com servidores que até passo pela cabeça a possibilidade de perder todas nossas documentações que então veio uma luz! Por que a gente não faz um blog só nosso com os nossos padrões? Eu tinha um domínio que comprei faz um tempo com a intenção de fazer um blog comunitário sobre web standards, então porque não usar ele?
Criamos um blog sobre web standards aonde o tema é: web standards, XHTML, CSS e soluções de problemas no dia-a-dia.
Em parceria com Lincoln, Carlitos, G4 e Eu.
A idéia do blog não é ficar discutindo e mostrando como foi a palestra do Picachu na Campus Party mas sim apresentar como nós resolvemos nossos problemas como equipe.
Acompanhe por feeds, veja nosso blog sobre web standards!
Geralmente temos que declarar a propriedade float para alguns elementos, só que precisamos que o elemento pai ( container ) expandisse dependendo do conteudo do elemento que tem float.
Sua forma de resolver isto ainda é usar um div.clear, br.clear, hr.hide ou algo do tipo? Legal. Eu também usava isso :( , o texto a seguir apresenta algumas opções um pouco mais interessantes.
Já estão disponíveis faz um bom tempo mas nunca falei nada aqui no blog, aliás falei até coisa que não devia..
Médoto com overflow.
Exemplo, escreva o HTML seguinte:
Declare o seguinte CSS para o HTML:
O resultado será:
Acrescente a propriedade overflow ao elemento pai ( nesse caso, o ul ):
Atenção! Caso o elemento pai tenha alguma largura ( width ) não será necessário o código seguinte. Mas se o elemento não tiver largura definida adicione o seguinte código para o Internet Explorer 6.
Agora sim, tudo ok.
Esse é um método legal. Sempre uso esse quando não posso usar o proximo método que vou apresentar ( que eu acho bem mais prático ).
Médoto com class="contemfloat"
Use o mesmo HTML só removar todo o CSS do exemplo anterior.
Copie o códido CSS abaixo e cole em seu arquivo de estilos.
agora só defina a class no HTML:
Esse método foi inventado por Tony Aslett. Tem gente que não gosta, mas eu uso praticamente todos os dias e sou uma pessoa feliz.
Como ninguém é dono da verdade e todos cometem erros, eu preciso me redimir pela falta de conhecimento e cabeça dura ( leia também como: "Universitário de merda e chato" ). Esse post é um tema pouco que polêmico ( pelo menos já foi... ), então caso seja contra esses métodos ou tenha alguma opinião comente o post. Precisamos aprender juntos, cada um contribuindo com seu conhecimento a fim de chegar a uma web com seu potencial máximo !
Desculpem, mas eu não conhecia o esquema do contemfloat e nem do overflow antes de entrar na Mídia Digital. É que eu via no site da mozilla os códigos com hr e ai pensava que era o correto, não que seja errado, mas é que não é muito legal usar hr.
Mas então é isso, valeu galera, té!
Na Mídia Digital, por questões de compatibilidade entre os navegadores, nos adotamos como padrão a unidade de medida "em".
"em" é uma medida relativa, isso quer dizer que ela toma como base um valor de referência anteriormente definido.
As quatro unidades de medida relativa que existem são: %, em, ex e px.
Tá mas vamos para a prática!
Escreva em um arquivo html, as seguintes marcações:
Dentro do body
Dentro do head
Explicação:
html e body é ".68em".
A o tamanho da fonte padrão dos navegadores é 16px, então pegamos 11px, que é o valor que queremos, e dividimos por 16px
11/16 = 0.68
11px é igual a 0.68em de 16px. Endendeu?
A lógica é essa! Pegamos o valor que queremos e dividimos pelo valor relativo(um valor de referência que foi definido anteriormente, apenas para lembrar).
x/(valor-relerência) = (valor-que-desejamos).em
Então, quais são os valores dos elementos do html acima. h1, p e strong?
| elemento tag | cálculo para restaurar o valor em pixel. | valor aproximado(~=) |
|---|---|---|
| h1 | 1.45(em) * 11(px) | 16px |
| p | 1.1(em) * 11(px) | 12px |
| p strong | 1.16(em) * 12(px) | 14px |
O layout que montado com essa medida é conhecido como layout elástico, por causa deste comportamento relativo entre as medidas, sejam elas font-size, width, padding, etc. Essa é uma simples explicação sobre essa medida. Veja também o blog do Carlitos, ele entende bem sobre o assunto. Experimente usar também!
Links
Publicado em um endereço para testes, a versão traduzida para português do Validador CSS, graças ao colaborador Maurício Samy Silva.
"Muitíssimo obrigado pelo seu maravilhoso trabalho", Olivier Thereaux do W3C
A versão traduzida do validador se encontra em http://qa-dev.w3.org:8001/css-validator/ e a listagem das traduções disponíveis está em: http://qa-dev.w3.org:8001/css-validator/translations.html
Apelo do W3C:
"Não hesite em usar a ferramenta no seu endereço de testes e procurar por erros de grafia ou de tradução."
"... o W3C colocou a tradução em um endereço provisório para testes... se você encontrar algum erro de grafia ou de tradução, por favor mandar um e-mail para: maujorcss[arroba]maujor[ponto]com"
Links
Esse é o fim da era Dreamweaver, agora começou a era PSpad.
Por uma internet mais livre, produtiva e barata. Por que não PSpad?
PSPad é um editor gratuito. Você pode personalizar praticamente tudo que quiser. Não necessita de nenhum processo de instalação complexo. É só instalar e usar, e se quiser pode instalar várias extensões também. Suporta muitos tipos de arquivos e linguagens e ainda tem destaque de sintaxe.
PSPad possibilita trabalhar com macros, arquivos na área de transferência e modelos para automatizar tarefas repetitivas. Conta com um editor hexadecimal integrado, suporte a projetos, cliente FTP, gravador de macros, recursos de busca/substituição de arquivos, explorador de códigos, conversão de páginas de códigos e muito mais."
Sabe aquela história de um mundo com software livre? Então, é essa...
Veja a tabela de comparação:
| Editores | PSpad | Dreamweaver CS3 |
|---|---|---|
| Espaço | 9.27MB | 1GB |
| Idiomas | 18 idiomas mas, é multilanguage | 14 idiomas |
| Sistema operacional | XP/2000/ME/9x/Vista/2003 ou até em Win95 | XP SP2, Vista™ Home Premium, Business, Ultimate, ou Enterprise e Mac OS |
| Memória | 256MB | 512MB |
| Processador | 350MHZ | Processador Intel® Pentium® 4, Intel Centrino® Intel Xeon® ou Intel Core™ Duo (ou compatível) |
| Preço | 100% FREE | R$ 850,00 |
- Site: http://www.pspad.com/
- Faça Download do PSpad!
Parte do texto no blog do Maujor, link Permanente.
Tableless significa realmente sem tabelas, contudo Padrões Web não é e nem nunca foi desenvolver sites sem usar tabelas. Associar o nome Tableless aos Padrões Web é um erro altamente nocivo ao aprendizado. Tabelas são perfeitamente legais em marcações seguindo as recomendações do W3C, pois o elemento
TABLEtem o valor semântico de "apresentar dados tabulares" e não deve nunca ser substituido porDIV, um elemento sem valor semântico, quando se trata de apresentar dados.
- Portanto: Fora o termo Tableless do jargão Web Standards!
- À propósito: Vida longa para o sites do Élcio e Diego:
Maujor
Eu concordo totalmente!
Recentemente o Gonçalo, professor da faculdade Opet, pediu para eu dar um palestra para os alunos dele. Foi um processo de evangelismo dos Web Standards.
Alguns dos tópicos da palestra foram os seguintes:
- Desenvolvedor analfabeto
- WYSIWYG
- W3C
- Tecnologias interoperáveis
- Linguagens de marcação
- WAI
- Linguagem de formatação
- Web semântica
- RDF
Os slides estão a seguir. Para navegar pelas telas use as teclas: espaço, esquerda e direita.
Disponível para download (arquivo exe).
Lista completa das organização que são membros do W3C e que participam no grupo de desenvolvimento do CSS.
Observação: faço link apenas com aquelas organizações que realmente levam a sério.
- Adobe Systems Inc.
- Antenna House, Inc.
- AOL LLC
- Apple, Inc.
- Betfair Limited
- Disruptive Innovations
- Google, Inc.
- HP
- IBM Corporation
- Indus Net Technologies
- INNOVIMAX
- International Webmasters Association / HTML Writers Guild (IWA-HWG)
- Microsoft Corporation
- Mozilla Foundation
- Openwave Systems Inc.
- Opera Software
- Sun Microsystems, Inc.
- Universidad de Oviedo
Link
Vejam também o post do e-mail enviado para o Vagner Diniz, Gerente do W3C no Brasil. E descubra algo mais sobre padrões Web em relação ao Google e a Microsoft.
You can be proud of yourself!
XHTML
19 corretas em 8 minutos e 11 segundos.
CSS
19 corretas em 6 minutos 14 segundos.
É uma prova que contém 20 questões e não há limite de tempo.
Esse teste não é oficial, é apenas uma boa maneira de ver o quanto sabe, ou não sabe, sobre XHTML e CSS.
A sua pontuação é somada e receberá 1 ponto para cada resposta correta. No final do teste, sua pontuação total será exibida. O máximo é de possível são apenas 20 pontos.
Faça o teste, não é difícil!
Links
Amigos!
Recomendo
