Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Tiago André

[Resolvido] Como fixar barra no topo CSS

Por , em Desenvolvimento frontend

Recommended Posts

Tiago André    0

Tiago André
Postado

Na verdade eu sei como fixar a barra no topo mais eu não consigo fazer igual a imagem em anexo, ou seja, quero que atras de toda barra fixa no topo tenha uma cor que role junto com a barra, mas que ocupe toda a tela e não apenas o tamanho da barra... Será que deu para entender?

 

post-565392-0-07522700-1338787405.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

GRiLLo    11

GRiLLo
Postado

Não sei se entendi direito, mas basicamente é inserir no div que você quer deixar em cima com isso:

 

width: 100%;

position: fixed !important;

top: 10px;

left: 0;

 

com isso você deixa ele fixo, 100% e começando do começo e não do div pai.

 

fiz um exemplo aqui, espero ter ajudado

 

 

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8" />

<style>

div

{

margin: auto auto;

}

div:nth-child(1)

{

height: 1000px;

background: red;

width: 80%

}

div:nth-child(2)

{

height: 30px;

background: blue;

width: 100%;

position: fixed !important;

top: 10px;

left: 0;

}

</style>

</head>

<body>

<div>

<div style="width: 800px; ">TODO write content</div>

<div>TODO write content</div>

</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vanilson    2

Vanilson
Postado

Tiago, não percebi muito bem a tua duvida, mais seguindo a ideia do Grillo, se for para o conteúdo fica atrás terás que usar o z-index acompanhado com o posicionamento fixo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Me parece que ele quer uma barra fixa no topo tal qual no Google Docs, onde a caixa de ferramentas fica sempre visível, fixa, no topo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vanilson    2

Vanilson
Postado

Se for isso então acho que com a dica do Grillo do position:fixed mais o z-index da para resolver o problema

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago André    0

Tiago André
Postado

Olá pessoal venho agradecer a resposta de todos mais ainda não consegui chegar ao resultado que eu espero.

 

Vocês devem ter Facebook né? :grin:

 

A barra do Facebook está igual eu quero, ou seja, o conteúdo da barra fica fixa em uma largura fixa por ex: 980px... só que a barra tem um fundo azul que se ajusta a resolução do monitor da visitante do site e flutua junto com a barra. É possível eu fazer isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago André    0

Tiago André
Postado

Pessoal desculpem a insistência, mas o que esta de errado aqui:

 

#topbar-fundo {

position: fixed;

width: 100%;

top: 0;

z-index: 10000;

height: 30px;

overflow: visible;

background: #333;

margin: 0 1px; }

 

#topbar-centro {

position: fixed;

width: 970px;

top: 0;

z-index: 10000;

height: 30px;

overflow: visible;

background: #fff;

margin: 0 auto;}

 

A segunda topbar-centro não fica centralizada na tela. O que está de errado no código?

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado 

#topbar-fundo {
position: fixed;
width: 100%;
top: 0;
z-index: 10000; /* salvo engano, o IE7 tem um limite de 9999 */
height: 30px;
overflow: visible; /* ??? */
background: #333;
}
#topbar-centro {
width: 970px;
height: 30px;
overflow: visible; /* ??? */
background: #fff;
margin: 0 auto;
}

 

Isto deve ser preferencialmente filho direto do body, ou então nenhum ancestral ter posição relativa e largura definida. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito