[Resolvido] Barra Superior

[Honiesty 0]

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

 

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.

 

70x40

 

70x40

 

122x40

 

122x40

 

142x40

 

142x40

 

E esse é o logotipo, que deve ficar completamente centralizado dentro da barra.

 

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.

 

 

 

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 :)

[Diéssica 140]

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:

[Honiesty 0]

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!

[Diéssica 140]

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:

[Honiesty 0]

Entendi, vou dar mais uma estudada, Obrigado!

 

Eu fiz o que Diéssica falou e aconteceu o seguinte:

 

E no Internet Explorer nem centralizou, alguma solução?

[Diéssica 140]

Posta o código

[Guilherme Oderdenge 42]

Eu fiz o que Diéssica falou e aconteceu o seguinte:

 

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.

[Honiesty 0]

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 , 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?

[Diéssica 140]

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:

[Guilherme Oderdenge 42]

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:

[Diéssica 140]

Complementando o post do chiefgui :)

:seta: http://validator.w3.org/

:seta: http://quirksmode.org/css/condcom.html

[Honiesty 0]

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!

 

 

[Honiesty 0]

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...

[Honiesty 0]

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!