Mostrando postagens com marcador css. Mostrar todas as postagens
Mostrando postagens com marcador css. Mostrar todas as postagens

12 agosto 2009

O Internet Explorer 6 morreu.

Parece que o mercado estava apenas aguardando o anúncio de que seus usuários já são em menor número que os da versão 8 para se livrar de uma porção de velho código ruim. O quanto isso nos faz realmente avançar?

Semana passada foi o Digg, essa semana o YouTube. E a comunidade de desenvolvedores os segue fazendo barulho, anunciando que vai fazer o mesmo. Nós estamos fazendo nossa parte na Visie, eliminando a preocupação com o IE6 de nossos sites e convencendo nossos clientes a fazê-lo também. Já vai tarde.

Mas não é tempo de comemorar, ainda há muito trabalho a fazer. Há oito anos o Zeldman publicou seu célebre artigo To Hell With Bad Browsers, em que nos explicava porque devíamos abandonar o suporte aos navegadores 4.0. O ponto básico era não ter que fazer várias versões do mesmo site. Uma versão apenas, com bom layout CSS, podia funcionar para todo mundo, com todas as vantagens dos padrões web, mas não nos navegadores 4.0.

Bom, fazem oito anos. OITO LONGOS ANOS! Há oito anos que podemos escrever uma versão só de cada site, desde que saibamos escrever hacks de CSS e ajustes de float para o Internet Explorer 6. Há oito anos que estamos repetindo o fato de que o Internet Explorer 6 é a pedra que restou em nosso sapato. Há oito anos que sonhamos em não ter que escrever hacks.

A morte do Internet Explorer 6 significa apenas isso: poder usar PNG transparente e não ter que escrever hacks (ou não ter que escrever tantos hacks.)

A Microsoft passou oito anos sem atualizar seu navegador para nos dar exatamente o que? PNG transparente? Nesse período, Firefox, Opera, Safari e Konqueror estão trabalhando em coisas como controle de opacidade, CSS transform, bordas com imagem, sombras, media queries, colunas e os maravilhosos novos seletores do CSS3. Coisas maravilhosas que você já pode usar, mas a maioria de seus usuários não vai ver porque usa Internet Explorer.

A morte do Internet Explorer 6 nos leva apenas ao lugar onde deveríamos ter chegado há oito anos: sites sem hacks. A Microsoft ainda está algumas gerações atrasadas e, se queremos usar CSS 3 e HTML 5 um dia, é bom parar de comemorar e voltar ao trabalho. Há um mundo para mudar.

Artigo retirado do site:Tableless

O drama entre o nosso "querido" INTERNET EXPLORER e o CSS.

CSS: Problemas comuns com internet explorer 6 e como resolvê-los

Você faz o seu layout com todo cuidado, escreve o html totalmente web standards compliant e faz o CSS bem estruturado. Arruma cada detalhe e confere cada mudança no firefox e internet explorer 7. Pronto. Terminou. Perfeito. Agora só falta testar no internet explorer 6. Nooossa!…. Está tudo errado. Maldito ie6!!!

Acho que todo mundo já passou por isso algum dia e provavelmente ainda vai continuar passando, pois mesmo com ie7, firefox e chrome ainda tem muita gente usando ie6.

Por isso aqui vão algumas dicas para resolver os problemas mais comuns com o velho navegador da Microsoft.

“A minha div está com a margem maior [duplicada]!”

Esse é um dos bugs mais comuns. Quando um elemento usa float:left e tem uma margem esquerda [margin-left] o internet explorer 6, sabe-se lá por quê, duplica o valor desta margem.
Solução:
Basta adicionar um display:inline na div ou em outro elemento que apresente esse problema.

“Tenho uma div com 100% de altura [height:100%] mas não está funcionando.”

Quando você tem uma div com 100% de altura dentro de outro elemento sem altura definida o internet explorer 6 não ‘entende’ e exibe o layout de maneira errada.
Como resolver:
Defina uma altura fixa para o elemento que contém a sua div.

“Minhas imagens PNG estão sem transparência”

