André do Vale 76 Denunciar post Postado Agosto 20, 2007 Bem, vejo que uma das regras de acessibilidade dos padrões, é forncer um link que leve direto ao conteúdo.Este link, é de regra vir antes de tudo no body. Mas por quê? Bom, entenda:Pessoas com dificuldades de uso do mouse, pessoas cegas principalmente, normalmente utilizam o teclado para navegar, este usando a tecla TAB.Mas vejo que muitos desenvolvedores não usam deste método, por achar que tira a beleza do site, ou até mesmo porque nem sabem deste artíficio.Bom, sou totalmente iniciante no CSS e foi eu que desenvolvi este código, porém, peço que qualquer erro, sugestão, reformulação ou resumo do mesmo, será muito bem-vindo para futura modificação.Segue o código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">* { margin: 0; padding: 0;}.teste { font: bold 14px "Trebuchet MS"; text-align: center; display: block; overflow:hidden; text-indent: -500em; }.teste a:hover { text-indent: 1em; z-index: 100; background: #009966; }.teste a { color: #fff; text-decoration: none; display: block; }.pagina { position: absolute; top: 0; z-index: -1; }</style></head><body><div class="teste"> <a href="#" title="Ir direto para o conteúdo">Ir direto para o conteúdo</a></div><div class="pagina">TESTE DE CONTEÚDO<br />TESTE DE CONTEÚDO<br />TESTE DE CONTEÚDO<br />TESTE DE CONTEÚDO<br />TESTE DE CONTEÚDO<br /></div></body></html> Explicação de trechos: <div class="teste"> <a href="#" title="Ir direto para o conteúdo">Ir direto para o conteúdo</a></div> Nota-se que ao destino do link, você deverá trocar pelo ID da div que terá o conteúdo principal. Assim, funcionando como uma âncora daquelas estilo FrontPage :D... <div class="pagina"> Fica à sua imaginação trocar à classe, id, desta div. Porém, sugiro deixar ela sempre com top 0, para grudar ao topo do browser. E também deixar um z-index menor do que o menu oculto a:hover.É isto... peço desculpas se houver quaisquer erros.-----------------------------------1º Erro, vejo que o z-index negativo só funciona no IE, porém, quando troco o z-index para positivo para funcionamento no FF, o texto da div da página fica por cima.Por hora não posso testar, se alguém tiver uma solução, fico agradecido. Compartilhar este post Link para o post Compartilhar em outros sites
Paulo de Tarso F. M. 24 Denunciar post Postado Agosto 20, 2007 Interessante... Eu ainda não testei esse tipo de coisa, mas assim que puder o farei... Muito legal! Parabéns pela iniciativa! Compartilhar este post Link para o post Compartilhar em outros sites
André do Vale 76 Denunciar post Postado Agosto 20, 2007 Interessante... Eu ainda não testei esse tipo de coisa, mas assim que puder o farei... Muito legal! Parabéns pela iniciativa!Valeu Paulo... agora só fico no aguardo de alguém mais entendido, como você http://forum.imasters.com.br/public/style_emoticons/default/devil.gif , para poder resolver a questão do z-index negativo da div da página. Compartilhar este post Link para o post Compartilhar em outros sites
Paulo de Tarso F. M. 24 Denunciar post Postado Agosto 20, 2007 Putz... Pior que agora não posso mexer nisso... Assim que possível eu vejo o que acontece e volto a postar... Claro, a não ser que alguém teste isso antes de mim e coloque uma solução antes, né? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Mas é isso a e... Um abraço! Até mais! Compartilhar este post Link para o post Compartilhar em outros sites
André do Vale 76 Denunciar post Postado Agosto 21, 2007 Mais alguém se habilita à ajudar a solucionar este mistério para o FF??Eu sei, eu sei... #@?$%~ erro meu desenvolver antes pro IE, mas fazer o q né... é o costume... Compartilhar este post Link para o post Compartilhar em outros sites
Guilherme Rambo 4 Denunciar post Postado Agosto 22, 2007 Fiz um teste aqui, funcionou legal. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Apenas um teste</title><style type="text/css">div#ir_direto { position: absolute; top:0; left:0; padding:10px 0; width:100%;}div#ir_direto a { display:block; font:bold 14px 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#06C; text-transform:uppercase; text-decoration:none; text-indent:-9000em; overflow:hidden; text-align:center;}div#ir_direto a:hover { text-indent:0;}div#pagina { margin-top:20px;}div#pagina p { padding:10px 0; font:14px/140% Georgia, Times, serif; color:#555; text-indent:15px;}</style></head><body> <!-- Ir direto ao conteúdo --> <div id="ir_direto"> <a href="#" title="Pula diretamente para o conteúdo principal">Ir ao conteúdo</a> </div> <!-- Conteúdo da página --> <div id="pagina"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent posuere luctus eros. Quisque sit amet turpis. Morbi sollicitudin. In fermentum luctus mi. Nam suscipit tincidunt risus. Suspendisse ipsum elit, sodales vel, accumsan in, lobortis a, dui. Curabitur ac tortor sed sapien posuere molestie. Donec vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis aliquam nonummy nisl. Integer mollis diam nec metus. Pellentesque a turpis eget est pretium mollis. Fusce dignissim molestie felis. In hac habitasse platea dictumst.</p> </div></body></html> Testado em Firefox2, IE6, IE7 e Safari[]'s Compartilhar este post Link para o post Compartilhar em outros sites
André do Vale 76 Denunciar post Postado Agosto 22, 2007 Graaaaaaande Inside!!! Fico grato pela precisa ajuda cara!! Brigadão... Compartilhar este post Link para o post Compartilhar em outros sites
