Ir para conteúdo

POWERED BY:

Arquivado

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

Nícolas Luís Huber

position fixed

Por , em Desenvolvimento frontend

Recommended Posts

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

Olá comunidade iMaster, estou querendo criar um menu fixo no meu site, ou seja, mesmo quando a barra vertical ser rolada o menu continue no topo da página. Porém estou com um probleminha; toda vez que defino a propriedade position: fixed para a div do menu o conteúdo que vem abaixo fica por baixo desta div. Como eu posso arrumar isto, tenho aqui um exemplo de código:

 

<!DOCTYPE html>
<html>
<head>
<title>Teste de HTML</title>
<style type="text/css">
	*{
		margin: 0;
		padding 0;
		font-family: Arial;
		font-size: 12px;
	}
	#fixed{
		width: 100%;
		height: 45px;
		background: #007C7C;
		position: fixed;
		opacity: 0.8;
	}
	#fixed a{
		float: left;
		color: #FFF;
		position: static;
		padding: 14px 0 0 0;
		margin: 0 20px 0 0;
		text-decoration: none;
	}
	#fixed a:hover{
		color: #800;
		text-decoration: underline;
	}
	#content{
		width: 960px;
		height: auto;
		margin: 0 auto;
	}

</style>
</head>
<body>
<div id="fixed">
<a href="#">Home</a>
<a href="#">Artigos</a>
<a href="#">Downloads</a>
<a href="#">Mais acessados</a>
</div>
<div id="content">
<p>We have every reason to believe that W3C’s site will soon sport a handy listing of accurate, usable DOCTYPES and other essential information in an easy–to–find location. In fact, Karl Dubost, Conformance Manager of W3C’s Quality Assurance team, contributed to the information in this little article.</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>We have every reason to believe that W3C’s site will soon sport a handy listing of accurate, usable DOCTYPES and other essential information in an easy–to–find location. In fact, Karl Dubost, Conformance Manager of W3C’s Quality Assurance team, contributed to the information in this little article.</p>
</div>
</body>
</html>

 

Eu posso arrumar isto colocando padding na div content, porém não tem outra maneira de resolver?

Compartilhar este post

Link para o post
Compartilhar em outros sites

mangakah    217

mangakah
Postado

Coloque margin-top de #content em 65px (#fixed de height de 45px, dê mais uns 20px como espaçamento) e coloque #fixed com top 0.

#fixed{
       width: 100%;
       height: 45px;
       background: #007C7C;
       position: fixed;
       opacity: 0.8;
       top: 0;
}

/* ... */

#content{
   width: 960px;
   height: auto;
   margin-top: 65px;
}

 

Uma dica: #fixed é um valor impróprio para um id. Tenha em mente que 'id' representa identidade, enquanto 'class' representa categoria. Portanto, 'fixed' é um valor mais adequado para uma classe, já que outros elementos pode ser fixados também, é uma categoria. Este elemento que está sendo fixado ficará melhor identificado por um 'id' "top-nav" ou "header".

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