16:42
Administrador
As imagens de fundo:
Abaixo as imagens de fundo que utilizei para obter o efeito rollover.
Aqui uma dica: ao construir suas imagens de fundo para usar em elementos por CSS, tenha em mente que o usuário poderá ter configurado seu browser para exibir tamanhos de letras grandes ou mesmo outras definições que podem vir a afetar as dimensões de projeto do elemento HTML com imagem de fundo.
Assim, dimensione suas imagens de fundo maiores que a caixa do bloco do elemento HTML para fornecer um espaço extra de imagem e evitar que a imagem se repita em um fundo maior que o de projeto!
Usaremos imagens com 280 x 55 bem exageradas de propósito, como mostradas a seguir:
fundo_1.gif - imagem no estado do link em repouso
fundo_2.gif - imagem no estado do link com o mouse em cimaO elemento HTML (tag) para construção de menus:
Teoricamente qualquer elemento HTML (tag) capaz de descrever texto (p, h1, h2, ..., ul, ol, etc...) poderá ser estilizado para construção de menus. No entanto, dentre todos eles, o elemento que maior flexibilidade, recursos, e facilidades propiciam a estilização é sem dúvida o elemento ul que define as listas não ordenadas nos documentos HTML.
Vantagens do uso do elemento ul:
O uso do elemento ul na criação dos menus com CSS tem as principais vantagens listadas abaixo:
no código HTML do menu você tem quatro elementos aninhados para aplicar estilos (quais sejam: div - ul - li e a ) - isto aumenta a flexibilidade para estilizar;
os critérios de acessibilidade ao seu documento são mais consistentes - na visualização do documento sem a aplicação da folha de estilo o menu será exibido de uma forma bastante conveniente;
com uso de uma só propriedade CSS (a propriedade display) você altera o layout de menu (em disposição vertical) para barra de navegação (em disposição horizontal);
são facilmente expansíveis - acréscimo de itens no futuro, isto é novos links.
O código HTML típico para um menu:
A seguir mostro o código HTML típico para a criação de um menu com 06 (seis) links (adiante você verá que este código é válido para qualquer número de links, podendo ser adaptado a qualquer necessidade atual e previsão de expansão futura - tamanho do menu). Este código servirá de base para desenvolvermos todo o estudo proposto neste tutorial.
O código HTML acima é renderizado no browser e apresentado da tela conforme mostrado abaixo:
Largura, portabilidade e especificidade do menu:
Para assegurar ao projetista, total controle sobre o posicionamento da lista que contém o menu bem como garantirmos que as regras CSS para os elementos HTML que compõem o menu (lista ul , li e link a ) não afetem as listas e links porventura existentes em outros locais do documento, vamos enclausurar o nosso menu em uma div e declarar as regras CSS para esta div. Chamemos esta div de: #menu
E a primeira regra CSS para nosso menu:
#menu {
position: absolute;
left: ## px; /*posição à direita*/
top: ## px; /*posição abaixo*/
width: 180px;
}
Nota: Esta regra CSS dá ao menu a portabilidade, isto significa que definindo os valores left e top, você coloca o menu exatamente onde quiser no documento e com a precisão de pixel!
Aqui você define também uma largura para a div. No caso, adotei igual a largura do menu que esta contido na div.
Posicionamento do menu:
Observe no esquema mostrado abaixo a chave para posicionar o menu no documento:
As coordenadas para position:absolute tem origem no canto superior esquerdo.
TOP: distância para baixo;
LEFT: distância para a direita.
Caso você queira inserir o menu dentro uma célula de tabela ou posicioná-lo relative ou float, basta você alterar as propriedades na regra acima.
Os marcadores de listas
Como você observou no item O código HTML típico para um menu, o browser renderizou nossa lista com um "marcador de lista" (uma bolinha preta na frente de cada item da lista) e um recuo para o texto.
Precisamos criar uma regra CSS para eliminar o marcador de lista e o recuo do texto.
A propriedade CSS que controla o marcador das listas é: list-style-type
Para remover o recuo do texto há um detalhe. Alguns browsers usam a propriedade margin e outros a propriedade padding para o recuo das listas!
(Ainda vai chegar o dia em que os fabricantes seguirão as web standards e todos usaremos e projetaremos seguindo uma só e universal norma e seremos mais felizes. E, os malditos bugs morrerão todos!)
Conclusão para nosso menu:
as regras CSS para ul são list-style-type:none; margin:0px; padding:0px;
#menu ul {
list-style-type: none; /*remove o marcador*/
margin: 0; /*remove o recuo IE e Opera*/
padding: 0; /*remove o recuo Mozilla e NN*/
font: bold 16px arial, helvetica, sans-serif;
}
Nota : Nesta regra CSS também definimos as características das letras que escolhemos para o menu.
Com mais esta regra CSS nossa lista será renderizada no browser conforme mostrado abaixo:
Home Page
Portfólio
Equipe tecnica
Parceiros
Album de fotos
Fale conosco
Estilizando o elemento: li
O elemento li define cada uma das linhas que contém os links.
A regra CSS adicionada a este elemento controla a distância entre os links pela definição da propriedade margin.
Separamos os links na vertical definindo um margem inferior, conforme mostrado abaixo:
#menu li { margin-bottom:1px; }
Estilizando o elemento a:
Dentro de li estão inseridos os elementos inline a:
E aqui mais uma dica: Para fazer com que toda a área da caixa do link seja "clicável" devemos declarar display:block; Se omitirmos esta declaração, somente será "clicável" as letras que definem o link!
É aqui que definimos também todo o "visual" da área "clicável". Assim cores, bordas, imagens de fundo, espaçamentos (padding) e efeitos visuais em geral são aqui definidos.
A regra CSS para nosso menu é a abaixo mostrada:
#menu a {
display: block;
padding: 1px 0 1px 25px;
border: 1px solid #000000;
width: 180px;
background-color: #339966;
color: #FFFFFF;
text-decoration: none;
background-image: url(caminho/fundo_1.gif);
voice-family: "\"}\""; /*Box Model Hack*/
voice-family:inherit;
width:153px;
}
body>#menu a {width:153px;}
Notas:
1-) Cálculos do Box Model Hack
Hack= Largura - (padding-left + padding-right +
border-left + border-right)
Hack= 180 px - (25 px + 0px +
1 px + 1px) = 180 px - 27 px = 153
px
2-) Observe que um padding esquerdo de 25px foi definido com a finalidade de se colocar o texto descritivo do link, a direita da figura da bolinha esquerda que tem no desenho do fundo!
Estilizando o elemento a para o estado mouse sobre:
Finalmente a regra CSS para fazer o efeito rollover no link!
#menu a:hover {
border: 1px solid #000000;
background-color:#FFFF99;
background-image: url(caminho/fundo_2.gif);
color:#000000;
}
Aqui "trocamos" o fundo (cor e imagem) e tambem a cor do texto descritivo do link para contrastar com o novo fundo.
Não há efeito de troca na borda! Se você quiser quiser trocar a borda no rollover, declare a nova borda nesta regra. Se não quiser, pode omitir a declaração nesta regra que a borda será herdada.
Estilizando a:visited e a:active
Deixamos a título de exercício a estilização dos estados "link visitado" e "link ativo".
Obrigado e visite sempre o site.
Posted in: Web Desing
0 comentários:
Postar um comentário