• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

HilarYo

Como Criar uma barra no topo de um site

14 mensagens neste tópico

Boas,

Não sei se é este o local indicado para esclarecer a minha dúvida, peso desculpa se não o for.

É o seguinte eu cria criar uma barra para por num projecto que ando a fazer, e não precebo nada disso!

Queria adicionar uma barra do género que se encontra aqui no topo do P@P  ;)

Aquela barra preta que tem os links para:  Fórum Wiki BlogTwitter Planeta P@P IRC Pastebin Revista PROGRAMAR Loja P@P

Será que me podem ajudar? Agradeço imenso  :ipool:

Obrigado!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Estás a utilizar algum software WYSIWYG para fazer o teu site (dreamweaver, frontpage, etc)?

Ou é para algum script (SMF, Joomla, etc)?

Tenta ser mais específico. ;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Estás a utilizar algum software WYSIWYG para fazer o teu site (dreamweaver, frontpage, etc)?

Ou é para algum script (SMF, Joomla, etc)?

Tenta ser mais específico. ;)

Estou a utilizar por enquato só SMF, mas em breve irei por Joomla e Wordpress.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

No SMF, vais ao ficheiro index.php e, na linha 38, por exemplo, escreves:

echo "Código html da barra";

Substituís o conteúdo do echo pelo código HTMl da barra. ;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

No SMF, vais ao ficheiro index.php e, na linha 38, por exemplo, escreves:

echo "Código html da barra";

Substituís o conteúdo do echo pelo código HTMl da barra. ;)

Isso e o css :confused:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

No SMF, vais ao ficheiro index.php e, na linha 38, por exemplo, escreves:

echo "Código html da barra";

Substituís o conteúdo do echo pelo código HTMl da barra. ;)

Sim, mas como fasso o codigo da barra? Podes-me dar umas Luzes?  :biggrin:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Penso que seja isto:

#navbar_container{
width: 100%;
text-align: center;
    margin: -12px 0 0px 0;
    padding-top: 4px;
    height: 18px;
    background-color: #000000;
}
#navbar_container a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
    font-size: 13px;
    padding: 3px 10px 4px 10px;
    font: arial;
}
#navbar_container a:hover {
background-color: #666666;
}

EDIT: Aqui está no código fonte

<link rel="stylesheet" type="text/css" href="http://www.portugal-a-programar.org/forum/Themes/default/css/navbar.css" /><div id="navbar_container"><a href="http://www.portugal-a-programar.org/forum/">F&#243;rum</a><a href="http://wiki.portugal-a-programar.org/">Wiki</a><a href="http://blog.portugal-a-programar.org/">Blog</a><a href="http://twitter.com/pt_programar">Twitter</a><a href="http://planet.portugal-a-programar.org">Planeta P@P</a><a href="http://irc.portugal-a-programar.org/">IRC</a><a href="http://paste.portugal-a-programar.org/">Pastebin</a><a href="http://www.revista-programar.info/">Revista PROGRAMAR</a><a href="http://blog.portugal-a-programar.org/loja-pp/">Loja P@P</a></div>

Cumps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Penso que seja isto:

#navbar_container{
width: 100%;
text-align: center;
    margin: -12px 0 0px 0;
    padding-top: 4px;
    height: 18px;
    background-color: #000000;
}
#navbar_container a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
    font-size: 13px;
    padding: 3px 10px 4px 10px;
    font: arial;
}
#navbar_container a:hover {
background-color: #666666;
}

Isso é o código css certo? agora como ponho isso no smf juntamente com as hiperligações?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Estás a falar disto?

<link rel="stylesheet" type="text/css" href="http://www.portugal-a-programar.org/forum/Themes/default/css/navbar.css" /><div id="navbar_container"><a href="http://www.portugal-a-programar.org/forum/">Fórum</a><a href="http://wiki.portugal-a-programar.org/">Wiki</a><a href="http://blog.portugal-a-programar.org/">Blog</a><a href="http://twitter.com/pt_programar">Twitter</a><a href="http://planet.portugal-a-programar.org">Planeta P@P</a><a href="http://irc.portugal-a-programar.org/">IRC</a><a href="http://paste.portugal-a-programar.org/">Pastebin</a><a href="http://www.revista-programar.info/">Revista PROGRAMAR</a><a href="http://blog.portugal-a-programar.org/loja-pp/">Loja P@P</a></div>

cumps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

HilarYo, no echo, metes o que o pedrix21 te disse.

echo '<link rel="stylesheet" type="text/css" href="http://www.o_teu_forum.org/Themes/default/css/navbar.css" /><div id="navbar_container"><a href="http://www.portugal-a-programar.org/forum/">Fórum</a><a href="http://wiki.portugal-a-programar.org/">Wiki</a><a href="http://blog.portugal-a-programar.org/">Blog</a><a href="http://twitter.com/pt_programar">Twitter</a><a href="http://planet.portugal-a-programar.org">Planeta P@P</a><a href="http://irc.portugal-a-programar.org/">IRC</a><a href="http://paste.portugal-a-programar.org/">Pastebin</a><a href="http://www.revista-programar.info/">Revista PROGRAMAR</a><a href="http://blog.portugal-a-programar.org/loja-pp/">Loja P@P</a></div>';

E crias um ficheiro chamado navbar.css na pasta http://www.o_teu_forum.org/Themes/default/css onde www.o_teu_forum.org é substituído pelo endereço do teu fórum.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

HilarYo, no echo, metes o que o pedrix21 te disse.

echo '<link rel="stylesheet" type="text/css" href="http://www.o_teu_forum.org/Themes/default/css/navbar.css" /><div id="navbar_container"><a href="http://www.portugal-a-programar.org/forum/">Fórum</a><a href="http://wiki.portugal-a-programar.org/">Wiki</a><a href="http://blog.portugal-a-programar.org/">Blog</a><a href="http://twitter.com/pt_programar">Twitter</a><a href="http://planet.portugal-a-programar.org">Planeta P@P</a><a href="http://irc.portugal-a-programar.org/">IRC</a><a href="http://paste.portugal-a-programar.org/">Pastebin</a><a href="http://www.revista-programar.info/">Revista PROGRAMAR</a><a href="http://blog.portugal-a-programar.org/loja-pp/">Loja P@P</a></div>';

E crias um ficheiro chamado navbar.css na pasta http://www.o_teu_forum.org/Themes/default/css onde www.o_teu_forum.org é substituído pelo endereço do teu fórum.

Ok, acho que já percebi, vou tentar fazer isso. Caso me surja mais algumas duvidars, exclarecerei!

Obrigado a Todos!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ups Desculpem lá,

na pagina do meu template não existe a pasta CSS, crio e ponho lá o ficheiro navbar.css?

ja agora, para criar o ficheiro CSS posso usar o bloco de notas e guardar como navbar.css?

So mais uma pergunta:

O codigo que ponho no ficheiro navbar.css é este?:

#navbar_container{
        width: 100%;
        text-align: center;
    margin: -12px 0 0px 0;
    padding-top: 4px;
    height: 18px;
    background-color: #000000;
}
#navbar_container a {
        color: #FFFFFF;
        text-decoration: none;
        font-weight: bold;
    font-size: 13px;
    padding: 3px 10px 4px 10px;
    font: arial;
}
#navbar_container a:hover {
        background-color: #666666;
}

?

Obrigado!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

1º) Sim.

2º) Sim.

3º) Sim.

:confused:

Humm... Ja começo a perceber disto ;)

Mais uma vez Obrigado!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora