Como fixar bem o header?

Danny_Pt · May 27, 2012 at 12:03 AM

Boas pessoal,

Como iniciante...estou a fazer uma página experimental (para treinar) em html5 / CSS3.

Mas não estou a conseguir fazer uma coisa...ou melhor consigo, mas sai extremamente mal...lol.

Gostaria de saber como fixar o header da página e deixar todo o restante conteúdo "normal", à semelhança do que acontece no twitter e facebook, onde temos o header fixo, por exemplo.

Eu consigo fixar o header facilmente, mas depois o restante conteúdo fica quase todo debaixo do header...e não estou a conseguir o porquê, pois tal como disse ainda estou a aprender...

Se eu vos meter aqui o código html e css podem-me ajudar e dizer o que tenho de fazer bem?

Obrigado

HappyHippyHippo · May 27, 2012 at 12:32 AM

1º - quando existe problemas o código ajuda sempre

2º - por acaso neste caso não é necessário. felizmente o problema está bem explicado (algo que começa a ser raro no forum)

exemplo para resolver o teu problema:

<!DOCTYPE html>
<html>
<head>
 <style type="text/css">
  html, body { height: 100%; margin: 0; }
  html { padding: 0; }
  body { padding-top: 100px; /* header height */ }
  div { padding: 0; margin: 0; }
  #header { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: #f00; }
  #content { height: 1200px; background-color: #0f0; }
 </style>
</head>
<body>
 <div id="header"></div>
 <div id="content"></div>
</body>
</html>

Edited May 27, 2012 at 09:31 PM by softklin
Adicionado GeSHi

Danny_Pt · May 27, 2012 at 01:06 AM

No meu caso o header é uma imagem...

Um exemplo de um site com header fixo:

http://davidchambers...sition-headers/

Posso só colocar o código CSS ou necessitas do html também? 🙂

Obrigado pela resposta

HTML

<!doctype html>
<html lang="pt">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>FOOTBALL GAMING PT</title>
<link rel="stylesheet" href="main.css"/>

</head>
<body>
<div id="main">
<header id="header">
  <p><img src="imagens/Imagens/header3.jpg" width="1000" height="288"></p>
</header>
<nav id="menu">
<ul>
 <li>PRO EVO SOCCER </li>
 <li>EA SPORTS FIFA</li>
 <li>FOOTBALL MANAGER</li>
</ul>
</nav>
<section id="conteudo">
<article>

<header>
<hgroup>
<h1>FIFA 13 anunciado</h1>
<h2>A EA Sports anunciou esta semana o sucessor de Fifa 12.</h2><br>
</hgroup>
</header>
<footer><p>Football Gaming 2012</p></footer>

</article>
<article>

<header>
<hgroup>
<h1>Konami anuncia PES 2013</h1>
<h2>A Konami anunciou que Ronaldo será novamente capa da nova versão do PES.</h2><br>
</hgroup>
</header>
<footer>Football Gaming 2012</footer>
</article>
</section>
<aside id="novidades">
<h2>NOVIDADES</h2>
<h3>Novo Site</h3>
</aside>

<footer id="rodape"><center>Football Gaming PT @ 2012 (Todos os direitos reservados) </center></footer>

</div>
</body>
</html>

CSS

*{
margin: 0px;
padding: 0px;
}
h1{
font: bold 16px Tahoma;
}
h2{
font: 12px Tahoma;
}
header, nav, section, article, aside, footer{
display:block;
}
body{
text-align:center;
background-image:url('imagens/imagens/fifa12.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
#header{
position: fixed;
width: 1000px;
height: 288px;
top:0px;
}
#main{
border: 3px solid black;
background: white;
width: 1000px;
margin: 10px auto;
text-align:left;
}
#menu{
background: #699AE0;
border: 1px #F00;
padding: 20px;
}
#menu li{
display:inline-block;
list-style:none;
padding: 5px;
font: bold 16px Tahoma;
color: white;
text-align:center;
border: 2px solid black;
}
#conteudo{
float: left;
width: 660px;
margin: 30px; /* 720px sobra 280 left */
}
#novidades{
float: left;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #D6F361;
}
#novidades h3{
font: 12px tahoma;
padding: 3px;
}
#rodape{
clear:both;
font: 14px tahoma;
padding: 20px;
border-top: 1px solid black;
}
article{
background: #EEE287;
border: 1px solid black;
padding: 20px;
margin-bottom: 15px;
}
article footer{
text-align: right;
}

Edited May 27, 2012 at 09:31 PM by softklin
Adicionado GeSHi

HappyHippyHippo · May 27, 2012 at 01:07 AM

não percebi ... estás a pedir-me para fazer o teu html, mesmo depois de te apresentar o código que resolve o teu problema e mesmo tu apresentares um link a explicar como se resolve ???

Danny_Pt · May 27, 2012 at 01:11 AM

Nada disso... 🙂

A minha questão é, onde eu meto esse código que me facultaste? Na folha de html?

Eu tentei experimentar com esse link que disse...mas dá-me o mesmo erro...o conteúdo fica sobreposto pelo header...

Obrigado desdde já.

HappyHippyHippo · May 27, 2012 at 01:25 AM

