← Desenvolvimento

Barra de Parcerias

Lida 4663 vezes

Offline

Shadowtuga 
Membro
Mensagens 99 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

Código: [Seleccione]
<html>
<head>
<style type="text/css">
<!--
#barra{
position:absolute;
font-family: Verdana, Arial, Sans-Serif;
font-size: 12px;
background: #000000;
color:#ffffff;
top:0px;
left:0px;
width:100%;
height:20px;
}

#barra a {
color:#8dc628;
}

#barra a:hover{
color:#ffffff;
}
-->
</style>
</head>


<body>
<div id="barra">
        <a href="http://link1.com" title="Site 1" target="_blank">Site 1</a> |
        <a href="http://link2.com" title="Site 2" target="_blank">Site 2</a> |
        <a href="http://link3.com" title="Site 3" target="_blank">Site 3</a> |
</div>
</body>


</html>

http://i248.photobucket.com/albums/gg200/Shadowtuga/bannerparcerias.png


Se alguém me puder ajudar ficaria muito agradecido. Eu quero utilizar essa imagem e esse código para meter uma barra no topo do site para posteriormente realizar troca de links. Se alguém me puder fazer isso  :?:

Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

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

Código: [Seleccione]
background: url('imagem.png') #000000 repeat-x center;
E não precisas de ter aquela imagem tão grande, basta 1px até xD
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

Código: [Seleccione]
background: url('imagem.png') #000000 repeat-x center;
E não precisas de ter aquela imagem tão grande, basta 1px até xD

Pois... lol
Offline

Shadowtuga 
Membro
Mensagens 99 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

Obrigado :)

Não sei se repararam mas a aquilo não é tudo preto, é um padrão. Logo não podia ser só um pixel ;)
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

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

Obrigado :)

Não sei se repararam mas a aquilo não é tudo preto, é um padrão. Logo não podia ser só um pixel ;)

Ahh, ya, tem as barras, mas mesmo assim uns 10px chegam xD
Offline

Shadowtuga 
Membro
Mensagens 99 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

eu já cortei ;)
Offline

Shadowtuga 
Membro
Mensagens 99 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

Tenho aqui um problema...

No IE o fórum fica encostado à esquerda. Contudo no FF está tudo ok. Deixo embaixo as Prints.

FF
http://i248.photobucket.com/albums/gg200/Shadowtuga/print2.jpg

IE
http://i248.photobucket.com/albums/gg200/Shadowtuga/print-2.jpg

Se alguém souber a causa do problema por favor diga ;)
Offline

Shadowtuga 
Membro
Mensagens 99 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

Alguém sabe a origem do problema?
Offline

Fernando Augusto 
Membro
Mensagens 922 Gostos 0
Feedback +1

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

Vê lá se não tens alguma coisa no CSS ou no código html mal
Offline

Shadowtuga 
Membro
Mensagens 99 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

Aparentemente não. Mas também não estou familiarizado com a resolução de problemas com conflitos de código...
Offline

Celso Azevedo 
Membro
Mensagens 3500 Gostos 38
Feedback +12

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Isso é do partido do IE: Mais a esquerda. Existe o FF que fica ao centro e depois existem os outros da direita :lol:
Offline

Shadowtuga 
Membro
Mensagens 99 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

Isso é do partido do IE: Mais a esquerda. Existe o FF que fica ao centro e depois existem os outros da direita :lol:
:lol:

Vá agora fora de brincadeiras, queria mesmo resolver isto...
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

Em que IE estás a testar? Aqui em IE7 e IE8 está centrado.
Offline

Shadowtuga 
Membro
Mensagens 99 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts

IE8

Eu tirei a barra temporariamente ate se resolver este problema. Por isso é normal que esteja tudo ok neste momento com o fórum. ;)
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

Tenta o seguinte:

HTML: (logo a seguir ao body)

Código: [Seleccione]
...
<body>
<div id="barra">
<div id="barraLinks">
<a href="#" title="titulo">Teste</a>
</div><!-- Fim barraLinks -->
</div><!-- Fim barra -->
....

Depois na CSS colocas:

Código: [Seleccione]
#barra {
background-color: grey;
}
#barraLinks {
width: 950px;
margin: 0 auto;
text-align: center;
}
#barraLinks a {
color:#8dc628;
}
#barraLinks a:hover {
color:#ffffff;
}

Na regra background-color:yellow; substituis pela imagem, depois é uma questão de pequenos ajustes de CSS no padding que tens no body por exemplo, experimenta e diz algo.