1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Selecçoes no menu criado em html e css

Discussão em 'Web Development' iniciada por Fil__, 21 de Dezembro de 2007. (Respostas: 25; Visualizações: 2079)

  1. Fil__

    Fil__ Power Member

    Uma duvida de css
    Tenho um menu que tem a cor preta, quando se passa o rato por cada menu as letras ficam brancas.
    O que quero e que ao escolher um menu, na corrente do menu fique indicado o menu em que estou. Do genero:

    home empresa instalacoes ementa contactos

    e ao escolher por exemplo a ementa, fique marcado no menu, sublinhado com uma cor por exemplo.

    Consegui exprimir-me bem? Podem auxiliar?
    Thanks malta
     
  2. ninja_corp

    ninja_corp Power Member

    Eu entendo... mas parece-me que vais ter d epor javascript aí!

    Procura na net... java não sou o gajo certo!

    Google it!
     
  3. Fil__

    Fil__ Power Member

    ja ajuda amigo. brigadao
    de qualquer modo se alguem tiver o codigo ou souber bem como fazer e me possa ajudar... thanks malta :x2:
     
  4. Fil__

    Fil__ Power Member

    Ninguem pode ajudar?
    E que no google eu nao sei bem o que procurar
    Help... please
     
  5. chantas

    chantas Power Member

    Boas.

    Isso é simples de fazer! Vou dar-te um exemplo que usei num site:

    Código:
    <ul id="menu"> 
    <li id="home"><a href="index.html" class="select">Home</a></li>
    <li id="empresa"><a href="empresa.html">Quem Somos</a></li>
    <li id="produtos"><a href="produtos.html">Produtos</a></li>
    <li id="servicos"><a href="servicos.html">Servicos</a></li>
    <li id="obras"><a href="obras.html">Obras</a></li>
    <li id="contactos"><a href="contactos.html">Contactos</a></li>
     </ul>
    
    Repara que ao botao "home" associei uma class que vai permitir que aquele botão fique seleccionado.

    Espreita o CSS:

    Código:
    li .select { background: url(images/botoes.jpg) no-repeat 0 -27px; }
    li .select2 { background: url(images/botoes.jpg) no-repeat -125px -27px; }
    li .select3 { background: url(images/botoes.jpg) no-repeat -240px -27px; }
    li .select4 { background: url(images/botoes.jpg) no-repeat -325px -27px; }
    li .select5 { background: url(images/botoes.jpg) no-repeat -412px -27px; }
    li .select6 { background: url(images/botoes.jpg) no-repeat -478px -27px; }
    Neste caso usei um menu em que os botões são imagens, portanto penso que no teu caso ainda vai ser mais simples.

    O que tens que fazer é por cada página (home;empresa, ementa etc...) vais colocar a class no botão correspondente.

    Deu para perceberes? Se não percebeste cola aqui o teu código html e css que eu altero.

    Abraço
     
  6. Fil__

    Fil__ Power Member

    chantas :victory:

    Brigadao, era EXACTAMENTE isso que precisava e de facto e muito simples. Es grande, enorme com 10 metros de altura lol
    Muito obrigado amigo :beerchug:

    chantas ja agora, isto no ie7 nao funca a 100%
    no firefox fica como eu quero, ou seja, o botao onde estamos fica com a cor preta e sublinhado e quando la passo o rato ele nao muda. Mas no ie7 ele fica tambem preto e sublinhado so que quando passo o rato por cima ele fica branco. Sabes como contornar este bug da microsoft :puke:
     
    Última edição pelo moderador: 23 de Dezembro de 2007
  7. chantas

    chantas Power Member

    Posso tentar dar uma vista de olhos! Podes postar aqui os códigos?

    Abraço! ;)
     
  8. Fil__

    Fil__ Power Member

    Código:
    body {
        background-repeat: repeat;
        margin:0;
        padding:0;
        background-image: url(background.gif);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
    #corpo {
        width: 850px;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        padding-right: 10px;
        padding-left: 10px;
    }
    
    #topo {
        background-image: url(images/topo.png);
        height: 142px;
        width: 850px;
        background-repeat: no-repeat;
    }
    
    #meio {
        background-image: url(images/meio.gif);
        width: 850px;
        background-repeat: repeat-y;
    }
    
    #fundo {
        background-image: url(images/fundo.gif);
        height: 19px;
        width: 850px;
        background-repeat: no-repeat;
    }
    #corpo #meio th {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10pt;
        font-weight: normal;
    }
    #corpo #meio img {
        cursor: pointer;
    }
    
    #corpo #copy th {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
    }
    #corpo #copy td {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        text-align: center;
    }
    #corpo #copy a {
        color: #2C1889;
        text-decoration: underline;
    }
    #corpo #meio div {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 9pt;
        color: #000000;
    }
    .style1 {
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
    .style2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14pt;
        color: #000000;
        font-weight: bold;
        font-style: normal;
        text-decoration: underline;
    }
    
    #navigation {
        background-image: url(images/meio.gif);
        background-repeat: repeat-y;
        width: 850px;
        height: 10px;
    }
    
    a:hover, a:active {
        color: #FFF;
        text-decoration: none;
    }
    
    #navigation {
        font-weight: bold;
        height:34px;
        background-image: url(images/teste.gif);
        width: 850px;
        margin: 0px;
        background-repeat: no-repeat;
    }
    #navigation ul, #navigation ul li {
            list-style: none;
            margin: 0;
            padding: 0;
    }
    #navigation ul {
        text-align: center;
        padding-top: 15px;
        padding-right: 5px;
        padding-left: 5px;
    }
    #navigation ul li {
        display: inline;
        padding-right: 40px;
        padding-left: 40px;
    }
    .style4 {
        color: #000000;
        font-weight: bold;
        text-transform: none;
        font-style: normal;
        text-decoration: none;
    }
    .style6 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        color: #000000;
        text-transform: uppercase;
        line-height: 0px;
    }
    
    .stylescrita {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
    }
    
    li .select {
        background-repeat: no-repeat;
        background-position: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        line-height: 0px;
        font-weight: bold;
        text-transform: uppercase;
        color: #000000;
        text-decoration: underline;
    }


    Aqui esta o css amigo. Nao meto o html porque e como tinhas descrito no exemplo
    Brigadao pela ajuda
     
    Última edição pelo moderador: 23 de Dezembro de 2007
  9. Fil__

    Fil__ Power Member

    Talvez um hack resolva o mal mas... onde? :D
     
  10. chantas

    chantas Power Member

    Nesta parte:
    Código:
    a:hover, a:active {
    color: #FFF;
    text-decoration: none;
    }
    Tenta alterar para uma destas:
    Código:
    a:hover {
    color: #FFF;
    text-decoration: none;
    }
    Código:
    li#home a:hover {
    color: #FFF;
    text-decoration: none;
    }
    Nesta ultima, se resultar tens que dps adicionar as restantes (li#empresa a:hover, li#ementa a:hover etc...)

    Espero ter ajudado!
     
  11. Fil__

    Fil__ Power Member

    thanks pelas dicas chantas mas continua a nao dar :005:
     
  12. Fil__

    Fil__ Power Member

    Tou mesmo desesperado
    Ninguem pode ajudar? Nem mesmo tu chantas?
     
  13. p3dro

    p3dro Power Member

    posso não estar a perceber bem o problema, mas se alterares isto

    Código:
    a:hover, a:active {
    color: #FFF;
    text-decoration: none;
    }
    
    para isto

    Código:
    a:hover, a:active {
    color: #000;
    text-decoration: none;
    }
    
    faz o que pretendes?
     
  14. chantas

    chantas Power Member

    E já agora, se mesmo assim não conseguires o que queres tenta:

    color: #FFFFFF;
     
  15. Inoculado

    Inoculado Power Member

    uma coisa a q tens de te habituar é pesquisar em sites ,q sabes q normalmente tem aquilo q procuras ,sempre ,um deles é o list apart e melhor forma de aprender e por via da leitura ,desde ha milhares de anos q é assim ,
    tens aqui o exemplo q o chantas te deu e eu acho correcto ,sei q existe pelo menos mais um ,mas n me recordo
    http://www.alistapart.com/stories/taminglists/
     
  16. Fil__

    Fil__ Power Member

    Pois mas so um pormenor
    tal como ja tinha dito eu fartei-me de procurar e nada. Esse site que tu metest aqui eu nem o conhecia. Se pedi ajuda de maneira tao desesperada foi por TALVEZ estar a procura disto deste a fim da tarde de ontem e a manha toda de hoje.
    Mandar essa boca era desnecessario
    Se entendi mal peço as minhas mais humildes desculpas e obrigado a TODOS por me tarem a ajudar

    E que no FF funciona perfeitamente
    E bug do IE7, ai e que ta o problema. Nao vi ainda nenhum site que me mostrasse um hack para resolver este problem. O IE7 nao "ve" que a cor do menu select nao e para mudar (tal como no exemplo do chantas ao qual agradeço)
    O meu problem nao e saber, a minha duvida inicial ta esclarecida, o problem e mesmo os bugs do IE7
     
    Última edição pelo moderador: 23 de Dezembro de 2007
  17. chantas

    chantas Power Member

    Tens o site online? Se não tiveres podes colocar em algum endereço para dar uma vista de olhos?

    Cumps
     
  18. Inoculado

    Inoculado Power Member

    n foi nenhuma boca ,foi uma boa dica
    existe hacks ate devo ter aqui ,o site mas estou com falta de tempo para procurar ,mas como te disse podes ate procurar nesse site ,mas n deve ser a melhor opçao ,basta adicionares algum script ,por exemplo um bug mt conhecido em ie normalmente adiciona-se line-height para definir o tamnho vertical do "botao" sem q este ...bla bla ..mas assim a partida n estou a ver qaul o problema ,mas é de esperar q eles existam nao me admira.
     
  19. Fil__

    Fil__ Power Member

    Aqui esta o link chantas

    http://experiencia1.freehostia.com/index.html

    Nao liguem ao design. No firefox o menu funciona EXACTAMENTE como quero mas no IE7 nao funciona 100% (nem experimentei ainda no IE6 com medo lol)

    Espero que ajude a que me possam ajudar
     
  20. chantas

    chantas Power Member

    Vamos lá tentar outra coisa.

    No teu código tens isto:

    Código:
    <div id="navigation">
    <ul>
    <li><a href="index.html" class="select">Home</a></li>
    <li><a href="pizzaria lamezoni - empresa.html" class="style6">Empresa</a></li>
    <li><a href="pizzaria lamezoni - instalacoes.html" class="style6">InstalaÇÕes</a></li>
    <li><a href="pizzaria lamezoni - ementa.html" class="style6">Ementa</a></li>
    <li><a href="pizzaria lamezoni - contactos.html" class="style6">Contactos</a></li>
    </ul>
    </div>
    Tenta antes por assim:

    Código:
    [B]<ul id="navigation">[/B]
    <li><a href="index.html" class="select">Home</a></li>
    <li><a href="pizzaria lamezoni - empresa.html" class="style6">Empresa</a></li>
    <li><a href="pizzaria lamezoni - instalacoes.html" class="style6">InstalaÇÕes</a></li>
    <li><a href="pizzaria lamezoni - ementa.html" class="style6">Ementa</a></li>
    <li><a href="pizzaria lamezoni - contactos.html" class="style6">Contactos</a></li>
    </ul>
    
    Podes manter a div que tens mas tenta dar um ID à UL. Se não funcionar nao tou mesmo a ver como t ajudar!

    Mas tmb penso que nao seja algo de mto grave pois não baralha minimamente quem está a usar o site! Acho que até ajuda, pois desta forma as pessoas sabem que podem carregar novamente no mesmo botao caso necessitem de fazer reload à página! :)

    Cumps
     

Partilhar esta Página