← HTML + CSS

[CSS] Barra no topo do site

Lida 14006 vezes

Offline

Webito 
Membro
Mensagens 300 Gostos 0
Feedback +7

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Pessoal não sei bem como se chama, mas é tipo uma barra no topo da página...

Alguém sabe como se faz isso?
Offline

24HLeMans 
Membro
Mensagens 82 Gostos 0
Feedback +1

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts

Para fazer o header de um site/blog usas um programa de criação gráficas do genero do Photoshop/GIMP/Fireworks.
Offline

Carlos Gandra 
Administrador
Mensagens 3081 Gostos 97
Feedback +1

Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Pessoal não sei bem como se chama, mas é tipo uma barra no topo da página...

Alguém sabe como se faz isso?

Estás a falar do cabeçalho de um template ou daquelas barras de topo que se vêm, por exemplo, nos sites sapo.pt (exemplo) ?
Offline

Webito 
Membro
Mensagens 300 Gostos 0
Feedback +7

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Exactamente essas barras tipo no sapo... tipo a rede deles!
Offline

Carlos Gandra 
Administrador
Mensagens 3081 Gostos 97
Feedback +1

Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Eu já tentei fazer uma dessas em html mas não me saiu muito bem. Ou ficava com alguns pixeis entre a barra e o topo, ou ficava colada ao topo mesmo fazendo scroll no site...

Vamos aguardar mais respostas ;)
Offline

Webito 
Membro
Mensagens 300 Gostos 0
Feedback +7

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

e eu a pensar que era simples :lol:
Offline

johndays 
Membro
Mensagens 387 Gostos 1
Feedback +3

Troféus totais: 24
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Tamém gostava de saber!
Offline

cenourinha 
Elite
Mensagens 4094 Gostos 21
Troféus totais: 34
Trófeus: (Ver todos)
Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4

www.mobiletuga.com

Go and grab the code.
Offline

Webito 
Membro
Mensagens 300 Gostos 0
Feedback +7

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Eu queria saber fazer um, com um design próprio etc
Offline

Warrior 
Membro
Mensagens 203 Gostos 0
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

Para fazeres uma é pegares no Photoshop e fazer uma de barra com a altura que queres. Colocas o gradiente que queres ou efeitos.

Se a dimensão width não for muito grande..guardas como, por exemplo, bar_bg.gif

De seguida em CSS basta fazeres

#bar_top {
    background: url('DIRECTORIO/bar_bg.gif') repeat-x;
    margin-top: 0px; }

Isto e um exemplo
Offline

cenourinha 
Elite
Mensagens 4094 Gostos 21
Troféus totais: 34
Trófeus: (Ver todos)
Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4

É só personalizar o CSS, através daí podes colocar ao teu gosto.
Offline

Webito 
Membro
Mensagens 300 Gostos 0
Feedback +7

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

E onde é que coloco os links (url)?!
Offline

Warrior 
Membro
Mensagens 203 Gostos 0
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

Se crias uma bar, partindo do principio que é com uma <div> então entre a tag <div> e </div> colocas os links que queres.
Offline

Webito 
Membro
Mensagens 300 Gostos 0
Feedback +7

Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

hum...  :-k

Tenho algumas duvida, mas vou tentando ;)
Offline

-RJ- 
Membro
Mensagens 1188 Gostos 0
Troféus totais: 30
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Mas pa em tipo frame , mesmo que fazendo scroll down ela mantenha-se no topo da parte visivel pagina no browser ou apenas para ficar no topo pagina tipo estática?
Em ambos os casos não é muito complicado...