Selecçoes no menu criado em html e css

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
 
ja ajuda amigo. brigadao
de qualquer modo se alguem tiver o codigo ou souber bem como fazer e me possa ajudar... thanks malta :x2:
 
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
 
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:
Fil__ disse:
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:
Clicar para expandir...

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

Abraço! ;)
 
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:
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!
 
Fil__ disse:
Tou mesmo desesperado
Ninguem pode ajudar? Nem mesmo tu chantas?
Clicar para expandir...

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?
 
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/
 
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:
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.
 
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
 
Inicie sessão ou registe-se para poder participar.
Back
Topo