É. IE6 não renderiza corretamente PNGs com transparência, o que torna seu uso um pouco arriscado, mas não impossível.
Solução:
Existe um patch quase desconhecido lançado pela Microsoft que corrige este problema, adicione ao seu CSS:
back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”);

“O Layout tem duas [3, 4] colunas com float:left mas uma delas sempre “cai” pra baixo da outra ao invés de ficar ao lado”

Isso também é comum, e pode ter dois motivos. Primeiro: se a sua coluna tem margin-left, o internet explorer 6 pode estar duplicando a margem então o espaço restante acaba sendo insuficiente e a sua coluna “cai”. Segundo: mesmo que a sua coluna tenha uma largura definida, se houver qualquer elemento com largura maior dentro dela, o internet explorer 6 irá expandí-la.
Como resolver:
Primeiro, se sua coluna tem margin-left, coloque um display:inline pra ela.
Se o problema não for esse, provavelmente existe algum elemento forçando a largura da coluna. Procure por este elemento e arrume a sua largura. Se você não está encontrando coloque um overflow:hidden na sua coluna.

“Meus itens de lista estão com o marcador desalinhado”

Provavelmente você está usando padding-top no seu

  • .O ie6 não lida muito bem com paddings.
    Solução:
    Troque o padding-top por margin-top.

    E o gran finale:

    “O ie6 está duplicando o final da minha última
  • , ou do meu último parágrafo!”
  • Esse bug é chato. Muito chato. Acontece por que o ie6 sempre “duplica o final do conteúdo do último elemento de uma série elementos com float:left que tenham comentários entre eles”. Acredite ou não, é isso.
    Como resolver:
    Primeiro, tente retirar todos os comentários entre estes elementos. Se não for possível, coloque float:none nestes elementos e trabalhe com largura, altura e position para posicioná-los corretamente.

    Artigo retirado do site:Top rated never dies


  • O nosso querido IE e o CSS

    Tutorial CSS: Internet Explorer Conditional Comments


    Qual web designer nunca teve que trabalhar horas a mais em um arquivo CSS por causa de problemas de incompatibilidade com o nosso queridíssimo Internet Explorer? Então com certeza, você sabe o que é ou pelo menos já ouviu falar em Conditional Comments, certo? Se não sabe, acesse este artigo e aprenda a utilizar esta ferramenta para contornar os problemas do IE.

    Tudo começa pelo fato que cada versão do Internet Explorer (IE), interpreta o CSS de uma determinada maneira, o que pode ocasionar do design que está funcionando em browsers como Firefox, Opera e Safari por exemplo, ser exibido de uma forma totalmente errada no IE. Os Conditional Comments, são comandos, ou melhor, são TAGs reconhecidas apenas pelo IE. Estes comandos são utilizados para dar instruções espefícas apenas para o IE. OsConditional Comments são suportados a partir da versão 5 e basicamente são empregados para definir um CSS específico para cada versão do IE que o web designer desejar. A estrutura básica de um Conditional Comment é a seguinte:

    Falando sobre os operadores utilizados no código

    gt = greater than - superior a
    gte = greater or equal - superior ou igual a
    lt - less than - inferior a
    lte - less than or equal - inferior ou igual a


    Mais um problema resolvido ...

    Resolvendo os problemas de posicionamento das layers

    Olá pessoal, que bom estar aqui mais uma vez com vocês. No artigo de hoje falaremos sobre um problema que muitos desenvolvedores se esbarram com ele e infelizmente muitos deles não conseguem resolver. Abordaremos a questão sobre o posicionamento das "layers" no Dreamweaver.

    O motivo de muitos não conseguir resolver os seus problemas está no seguinte: a grande maioria não possui um conhecimento sobre a linguagem em que está trabalhando e estão tão acostumados a simplemente utilizar a interface do Dreamweaver. Outros não tem disposição de consultar ao Google ou o excelente Fórum iMasters, por exemplo.

    Bom, vamos ao assunto. Na aba Layout do Dreamweaver, existe a seguinte opção: Draw Layer, observe a imagem abaixo:

    Com ele, você poderá desenhar as tais "layers" em sua página e o Dreamweaver se encarregará de posicioná-las e definir suas características como: largura, tamanho, posicionamento, entre outros para você.

    Observe na imagem de exemplo abaixo, o resultado de uma "layer" desenhada no Dreamweaver:

    A medida que você vai desenhando as "layers", o Dreamweaver vai nomeando-as de forma lógica e da seguinte forma:

    Layer1">

    Ou seja, como foi a primeira "layer", o atribudo id da tag div foi definido como: Layer1. A próxima será: Layer2e assim sucessivamente.

    E ao mesmo tempo é criado o código CSS responsável pelas características da "layer", observe:

    O principal objetivo dos códigos CSS acima é o posicionamento da "layer". O tipo de posicionamento utilizado foi o absolute. O que significa dizer que tal "layer" será posicionada absolutamente com relação ao elemento body, será? Basicamente sim e é o que todos esperam.

    Mas, dessa forma, você terá sérios problemas quando alguém acessar a sua página em que a tal "layer" se encontra e esse alguém tiver utilizando uma resolução diferente da qual você pensou que ele estivesse. E com isso, você terá uma frustação: o posicionamento não ocorreu como o esperado.

    Observe as imagens abaixo:

    O meu objetivo é que a "layer" em laranja seja posicionada absolutamente, afinal estou utilizando o valorabsolute da propriedade position. Mas preciso que ela (layer) fique dentro do elemento que está na cor vermelho escuro. E como você pode observar nas imagens acima, em 800x600 ela se comporta bem, mas em 1024x768 não. Então, como resolver? Vamos lá:

    Como dito anteriormente, a "layer" foi posicionada tendo como base o elemento body e não o elemento em vermelho escuro. E uma vez utilizado a propriedade position com o valor absolute, removemos o elemento de seu fluxo normal na página em que ele se encontra.

    Então, o que precisamos fazer é posicionar a "layer" em relação ao elemento em vermelho escuro e não com relação ao body. Primeiramente, você deve certificar que na codificação HTML a "layer" está englobada pelo elemento em que você deseja tê-lo como referência. Observe:

    E para torná-la uma referência para a "layer", proceda assim com as CSS:

    A sugestão é a seguinte: crie uma div e dentro dela coloque tudo que a página irá conter e defina a propriedade CSS demonstrada acima para ela. Dessa forma, os elementos dentro dela não se posicionarão com relação ao elemento body, mas sim através dela. Sendo assim, independemente da resolução que alguém estiver utilizando, você não terá problemas quanto ao posicionamento das "layers".

    Dica retirada do site: Imasters

    11 agosto 2009

    Criar e colocar menu horizontal abaixo do título



    Neste tutorial vou ensinar a inserir um menu bem legal abaixo do título do blog apenas com HTML e CSS. Esse menu é simples com botões que podem ser personalizados.

    Um menu na parte superior da página é forma mais útil de atrair o seu visitante a navegar dentro do seu site através de categorias pré selecionadas. Primeiramente você define qual o assunto principal do seu site, depois, cria páginas com essas categorias e os "linka" em um menu. No blog é a mesma coisa, pois cada "marcador" ou categoria é uma página e possui um link.


    1 - Primeiramente faça um backup do seu Template.
    Geralmente, alguns templates não estão habilitados a criar um elemento de página abaixo do título. Para permitir que adicionemos um elemento de página abaixo do título do blog, faça o seguinte, procure pelo seguinte código no HTML do seu blog:


    Mude maxwidgets='1', para maxwidgets='2' - você estará alterando a quantidade de elemento de página no campo Header.
    ude showaddelement='no' para showaddelement='yes' - você estará permitindo que o novo elemento funcione.
    2 - Visualize o template para ver se tudo funciona bem, salve o template e volte para"Elementos de Página"

    3 - Acesse esse site para gerar o seu menu

    4
    - No campo "How many links do you want in your list?" (Quantos links você deseja para a sua lista) selecione a quantidade de botões que você deseja no seu menu (Opções de 1 a 20).

    5
    - Pressione "Next".

    6
    - Aparecerá um monte de campos....cada linha corresponde a quantidade de botões que você selecionou....preencha da seguinte forma:
    Link Text - Nome do Botão (ex. Vídeos)
    Link Title - Nome que aparece quando se põe o mouse sobre o botão (Ex. Baixe vídeos)
    Link Destination (href) - é o link destino do botão (ex. http://meublog.com/videos)

    Preencha todos os campos desejados conforme as configurações acima, lembrando que cada linha corresponde a um botão, ou um link.
    7 - Você será redirecionado para a página onde escolherá o modelo do link. Selecione o modelo do seu gosto, conquanto que seja horizontal, uma vez que estamos fazendo um manu horizontal. Este menu poderá ser personalizado depois.

    8
    - Lá no campo "How to identify and style the menu" mantenha selecionado "id" e clique em"Next".

    9 - Pronto, agora foram gerados os códigos do menu. Na janela possuem dois campos, o de cima com o código HTML que irá construir uma lista com os referidos links do menu e do de baixo, com os códigos CSS, que irão estilizar esta lista e transformá-la em um menu.
    No campo "Here is the HTML for this list:" (Aqui está o HTML para a lista). Copie o código deste campo.

    10
    - No Layout do blog, adicione um elemento de página do tipo "HTML/Javascript" e cole o código copiado aí dentro (Teclas CTRL + V). Clique em "Salvar".

    11
    - Salve o modelo e acesse o HTML do blog. Volte para o gerador do MENU e copie o código do campo "Here is the CSS for this list:" (Aqui está o CSS para a lista). Agora novamente no blog, dentro do HTML, procure pelo seguinte código:
    body {
    Muita atenção! Depois da chave " { ", existem várias definições como background, color, etc, que são fechadas com outra chave " } ". É depois desta chave " } " que você irá colar o código copiado do campo CSS ("Here is the CSS for this list:" ).

    Visualise o modelo, se o menu aparecer corretamente, o processo está terminado.

    Seu menu deverá aparecer semelhante ao mostrado aqui no meu blog. Você poderá personalizá-lo tanto quanto puder através do CSS, lembrando sempre de fazer um Backup anteriormente para não perder seu modelo.

    Um site muito bom para obtermos dicas de CSS para estilização, é o site do Maujor. Disponibilizarei abaixo alguns links úteis para que você possa personalizar este menu. Abraços!
    Propriedade Background
    Propriedade Border
    Propriedade Text
    Outros menus e dicas
    Propriedade Font
    Mais posteriormente, irei ensinar a criar um sistema dentro do blog, na opção de cores e tipos de fonte, onde você poderá personalizar completamente o blog sem precisar entender de HTML ou CSS, apenas selecionando as cores e tipos de fonte.

    Entenda como funciona o HTML de um blog (básico)


    O blog é formado por páginas. Estando a opção ativada (que é padrão) no Blogger, sempre que criamos uma postagem o blog cria uma página para este blog, ou seja, ele não adiciona uma postagem em baixo da outra, como um documento no Word, somente quando estamos visualizando várias postagens na mesma janela.

    Sempre que desejamos inserir um conteúdo externo através de uma linguagem de programação no blog (Javascript, CSS, HTML, PHP, etc...), precisamos saber onde colocar. Devido a isso, venho orientá-los aos locais corretos onde podemos ou não colar algo....


    > A divisão do blog
    O blog é dividido em quatro principais partes, conforme a imagem ao lado:

    CABEÇALHO - É onde fica o título e a descrição do blog. Identificação: "header".

    COLUNA - Alguns blogs possuem mais de uma coluna e elas podem variar da direita para a esquerda e vice-versa. Na coluna podemos adicionar Gadgets (ferramentas).
    Identificação: "sidebar", "side-bar".

    CONTEÚDO - No conteúdo está a postagem, os comentários, data, hora, etc.
    Identificação: "main".

    RODAPÉ - Bom, o rodapé também é um espaço onde também podemos adicionar Gadgets (ferramentas).
    Identificação: "footer".

    >> A divisão dos códigos dentro do HTML do blog
    Agora que sabemos como um blog é dividido, restanos saber como identificar estas partes dentro dos códigos que compõe HTML.

    HEAD (cabeça)
    A - Esta parte é uma "declaração doctype", que "diz" ao navegador que tipo de programação está sendo usada na página. Qualquer página que esteja na internet, deve começar com essa declaração para que funcione perfeitamente.

    B - Aqui começamos o , ou a "cabeça" do HTML. Dentro desta tag ( ... ) iremos dizer como todo o HTML do blog irá se comportar. O HTML do blog está dentro da tag que quer dizer "corpo". Esta tag inicia assim que acaba o .
    Resumindo: A cabeça do HTML diz ao corpo o que fazer com o que está dentro dele, ou seja, o HTML. Certo?
    É dentro desta tag que vamos colocar todo o código CSS que existe no blog. Então agora sabemos que só podemos incluir o CSS no blog dentro da cabeça do html, ou seja, depois de .

    C - Aqui temos simplesmente os dados do autor, criador do template usado em seu blog.

    VARIÁVEIS
    Agora uma parte muito importante e muito últil também que existe dentro do Blogger. São as variáveis.

    As variáveis são formas muito úteis de personalizar as cores de qualquer elemento que exista no seu blog através da paleta de cores que o Blogger possui. Como? É muito simples. Veja o exemplo ao lado. A variável que faz aparecer a opção "Page Background Color" na paleta de cores do Blogger e permite alterar a cor de fundo de toda a página sem necessitar saber o código da cor. Uma mão na roda!

    Na próxima postagem irei ensinar a criar uma nova variável e automatizar toda a estilização do seu blog através da ferramenta Paleta de Cores oferecida pelo Blogger, sem contar que é possível alterar o tamanho, o tipo e estilo da fonte também!

    CSS
    Chegamos ao CSS. Na verdade as variáveis também são parte do CSS, mas deixa isso pra outro tutorial...
    99% dos blogs possui semelhanças em seus templates (Blogger) através da identificação e ordem das classes.

    Conforme a imagem ao lado, o nosso CSS começa a estilizar primeiro o corpo da página (não confunda com o corpo do HTML... vamos chegar lá!)

    Este body, é o corpo da página que agrega todas aquelas partes que vimos na imagem no início do tutorial (cabeçalho, coluna, conteúdo e rodapé). Digamos que o body da página oculpa todo o espaço da janela do seu navegador e dentro dele está o blog..

    HTML
    Agora chegamos ao HTML da página.
    Dentro do HTML da página está todo o conteúdo que existe no blog. São praticamente os "ossos" que fazem com que uma página exista, porém, um depende do outro (CSS + HTML = PÁGINA).

    O HTML começa depois de . A partir daí, temos os elementos que compõe o corpo, que são as DIVs, Tabelas, SPANs, Títulos, etc...

    Entendendo a lógica CSS e HTML
    A lógica do casamento destas duas liguagens de programação (além de fazerem um par perfeito), é simples e descomplicada. A título de exemplo eu vou simular uma página e explicar ao lado...

    Dizemos que é uma página HTML
    Iniciamos a “cabeça” da página
    Finalizamos os estilos com CSS
    Acabamos a “cabeça”
    Começamos o “corpo”
    sample">
    Criamos um element com o nome “sample”
    CONTEÚDO
    Conteúdo do elemento
    Fechamos o elemento
    Fechamos o corpo
    Fechamos a página em HTML.

    Copie o código (somente o código) acima dentro de um bloco de notas e salve com o nome: "pagina.html". Depois abra com dois cliques..... irá aparecer uma caixa preta escrita "CONTEÚDO" em branco. Essa é a sua página...o seu blog!!
    Espero que isso ajude na compreensão! Boa sorte!

    Artigo retirado so blog do Palito