Feeds:
Posts
Comentários

Archive for the ‘CSS’ Category

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.

Anúncios

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 »

Explicação: Um elemento pode ter mais de uma classe, bastando deixando um espaço entre as classes.

Linguagem: CSS

Código:

<div id=”bloco”>
<ul>
<li class=”item”>item 1</li>
<li class=”item azul”>item 2</li>
<li class=”item”>item 3</li>
<li class=”item azul”>item 4</li>
</ul>
</div>

Exemplo:
– Lista com cores alternadas

Mais:
Pinceladas da Web

Read Full Post »

id ou class, qual usar?

Descrição: Id são únicos em um site, já classe não.

Linguagem: CSS

Código:

<div id=”bloco”>
<ul>
<li class=”item”>item 1</li>
<li class=”item”>item 2</li>
<li class=”item”>item 3</li>
<li class=”item”>item 4</li>
</ul>
</div>

Exemplo:
– Você quer que todos parágrafos tenham o mesmo estilo. Ai é classe que usa.
– Você quer que um bloco se comporte de determinada maneira. Ai é id que usa.

Mais em :
Bruno Dulcetti

Read Full Post »

Descrição: Muitos já devem ter tido problema em criar colunas de tamanhos iguais usando css.

Linguagem: CSS

A referência número um pra quem quer uma solução fácil desse problema é o artigo publicado no A List Apart.

Baseado nele escrevi o seguinte código:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Igualando fundo das divs</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #ccc url(bg.gif) repeat-y 50% 0;
/*manda repetir na vertical e colocar 50% no eixo x e 0 no eixo y */
}
#wrapper {
width: 776px; /*tamanho do site */
margin: 0 auto; /*centralizar */
}
#header {
background:url(topo.gif);
height: 108px;
width: 776px;
}
#left {
color: #0C3;
float: left;
width: 190px;
padding-left: 40px;
border: 1px solid #fff;/*borda para fim didatico*/
}
#right {
float: right;
width: 530px;
border: 1px solid #000;/*borda para fim didatico*/
}
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”></div>
<div id=”left”>
Item 1<br />
Item 1<br />
Item 1<br />
Item 1<br />
Item 1<br />
</div>
<div id=”right”>
Item 2<br />
Item 2<br />
Item 2<br />
Item 2<br />
Item 2<br />
Item 2<br />
Item 2<br />
Item 2<br />
Item 2<br />
Item 2<br />
</div>
<div id=”footer”></div>
</div>
</body>
</html>

As duas imagens utilizadas nesse exemplo são:
bg.gif

topo.gif

Explicando:
Bom, basicamente o que o tutorial do A List Apart diz é pra colocar uma imagem de fundo repetindo verticalmente que simule as duas(ou três colunas). Detalhe, tem que ser na tag body, pois ele deverá se repetir por todo o documento.

Mas então não poderemos ter o topo nem a base?
Ai é que vem a grande sacada, coloca-se um container (no meu caso “wrapper”) de mesma largura que a imagem de fundo das colunas e manda centralizar! Assim, se você colocar um header dentro do wrapper, a imagem irá casar com o background das colunas e irá parecer natural!

Read Full Post »

Como prometido, estarei nesse artigo mostrando como criar tab menu a partir do código gerado* pelo Joomla 1.5.

Para aqueles que não irão usar o Joomla, esse tutorial também é válido, pois o artigo aborda como criar tab menu a partir de uma lista(tag li).

Nosso código html é o seguinte:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Tab Menu</title>
<script type=”text/javascript” src=”js/tab_menu_over.js”></script>
<link href=”css/tab_menu.css” rel=”stylesheet” />
</head>
<body>
<div id=”nav”>
<ul>
<li><a href=””>Item 1</a></li>
<li><a href=””>Item 2</a></li>
<li class=”active”><a href=””>Item 3</a></li>
<li><a href=””>Item 4</a></li>
</ul>
</div>
</body>
</html>

A lista gerada pelo Joomla 1.5 é muito semelhante a isso. Então vou mostrar como fazer o css para que fique com essa cara:

tabmenu.gif

Nesse caso, o Item 1 está com mouse em cima e o Item 3 esta active(conforme código mostrado acima).

Então vamos ao código css:

/* CSS Document */
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
color:#FFF;
}
div#nav ul {
float: right; /*alinhamento do menu, se quer ele na direita ou esquerda*/
}
/* tab normal */
div#nav ul li {
float: left; /* somente pra ficar em uma linha os itens do li */
background:url(../images/tab_left.png) no-repeat top left;
padding-left:10px; /*deslocamento do tamanho da imagem tab_left.png pra que se encaixe certo */
margin: 1px; /* distancia entre as tabs */
line-height: 25px; /* altura dos tabs */
}
div#nav ul li a{
background:url(../images/tab_right.png) no-repeat top right;
padding: 0 10px 0 0; /* compensar o padding de div#nav ul li */
display:block; /* comportar-se como bloco */
}
/* tab com mouse por cima */
div#nav ul li:hover, div#nav ul li.over {
background:url(../images/tab_left_over.png) no-repeat top left;
}
div#nav ul li:hover a, div#nav ul li.over a{
background:url(../images/tab_right_over.png) no-repeat top right;
}
/* tab ativo */
div#nav ul li.active {
background:url(../images/tab_left_active.png) no-repeat top left;
}
div#nav ul li.active a{
background:url(../images/tab_right_active.png) no-repeat top right;
}

No IE 6, temos o problema de ele não reconhece uma pseudo-classe de um elemento que não é link. Trocando em miúdos, ele não reconhece li: hover. Somente reconhece a: hover. Para isso precisamos incluir um pequeno trecho de javascript que permite o hover do li.

O código é esse(retirado de A List Apart):

over = function() {
var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” over”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” over\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, over);

As imagens utilizadas são essas(estado normal):
tab_left.png(esquerda) tab_right.png(direita)

(com mouse por cima – hover)
tab_left_over.png(esquerda) tab_right_over.png(direita)

(li active)
tab_left_active.png(esquerda) tab_right_active.png(direita)

Hierarquia do documento:

js/tab_menu_over.js (o javascript)
images/(as imagens acima)
css/tab_menu.css (o css)
index.html (o html)

Uma breve explicação:

Mas qual a diferença de se ter a classe no “li” ao invés de ser no “a”? Se precisa de um hack em javascript só pra ter hover, qual o motivo de não se colocar no elemento “a”?

Pois bem, pra que tenhamos a mudança de imagem no caso de active, precisamos que a classe pertença ao li, já que ele que define a imagem esquerda para o menu. Retorno com uma pergunta para pensar: Se a classe fosse no “a” (ex: <li><a href=”” classe=”active”), como você saberia que o “li” tem que mudar a imagem quando a classe do “a” estiver active? Simplesmente não tem como!

Outra pergunta é por que é que não foi usado display: inline no lugar de se usar float: left no seletor: div#nav ul li?

Pois com float: left é possivel definir a altura dos tabs com o line-height: 25px;

* – para se gerar o código desse artigo, o pessoal de desenvolvimento criou um novo tipo de menu chamado simplesmente de list. O antigo flat list, virou flat simplesmente. E os horizontal e vertical (continuam sendo gerados com tags de tabela).

Read Full Post »

« Newer Posts - Older Posts »