Feeds:
Posts
Comentários

Archive for the ‘CSS’ Category

Conhecimento: um pouco de css
Nível: médio

Quando criamos um site, seja utilizando Joomla, seja um site estático, uma das coisas mais chatas fica por conta dos botões.

(mais…)

Read Full Post »

Este é o terceiro da série e que irá mostrar como fica no joomla. Se perdeu os dois primeiros, clique aqui para ler o primeiro post e clique aqui para ler o segundo.

Como vamos resolver o problema de ter ou não o lado direito do nosso template ou não?

MERDA, O CODIGO NAO FICA LEGAL. BOM, SELECIONE O CODIGO E DE PASTE EM OUTRO LUGAR!

(mais…)

Read Full Post »

Este é o segundo da série.

Se perdeu o primeiro, clique aqui antes de continuar…

No artigo anterior tivemos um layout de 3 colunas básico.

(mais…)

Read Full Post »

Estudo avançado sobre como criar um template de 3 colunas para Joomla 1.5

A quem se destina: Desenvolvedores de template
Nível: Médio a Avançado
Requer: Conhecimento de HTML, CSS e Joomla

(mais…)

Read Full Post »

Isso é só pra deixar registrado. Se você fizer um div (com overflow: auto) onde irão aparecer os textos e depois dentro tiver um elemento com position: absolute, isso vai fuder tudo sua vida no Internet Explorer.

Inclusive esse bug é usado pra simular o position: fixed para o IE!

Vai entender!

Read Full Post »

Zerar Estilo

Por falha – minha opinião – o default de cada elemento html tem certas propriedades que necessitam serem zeradas ou padronizadas para que você tenha melhor controle do modo de apresentação de sua página. Para template do joomla, eu uso o seguinte código antes de tudo:

(mais…)

Read Full Post »

Área de Download

Recentemente peguei um projeto que a minha chefa pediu uma área de downloads que fosse algo simples, prático e intuitivo.

(mais…)

Read Full Post »

Borda nas fotos

Quem viu que mudei o layout do meu blog deve ter percebido que todas as fotos do conteúdo tem uma borda branca e sombra. Como é feito isso? Fui verificar o css e ver como é feito e eis aqui o segredo.

Tem uma imagem de 800X800 com a borda direita e embaixo pintados. Como pode ver aqui:
shadow.gif

Agora a parte legal é o css pra fazer essa borda encaixar na foto:

img
{
background:url(shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border:none;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}

img = pra todas as imagens do seu site. Se quiser algo mais especifico você terá que fazer uma hierarquia de seletores.
background:url(shadow.gif) no-repeat right bottom = colocar a sombra atrás da sua imagem posicionado na direita e embaixo.
padding:4px 10px 10px 4px = borda branca. Mas nas posições direita e embaixo, devem ser maiores para mostrar as sombras. Lembrando: padding: topo direita embaixo esquerda;
border: none = resetar as bordas da imagem que por ventura o navegador coloque.
e os outros dois border é pra especificar uma borda no topo e do lado esquerdo. Sem essas bordas, o topo e o lado esquerdo iria ficar sem contorno.

Read Full Post »

Descrição: Ao setar na Configuração Global do Joomla para não mostrar os icones de pdf, impressora e enviar a um amigo, já percebeu que o heading de um conteúdo estático irá ficar somente limitado ao tamanho do texto escrito.

Veja o exemplo abaixo:
headerproblema.gif

Para se ter esse efeito usei a seguinte definição de css:

.contentheading {
font-size:15px;
font-weight:bold;
text-transform:uppercase;
border-bottom: 1px dotted #ccc;
}

Vamos supor que você queria a linha tracejada ocupando 100% do cabeçalho! Mesmo que eu colocar width: 100% no seletor acima, ainda assim o contentheading nao irá ficar 100%. O segredo está em colocar isso:

.contentpaneopen {
width: 100%;
}

Que resultará nisso:
headercorreto.gif
O que esperavamos que acontecesse…

É isso ai… até a próxima!!! Um ótimo 2007 pra todos e até ano que vem!!!

Read Full Post »

Descrição: O básico do básico de css pra poder fazer achar onde está os erros

Linguagem: CSS

Hoje a dica é curta e grossa. Quem se aventurou a criar um layout do zero ja deve ter arrancado os cabelos pra tentar entender como um div esta se comportando. Vira e mexe, quebra o layout.
Como fazer então, já que os editores não dão suporte direito a isso?

Em seu elemento use o: “border: 1px solid #000” nas classes e identificadores.

Assim, todas as divs que você colocar, irá ter borda preta e possibilitar depurar melhor o comportamento do elemento.

Simples e rápido!

Read Full Post »

Older Posts »