Danny_Pt Posted May 27, 2012 at 12:03 AM Report #458287 Posted 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 Posted May 27, 2012 at 12:32 AM Report #458290 Posted May 27, 2012 at 12:32 AM (edited) 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 IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
Danny_Pt Posted May 27, 2012 at 01:06 AM Author Report #458297 Posted May 27, 2012 at 01:06 AM (edited) 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 Posted May 27, 2012 at 01:07 AM Report #458299 Posted 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 ??? IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
Danny_Pt Posted May 27, 2012 at 01:11 AM Author Report #458301 Posted 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 Posted May 27, 2012 at 01:25 AM Report #458306 Posted 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 ??? IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
Danny_Pt Posted May 27, 2012 at 01:30 AM Author Report #458307 Posted 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 Posted May 27, 2012 at 01:34 AM Report #458309 Posted May 27, 2012 at 01:34 AM (edited) 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 IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
Danny_Pt Posted May 27, 2012 at 12:48 PM Author Report #458352 Posted 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 Posted May 27, 2012 at 09:29 PM Author Report #458418 Posted May 27, 2012 at 09:29 PM (edited) 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 Posted May 28, 2012 at 09:16 AM Report #458471 Posted May 28, 2012 at 09:16 AM usa o z-index. Experimenta meter a 1. z-index:1; (se n for 1, é -1) "[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31 Life is a genetically transmitted disease, induced by sex, with death rate of 100%.
Danny_Pt Posted May 28, 2012 at 03:37 PM Author Report #458568 Posted 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 Posted May 28, 2012 at 03:39 PM Report #458569 Posted May 28, 2012 at 03:39 PM tens de adicionar ao elemento header para que fique por cima dos outros elementos IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
Danny_Pt Posted May 28, 2012 at 04:54 PM Author Report #458596 Posted 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 Posted May 28, 2012 at 05:46 PM Report #458610 Posted May 28, 2012 at 05:46 PM (edited) 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 Posted May 28, 2012 at 08:40 PM Report #458669 Posted 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. "[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31 Life is a genetically transmitted disease, induced by sex, with death rate of 100%.
Danny_Pt Posted May 28, 2012 at 09:33 PM Author Report #458698 Posted 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 Posted May 28, 2012 at 09:47 PM Report #458704 Posted 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 Posted May 28, 2012 at 09:56 PM Author Report #458708 Posted 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 Posted May 28, 2012 at 10:01 PM Report #458711 Posted 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now