Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, sou "novo" no forúm, na verdade já entro aqui a um bom tempo, mas nunca postei nada concreto.
Hoje estou aqui para pedir uma ajudinha de vocês,
Bem, é o seguinte, estou tentando fazer uma barra fixa no topo da página, algo tipo a barra do facebook, do twitter, ou daquelas web rádios. Uma barra que fique lá em todas as páginas do site.
Já tive vários problemas até agora e nada de conseguir fazer a maldita barra. Já tentei com DIVs, com iFrame e sempre encontro vários problemas.
Essa é a imagem que eu gostaria de usar como o "fundo" da barra.
Width = 1000(Valor simbólico da imagem, valor real é 100%) Height = 40px
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/barra_superior.jpg&key=6a1db61259eb24f8db280ddf360b2afbf27ecb1cb222d27257d5674fddebc835" alt="barra_superior.jpg" />
Esses são os botões que eu gostaria de distribuir pela barra.
OBS: O conteúdo(botões e logo) da barra tem que ficar dentro de um espaço de 1000px e centralizado, para que o site se adapte a qualquer resolução, a partir de 1024; eis a raiz do problema.
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/inicio_botao.jpg&key=15240add850da3ea4743e07141ff92aa0ffdd651383ae37961b4c8e9917d2af1" alt="inicio_botao.jpg" /> 70x40
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/inicio_botao_f2.jpg&key=45eb48120263462f976e7b603c96bb678c45a32fdb28a0240b3c4691b86cf0a1" alt="inicio_botao_f2.jpg" /> 70x40
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/contato_botao.jpg&key=c681fdb7576ec82128686650b7f08b55a9cf22a89b54beed733275eb9ec31808" alt="contato_botao.jpg" /> 122x40
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/contato_botao_f2.jpg&key=aead564fbef79b98c60344c86d327505217e8bd19f6f93efdbc29f186299df66" alt="contato_botao_f2.jpg" /> 122x40
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/categorias_botao.jpg&key=3b4f9af94c59f7cf14b4491f1f6951ddb6fc3687e9fc0caff455766c98e70377" alt="categorias_botao.jpg" /> 142x40
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/categorias_botao_f2.jpg&key=c650f74b829fbc3725132ea9d861431df0b177a2f27604b24bcccaab60bc6876" alt="categorias_botao_f2.jpg" /> 142x40
E esse é o logotipo, que deve ficar completamente centralizado dentro da barra.
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/logo.jpg&key=47618877debdb305e9f4b3d8538e36b0618bc395d1901de94a8c77f0110de138" alt="logo.jpg" /> 200x40 ( Está escrito em branco com fundo transparente, por isso não da pra visualizar aqui no forúm. )
A idéia, é que fique mais ou menos assim, porém se a resolução for maior que 1024 vão sobrar espaços em ambos os lados.
Depois eu pretendo adicionar mais botões.
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/barra_completa.jpg&key=1ee5653669a8e25c10fa0d75f2d3b5637b63a06bbc8b427726d81f90301ea4d9" alt="barra_completa.jpg" />
Os problemas que eu encontrei foram diversos, coisas tipo, se eu colocasse cada imagem em uma div de 1000 centralizada, ao adicionar 2 botões, 1 DIV cobriria a outra, impedindo 1 dos botões de funcionar.
Nem com Relative nem com Absolute eu consegui.
Se alguém souber outra maneira de como eu possa fazer isso, e quiser me dar uma ajuda, eu agradeço muito ^^
Se você leu até aqui, e mesmo assim não vai me ajudar, obrigado de qualquer forma pela atenção :)
Desculpe a ignorancia, sou novo ainda no CSS, meu negócio é desenvolvimento de jogos, o que seria "ul li"?
Eu tive uns problemas e tive que vir para São Paulo, amanhã volto para casa e testarei isso que você falou. De qualquer forma, obrigado!
>
Desculpe a ignorancia, sou novo ainda no CSS, meu negócio é desenvolvimento de jogos, o que seria "ul li"?
:seta: http://www.w3schools.com/tags/tag_ul.asp
Como fazer um menu usando listas não ordenadas (ul):
:seta: http://maujor.com/tutorial/cssmenu.php
:seta: http://tableless.com.br/criando-um-menu-horizontal-com-css/
Listas ordenadas ou numeradas (ol), não ordenadas (ul) e de definição (dl, dd, dt). É HTML básico.
No caso do menu, utilizamos as listas não ordenadas e usamos ul como seletor no CSS para formatação do menu e li de seus links.
Exemplo HTML:
<ul id="menu">
<li><a href="home.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="oi.html">Oi</a></li>
</ul>Exemplo CSS:
ul#menu {
font-family: verdana; / fonte verdana para toda a lista id menu /
}
ul#menu li a {
background:#fff; / background na cor branca em hexadecimal para todos os links de objetos da lista /
padding:10px; / margem interna de 10 pixels para todos os links de objetos da lista /
color:#000; / cor preta em hexadecimal para todos os links de todos os objetos da lista /
}
E como eu já falei, tem que usar um reset CSS. Aí não vai precisar determinar list-style:none; no ul, tirar padding, entre outras formatações que são renderizadas por padrão nas listas não ordenadas. Determina tudo no teu reset mesmo!
O list-style determina o estilo da lista, determinando o valor none, tiramos as "bolinhas" que ficam também por padrão em cada objeto da lista (li).
:bye:
Entendi, vou dar mais uma estudada, Obrigado!
Eu fiz o que Diéssica falou e aconteceu o seguinte:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/teste.jpg&key=bd1831cdb3bc4a4fd48f59dddce9298848c6f66773d32d0fa95d37191b7e03f3" alt="teste.jpg" />
E no Internet Explorer nem centralizou, alguma solução?
Posta o código
>
Eu fiz o que Diéssica falou e aconteceu o seguinte:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i1070.photobucket.com/albums/u488/igor9ferreira/teste.jpg&key=bd1831cdb3bc4a4fd48f59dddce9298848c6f66773d32d0fa95d37191b7e03f3" alt="teste.jpg" />
E no Internet Explorer nem centralizou, alguma solução?
Position, floating & width: são essas as chaves pra você conseguir posicionar como queres.
Tenta brincar com essas três propriedades, além de fazer você praticar (e entendê-las), podes chegar à uma solução sozinho.
Boa noite,
Consegui! Eu acabei colocando uma Div vazia com Float:left entre o botao "inicio" e o "logo" e float:left no logo, ficou perfeito. Mas......
Sempre tem que ter um mas /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/grin.gif&key=017c2595898d699bcb3981d35d85b81acabbbe6ca0e4d79da8afca234e59d190" alt="grin.gif" />, no Chrome ficou perfeito o que eu queria, porém no IE ficou com umas margens na DIV pai...
Segue o código:
<head>
<title>Web Guide</title>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
#barra_superior {
position: fixed;
height: 40px;
width: 100%;
left: 0px;
top: 0px;
background-image: url(barra_superior/barra_superior.png);
}
#conteudoBarra {
height: 40px;
width: 1000px;
margin: auto;
}
#inicioBotao {
float: left;
height: 40px;
width: 70px;
}
#logo {
height: 40px;
width: 200px;
float: left;
}
#categoriasBotao {
float: right;
}
#contatoBotao {
float: right;
}
#espaçoVazio {
width: 330px;
height: 40px;
float: left;
}
</style>
</head>
<body>
<div id="barra_superior">
<div id="conteudoBarra">
<div id="inicioBotao">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inicioBotao','','barra_superior/botoes_barra_superior/inicio_botao_f2.png',0)"><img src="barra_superior/botoes_barra_superior/inicio_botao.png" name="inicioBotao" width="69" height="40" border="0"></a>
</div>
<div id="espaçoVazio">
</div>
<div id="logo">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('logo','','logotipo/logo.png',0)"><img src="logotipo/logo.png" name="logo" width="200" height="40" border="0"></a>
</div>
<div id="contatoBotao">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contatoBotao','','barra_superior/botoes_barra_superior/contato_botao_f2.png',0)"><img src="barra_superior/botoes_barra_superior/contato_botao.png" name="contatoBotao" width="122" height="40" border="0"></a>
</div>
<div id="categoriasBotao">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('categoriasBotao','','barra_superior/botoes_barra_superior/categorias_botao_f2.png',0)"><img src="barra_superior/botoes_barra_superior/categorias_botao.png" name="categoriasBotao" width="142" height="40" border="0"></a>
</div>
</div>
</div>
</body>
</html>O que vocês acham, é simplesmente um bug do IE, pq ele é muito ruim mesmo? kkkk
E outra, vocês acham que o caminho que eu fiz pra chegar nesse resultado é o melhor, ou existe um jeito mais fácil ou mais eficaz?
Usou um reset CSS como eu te falei?
Quando for relatar um erro de compatibilidade e não tiver uma versão online, posta um print de como o browser renderizou e de como era pra ele ter renderizado :thumbsup:
>
O que vocês acham, é simplesmente um bug do IE, pq ele é muito ruim mesmo? kkkk
E outra, vocês acham que o caminho que eu fiz pra chegar nesse resultado é o melhor, ou existe um jeito mais fácil ou mais eficaz?
Não é o melhor. E o erro aconteceu no IE justamente porque você não fez validamente.
Mas, se quebrou o seu galho, por hora, belê!
E ah, se não quiser se incomodar, usa uma condicional pro IE e adapte o código para funcionar no mesmo.
Isso é totalmente errado, mas se você não quer mais perder tempo fazendo as coisas certas, é isso aí. :thumbsup:
Complementando o post do chiefgui :)
:seta: http://validator.w3.org/
>
Não é o melhor. E o erro aconteceu no IE justamente porque você não fez validamente.
Mas, se quebrou o seu galho, por hora, belê!
E ah, se não quiser se incomodar, usa uma condicional pro IE e adapte o código para funcionar no mesmo.
Isso é totalmente errado, mas se você não quer mais perder tempo fazendo as coisas certas, é isso aí. :thumbsup:
Na verdade, a intenção é perder tempo kk, estou com esse projeto justamente para aprender e ganhar um pouco de experiencia, por isso pergunto sempre qual a "melhor e mais eficaz" forma de se fazer tal coisa.
>
Complementando o post do chiefgui :)
:seta: http://validator.w3.org/
:seta: http://quirksmode.org/css/condcom.html
Muito bom esse validator, me apontou erros bobos que eu não tinha visto, nunca tinha ouvido falar dele, mas gostei muito, vlw!
Fiz o teste com outros navegadores:
Chrome: OK
Firefox: OK
Safari: OK
Explorer: Não centralizou e colocou margem.
Testei até no Browser do Steam e do Origin e funcionou, isso prova de que o explorer é pior do que eu imaginava.
Vai entender... Acho que vou fazer o que o guilherme falou mesmo, uma versão da página só pra explorer, mas isso eu faço depois, vai que surge outros problemas...
Voltando ao tópico pra fazer alguns agradecimentos e observações.
Aquele outro que eu fiz tinha dado certo em todos os browsers, menos no explorer, até no browser da Steam e da Origin foi kkkk. Mas eu deixei de ser teimoso e fiz como a Diéssica falou desde o começo, usei o UL LI, ficou da mesma forma, mas funcionou no IE.
Então, muito obrigado a todos que me ajudaram, pricipalmente a Diéssica e o Guilherme, que foram tão atenciosos com um novato que nunca fez nada pelo forúm!
Faça uma div pai com position:fixed e 100%; (determina o background, height etc tudo nessa div)
Faça outra div pra colocar o conteúdo dela. Determine uma largura fixa e margin:auto;.
Dentro dessa div, faça mais 3 divs. Serão 3 colunas: uma para "início" (float:left;), uma pra logo (margin:auto;) e outra pra "categorias" e "contato" (float:right;).
Não esqueça de trabalhar com ul li pra fazer a navegação.
Use um Reset CSS pra não dar problemas com margens e renderizações diferentes.
Boa sorte. :thumbsup: