← HTML + CSS

Mini problema básico com CSS

Lida 8276 vezes

Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

HELP
Offline
R

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Solução rápida, usando as imagens que já estão feitas:

Código: [Seleccione]
<div class="header-top">
</div>
<div class="header">CONTEUDO DO HEADER
</div>
<div class="header-bottom">
</div>

Código: [Seleccione]
.header-top {
  background: url(images/top960white.gif) no-repeat bottom 50%;
  height: 4px;
}
.header {
  background: #fff;
}
.header-bottom {
  background: url(images/bottom960white.gif) no-repeat top 50%;
  height: 4px;
}

Não dei largura às divs, se for necessário acho que sabes como colocar (width: 960px;).

Se refizeres as imagens dá para melhorar bastante, usando apenas uma ou no máximo 2 divs.
Se quiseres deixar detalhes como: cor de fundo do site e o conteúdo desse header podemos ajudar-te mais.
Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Boas Ricardo,

Já apliquei o teu código e funciona direito.
Eu como estava a fazer com tabela, tava-me a complicar todo, mas é mesmo isto que pretendo.

Obrigado pela ajuda!!
Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Citação de: Ricardo75 em 25/Jan/2010 18:49
Solução rápida, usando as imagens que já estão feitas:

Código: [Seleccione]
<div class="header-top">
</div>
<div class="header">CONTEUDO DO HEADER
</div>
<div class="header-bottom">
</div>

Código: [Seleccione]
.header-top {
  background: url(images/top960white.gif) no-repeat bottom 50%;
  height: 4px;
}
.header {
  background: #fff;
}
.header-bottom {
  background: url(images/bottom960white.gif) no-repeat top 50%;
  height: 4px;
}

Não dei largura às divs, se for necessário acho que sabes como colocar (width: 960px;).

Se refizeres as imagens dá para melhorar bastante, usando apenas uma ou no máximo 2 divs.
Se quiseres deixar detalhes como: cor de fundo do site e o conteúdo desse header podemos ajudar-te mais.

Só tenho uma dúvida, o que significa essa percentagem no bottom e top.
Eu no dreamweaver e Chrome consigo ver os cantos arredondados. No firefox e IE não. (Fiz o upload das imagens sim lol)
Poderá ter a haver com as percentagens?
Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Basicamente, no Chrome ele passa-me este valor:

background: url(images/top650white.gif) no-repeat bottom 50%;

No Firefox e IE não passa, logo não aparecem as barras.
Como solucionar este problema?

Obrigado
Offline
R

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
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 pões bottom a imagem de fundo vai ficar colada na parte de baixo da div, se colocas top vai ficar colada à parte de cima. Ou seja estás a controlar o valor vertical, os 50% controlam o valor horizontal, neste caso aparecem a meio da div. Também podes usar percentagem para o valor vertical.


No browser não consegues ver os cantos ou não consegues ver nenhuma parte das imagens?

Pensando melhor faz mais sentido trocares o bottom por top na 1ª div e top por bottom na 3ª div.

Offline
R

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Citação de: Cacofb em 25/Jan/2010 21:14
Basicamente, no Chrome ele passa-me este valor:

background: url(images/top650white.gif) no-repeat bottom 50%;

No Firefox e IE não passa, logo não aparecem as barras.
Como solucionar este problema?

Obrigado

Posso ver isso online??
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

se for difícil perceberes usa assim

Código: [Seleccione]
.header-top {
  background-image: url(images/top960white.gif);
  background-position: center top;
  background-repeat: no-repeat;
  width:960px;
  height: 4px;
}
.header {
  background-color: #ffffff;
}
.header-bottom {
  background-image: url(images/bottom960white.gif);
  background-position: center top;
  background-repeat: no-repeat;
  width:960px;
  height: 4px;
}
Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Podes. Vou-te mandar por PM.
Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Citação de: Riey em 25/Jan/2010 21:29
se for difícil perceberes usa assim

Código: [Seleccione]
.header-top {
  background-image: url(images/top960white.gif);
  background-position: center top;
  background-repeat: no-repeat;
  width:960px;
  height: 4px;
}
.header {
  background-color: #ffffff;
}
.header-bottom {
  background-image: url(images/bottom960white.gif);
  background-position: center top;
  background-repeat: no-repeat;
  width:960px;
  height: 4px;
}

Riey,

Eu percebi. O problema é que não aparecem as imagens no IE e Firefox.
Ou tem alguma coisa a haver com a percentagem, ou é algum trick desses browsers.
O Ricardo já me vai ver.
Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Bem, acho que era mesmo das percentagens. Testei com o código do Riey e já funciona em todos os browsers.
Aquilo devia tar a esconder a imagem da div top e bottom.
Offline
R

Ricardo75 
Membro
Mensagens 1660 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Sim, é isso  :-(
Não se pode usar os dois valores diferentes... devia ter colocado top center ou 0% 50%.
Sorry
Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Obrigado pela ajuda pessoal !! Já está resolvido!!
Se quiserem podem bloquear.
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

sim, eu alterei as medidas para medidas fixas em pixeis... se temos um background que sabemos o tamanho exacto para que é que vamos complicar com percentagens? ;)

Páginas: 1 2

Posts relacionados

Tutoriais

[PS] Video aulas treino basico em PT!

helmax

Projectos

Terra Kart, Kart Cross, Mini Motas, Moto 4, Mini Moto 4, Trotiletes, Trotinetes

g
gerardopedro

SEO

Guia basico 2017 - O que é o SEO?

russo95