← HTML + CSS

Menu com CSS

Lida 7737 vezes

Offline

João Godinho 
Membro
Mensagens 1755 Gostos 2
Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Bem, eu quero saber fazer um menu igual ao www.dn.pt
Tipo quando eu meto background-color só fica a cor à volta das letras, eu quero que fique de cima abaixo.

 :obrigado:
Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Adiciona uma altura superior à das letras.
Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Porque não copias o CSS e o html?
Offline

João Godinho 
Membro
Mensagens 1755 Gostos 2
Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Adiciona uma altura superior à das letras.
Como?
Tentei uma maneira, mas ignora isso, fica igual.

Porque não copias o CSS e o html?
Não queria isso.
Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Como?
Tentei uma maneira, mas ignora isso, fica igual.
Não queria isso.
Então vou-te dar os passos, de um processo mais longo e complicado.

1º) Crias uma DIV para cada categoria, chamada, por exemplo, #menu_cat1, #menu_cat2 etc
2º) Crias divs e associas ao ID correspondente.
3º) No CSS, para cada div, personalizas a base e crias outra chamada #menu_cat1:hover, #menu_cat2:hover que vai ser a que aparece quando passas o rato.

E deve resultar...  :)
Offline

João Godinho 
Membro
Mensagens 1755 Gostos 2
Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Obrigado thomato, já consegui.
Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

De nada :)
Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Um menu com divs? E listas, nunca ouviram falar?
Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Código: [Seleccione]
<ul>
<li>1</li>
<li>2></li>
</ul>
Isso?
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Sim Thomato, o código deverá ser semântico,as divs não devem ser utilizadas para criar menus.
Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Pois, eu quando preciso de fazer menus verticais uso listas, mas ainda não descobri como se colocam listas na horizontal :P

Ainda não fui ao meu amigo G porque ainda não precisei...
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

É fácil, uma das formas é colocares display:inline no <li>
Offline

Riey 
Membro
Mensagens 1001 Gostos 0
Feedback +4

Troféus totais: 30
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Pois, eu quando preciso de fazer menus verticais uso listas, mas ainda não descobri como se colocam listas na horizontal :P

Ainda não fui ao meu amigo G porque ainda não precisei...

repara...

as divs no fundo funcionam da mesma maneira que os li, colocas 2 div's seguidas, ou 2 li's quebram os 2... na div resolves com "float:left" e já ficam na mesma linha.... nos li's podes fazer da mesma maneira... ou seja

"float:left" no style do li

(nao esquecer de no fim fazer clear)

e para retirar as "bolas" das listas "list-style: none;" no style do ul
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Como já foi dito as divs não devem ser utilizadas para criar menus, isso é má prática.
Offline

Riey 
Membro
Mensagens 1001 Gostos 0
Feedback +4

Troféus totais: 30
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Como já foi dito as divs não devem ser utilizadas para criar menus, isso é má prática.

Mambley, nao sei se essa mensagem vem em resposta à minha mensagem, mas eu não disse isso, apenas estava a referir como colocar listas em linha