Bert
Bos, Coordenador das atividades das
CSSCopyright © 1994–2021 W3C® Privacy policy
Criado em 5 de maio de 2001;
Atualizado qua 06 jan 2021 05:40:49 UTC
Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva
Ver index para todas as dicas.
O menu colorido mostrado a seguir foi criado com um elemento DIV e alguns elementos P dentro dele. O efeito visual foi obtido posicionando-se cada um dos elementos P individualmente e atribuíndo uma cor para o texto dentro dele (elemento P). Essa ténica funciona melhor quando os textos são curtos, pois o efeito baseia-se na sobreposição dos textos. Caso os textos sejam longos a sobreposição será em trechos também longos dificultando a leitura dos textos.
As regras de estilos deste exemplo são válidas e consistentes para criação de um menu com no máximo 10 itens. O nosso exemplo é constituído de 8 itens. Observe a marcação HTML do exemplo mostrado:
<div class="map"> <p id="p1"><a href="../../CSS/#news">O que há de novo?</a> <p id="p2"><a href="../../CSS/#learn">Aprendendo CSS</a> <p id="p3"><a href="../../CSS/#browsers">Navegadores CSS</a> <p id="p4"><a href="../../CSS/#editors">Ferramentas de autoria</a> <p id="p10"><a href="../../CSS/#specs">Especificações</a> <p id="p6"><a href="../../CSS/Test">Suite de testes CSS1</a> <p id="p9"><a href="/StyleSheets/Core">Core estilos do W3C</a> <p id="p8"><a href="http://jigsaw.w3.org/css-validator/">Validador CSS</a> </div>
Observe a atribuição da classe com o valor “map” para o elemento DIV destinada a definí-lo como container para o menu e o atributo ID para cada um dos elementos P. A cada elemento P deverá ser atribuido valores para ID (diferentes) denominados p1, p2,... ou p10. Não é obrigatório atribuir os valores para ID em order sequencial tal como fizemos no nosso exemplo. Você pode vincular a folha de estilos do menu transcrevendo as regras CSS para a folha de estilos da página, usando a diretiva @import ou ainda usando o elemento LINK para importar o arquivo map.css diretamente do site do W3C, conforme mostrado a seguir:
@import "http://www.w3.org/Style/map.css";
ou
<link rel="stylesheet" href="http://www.w3.org/Style/map.css">
Observe a seguir a explicação de como funciona a folha de estilo. Ela começa definindo as regras CSS para o elemento DIV com a classe de valor "map". Cria um espaço com altura igual a 190px para acomodar os elementos P. A cada elemento P com valor ID igual a p1 até p10 é definida uma cor de fonte e um posicionamento dentro do espaço criado para o elemento container DIV. O posicionamento é definido com uso da propriedade 'margin': uma margem superior negativa desloca o elemento P para cima dentro do DIV e uma margem inferior positiva assegura que o elemento P seguinte posiciona-se inicialmente na parte inferior do DIV.
(O ponto negativo da folha de estilos é que tudo foi definido em px. Se o navegador a servir o menu oferece suporte consistente às CSS você poderá usar porcentagens em lugar de pixels.)
DIV.map { /* Cria espaço para os links */
padding-top: 190px;
margin-left: -2em; /* Ajuste conforme suas necessidades... */
margin-right: -2em; /* Ajuste conforme suas necessidades... */
margin-bottom: 4em;
margin-top: 5em;
clear: both;
text-shadow: 0.2em 0.2em /* 0.2em */ silver }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
text-decoration: none }
#p1, #p1 A {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}
#p1 {text-align: right; margin: -185px 0 85px 0} /* top right */
#p2 {text-align: left; margin: -190px 0 150px 5%} /* top left */
#p3 {text-align: right; margin: -90px 35% 50px 0} /* center */
#p4 {text-align: right; margin: -95px 0 55px 0} /* center right */
#p5 {text-align: left; margin: -130px 0 30px 0} /* center left */
#p6 {text-align: left; margin: -40px 0 15px 35%} /* bottom center */
#p7 {text-align: right; margin: -80px 0 0px 0} /* bottom right */
#p8 {text-align: left; margin: -40px 0 20px 3%} /* bottom left */
#p9 {text-align: right; margin: -25px 0 5px 0} /* bottom right */
#p10 {text-align: left; margin: -130px 0 70px 0} /* center left */
Obviamente você poderá usar fontes, cores e posicionamento de acordo com as suas preferências e até mesmo criar regras de estilos para menus com mais de 10 links. Observe que para o nosso exemplo definimos valores negativos para as margens esquerda e direita do elemento DIV. Isso foi feito com a finalidade de fazer com que o menu tenha dimensões maiores que a ocupada pelos textos, contudo pode ocorrer que não haja necessidade de aumentar as dimensões do menu e nesses casos deveremos remover as declarações de margens negativas.
O menu "quebra" no navegador Netscape 4. É uma falha do navegador e por essa razão criamos a folha de estilos hospedada em map-ns.css que é semelhante a nossa folha de estilos e destinada a servir o menu para aquele navegador. Para que a folha de estilos do exemplo mostrado e a folha de estilos para o navegador Netscape 4 funcionem juntas vincule ambas à página que contém o menu usando a seguinte marcação na seção HEAD do documento:
<link href="map-ns.css" rel="stylesheet" type="text/css"> <link href="map.css" rel="stylesheet" type="text/css" media="all">
Agentes que implementam as CSS de forma consistente interpretarão ambas as folhas de estilos e as regras constantes da segunda folha sobrescrevão as da primeira. O Netscape 4 não interpretará a segunda folha de estilos pois não entende o atributo "media" e, assim, aplicará os estilos constantes da primeira folha de estilos, ignorando a segunda.
Talvez você esteja se perguntando o porquê de termos posicionado com uso de margens negativas, quando tudo indica que devêssemos usar posicionamento absoluto. A realidade é que o mesmo efeito poderia ser obtido com uso das propriedades 'position', 'left' & 'right'. A razão para usar margens é que o posicionamento será honrado, também, nos navegadores que suportam somente as CSS1.
Bert
Bos, Coordenador das atividades das
CSSCriado em 5 de maio de 2001;
Atualizado qua 06 jan 2021 05:40:49 UTC