o código que te apresentei é um exemplo ... tem código HTML e CSS ... se não sabes como usar não sei o que te dizer ..

é o básico da programação web.

Estás a seguir algum tutorial para aprenderes ???

Danny_Pt · May 27, 2012 at 01:30 AM

Sim, eu sei que tem html e css, mas como estou numa fase inicial prefiro separar tudo.

Sim, tenho estado a seguir o thenewboston (vídeos), mas como referi é normal que tenha estas dúvidas, começei há uma semana e pouco...lol

Esse código que me enviaste funciona, mas o header sai fora da boarder da div main, ou seja fica no ecrã completo. E se eu colocar o url da imagem que quero para header não funciona...não sei porquê... :\

HappyHippyHippo · May 27, 2012 at 01:34 AM

faz post do teu código ... de outra maneira é impossível saber o que te acontece ...

ps: ou se tiveres um url para uma pessoa ver é melhor

Edited May 27, 2012 at 01:35 AM by HappyHippyHippo

Danny_Pt · May 27, 2012 at 12:48 PM

Não tenho url, pois estou a fazer offline... :\

Mas postei o código acima, no post #3.

Se quiseres também posos tirar uma SS. É que não estou mesmo a ver o que estou a fazer mal...já experimentei de todas as maneiras e feitios...

Danny_Pt · May 27, 2012 at 09:29 PM

Ok já consegui através de CSS.

Tive que fazer isto no CSS:

#header{
position: fixed; /* fixed header*/
height: 288px;
top: 0px;
}
#main{
border: 3px solid black;
background: white;
width: 1000px;
margin: 10px auto;
text-align:left;
padding-top: 280px; /* fixed header*/
padding-bottom: 280px; /* fixed header*/
}

A única questão é que o vídeo do youtube, se eu puxar o conteúdo para cima, ainda se sobrepõe ao header, como mostrei na SS...acho que há uma forma de resolver isso...não sei é qual...

Edited May 27, 2012 at 09:32 PM by softklin
Adicionado GeSHi

brunoais · May 28, 2012 at 09:16 AM

usa o z-index. Experimenta meter a 1.

z-index:1;

(se n for 1, é -1)

Danny_Pt · May 28, 2012 at 03:37 PM

usa o z-index. Experimenta meter a 1.
z-index:1;
(se n for 1, é -1)

Meto isso no CSS em que parte? 🙂

Se quiseres vê o meu código acima...

HappyHippyHippo · May 28, 2012 at 03:39 PM

tens de adicionar ao elemento header para que fique por cima dos outros elementos

Danny_Pt · May 28, 2012 at 04:54 PM

tens de adicionar ao elemento header para que fique por cima dos outros elementos

Mas nos outros não teria que colocar então um z-index com um número maior? Ou o -1 faz isso por defeito?

Obrigado

rumbafum · May 28, 2012 at 05:46 PM

Penso que tecnicamente o valor quando não tens definido z-index é 0, portanto ao colocares z-index:1 no header este ficará por cima de qualquer outro controlo.

A questão aqui é que o video do youtube estará a correr num iframe parece-me e aí poderás ter outro tipo de problemas. Não sei se o z-index será respeitado.

Edited May 28, 2012 at 05:46 PM by rumbafum

brunoais · May 28, 2012 at 08:40 PM

A questão aqui é que o video do youtube estará a correr num iframe parece-me e aí poderás ter outro tipo de problemas. Não sei se o z-index será respeitado.

O problema nem é o iframe, o problema é o próprio plugin do flash. Esse é que pode não respeitar o z-index.

Danny_Pt · May 28, 2012 at 09:33 PM

O problema nem é o iframe, o problema é o próprio plugin do flash. Esse é que pode não respeitar o z-index.

E acho que não respeita...lol

I'll give it a try...

rumbafum · May 28, 2012 at 09:47 PM

O problema nem é o iframe, o problema é o próprio plugin do flash. Esse é que pode não respeitar o z-index.

Na verdade era isso que queria dizer 😉

Para funcionar tens que especificar o parâmetro wmode=transparent no link de youtube.

Danny_Pt · May 28, 2012 at 09:56 PM

Na verdade era isso que queria dizer 😉

Para funcionar tens que especificar o parâmetro wmode=transparent no link de youtube.

Como esperava o z-index=0 ou -1 não deu... :\

Como faço essa operação do parêmtro wmode=transparent no link do youtube?

Obrigado por todas as dicas pessoal 🙂

rumbafum · May 28, 2012 at 10:01 PM

Na verdade era z-index=1 no header 😉

Quanto ao parâmetro adiciona no url do vídeo: ?wmode=transparent mas só se não funcionar o z-index claro

Sign In

Como fixar bem o header?

Recommended Posts

Danny_Pt

HappyHippyHippo

Danny_Pt

HappyHippyHippo

Danny_Pt

HappyHippyHippo

Danny_Pt

HappyHippyHippo

Danny_Pt

Danny_Pt

brunoais

Danny_Pt

HappyHippyHippo

Danny_Pt

rumbafum

brunoais

Danny_Pt

rumbafum

Danny_Pt

rumbafum

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information