Accueil > Forum > > > > Comment avoir un footer comme celui-ci?
Comment avoir un footer comme celui-ci?
lundi 11 mai 2009 à 21:18:03 |
Comment avoir un footer comme celui-ci?

jeffwow
|
Bonjour. Je cherche en vain depuis quelques heures... Comment ont-ils fait ce footer ? (il faut attendre quelques secondes pour que le script se lance). http://www.instantslideup.com/index.php Merci!
|
|
lundi 11 mai 2009 à 22:50:09 |
Re : Comment avoir un footer comme celui-ci?

nhervagault
|
Salut,
Voila le code mini
<html>
<head></head>
<body>
<div id="adUnit" style="bottom:0;
height:90px;
left:0;
margin:0 0 -90px;
padding:0;
position:fixed;
width:100%;
background-color:#ef4535;
margin-bottom: 0pt;" >Bonjour
</div>
</body>
</html>
|
|
mardi 12 mai 2009 à 15:37:58 |
Re : Comment avoir un footer comme celui-ci?

leris
|
salut,
(je ne sais pas si ça va s'afficher, je ne sais pas comment on poste du code html ici)
la page:
=======
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Footer demo</title>
<style>
body{
margin: 0px;
background-color: #112233;
text-align: center;
color: gold;
overflow: hidden;
}
#page{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: auto;
}
#cont{
position: relative;
width: 100px;
height: 850px;
border: 1px solid gold;
}
#footer{
visibility: hidden;
background-color: #8888ff;
color: #112233;
width: 97%;
font-family: Arial, Comic Sans MS, Times;
font-size: 10px;
text-align: center;
padding: 0 10 0 10;
margin: 0px;
position: absolute;
bottom: 2px;
left: 10px;
z-index: 50;
}
</style>
<script type="text/javascript" src="footer00.js"></script>
</head>
<body onload="addFooter();">
<div id="footer">
<hr style="width: 100%; color:#2222ff">
</div>
<div id="page">
<div id="cont">
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
blablabla blablablablabla blablabla blablablabla
</div>
</div>
</body>
</html>
=======
le fichier "footer00.js" :
=======
function addFooter()
{
var timer = setTimeout("seeFooter()",5000);
}
function seeFooter()
{
footerDiv = document.getElementById('footer');
footerDiv.style.visibility="visible";
textToDisplay = "<hr width='100%' color='#2222ff' />";
textToDisplay += "Placer ici le texte";
textToDisplay += "<hr width='100%' color='#2222ff' />";
footerDiv.innerHTML= textToDisplay;
}
=========
si ça s'affiche pas , je mets la page sur un serveur ...
L.
|
|
mardi 12 mai 2009 à 15:40:05 |
Re : Comment avoir un footer comme celui-ci?

leris
|
re, ben c'est bon ...
evidemment on peut faire apparaitre le calque progressivement comme sur le site , mais ça alourdi le script ... ici le delai est de 5 secondes (5000)
L.
|
|
mardi 12 mai 2009 à 19:38:57 |
Re : Comment avoir un footer comme celui-ci?

jeffwow
|
Merci pour vos réponses!
Finalement j'ai réussi en bidouillant ce petit timer:
if (document.getElementById('test').style.bottom =='0px') { clearInterval(timer); } else { var x; var ln; ln = document.getElementById('test').style.bottom.length; if (ln > 4) { x = document.getElementById('test').style.bottom.substr(0, 3); } else { x = document.getElementById('test').style.bottom.substr(0, 2); } x = parseInt(x); x = x + 3;
document.getElementById('test').style.bottom = x + 'px'; }
et le html:
<div id="adUnit" style="bottom:-90px; height:90px; left:0; margin:0 0 -90px; padding:0; position:fixed; width:100%; background-color:#ef4535; margin-bottom: 0pt;" >Bonjour </div>
Il suffit donc de mettre le code js dans le head et de lancer "timer" au load de la page.
|
|
mardi 12 mai 2009 à 20:03:40 |
Re : Comment avoir un footer comme celui-ci?

leris
|
doit manquer quelque chose dans ton code ...
moi j'ai juste une barre rouge en haut de page ???
|
|
mardi 12 mai 2009 à 20:07:38 |
Re : Comment avoir un footer comme celui-ci?

jeffwow
|
A copier dans le head: <script type="text/javascript" language="javascript"> var timer; onload { Timer(); }
function Timer() { setTimeout("ShowFooter()",4000); } function ShowFooter() { timer = setInterval("updiv()", 10);
} function updiv() {
if (document.getElementById('test').style.bottom =='0px') { clearInterval(timer); } else { var x; var ln; ln = document.getElementById('test').style.bottom.length; if (ln > 4) { x = document.getElementById('test').style.bottom.substr(0, 3); } else { x = document.getElementById('test').style.bottom.substr(0, 2); } x = parseInt(x); x = x + 3;
document.getElementById('test').style.bottom = x + 'px'; } } function closeDiv() { document.getElementById('test').style.visibility = 'hidden'; } </script>
Et dans ton body:
<div id="test" style="bottom:-90px; height:90px; left:0; margin:0 0 -90px; padding:0; position:fixed; width:100%; background-color:#ef4535; margin-bottom: 0pt;" >Bonjour </div>
|
|
mardi 12 mai 2009 à 21:08:20 |
Re : Comment avoir un footer comme celui-ci?

leris
|
merci,
ça fonctionne à condition de mettre le calque en position:absolute et non fixed.
++
L.
|
|
Cette discussion est classée dans : footer
Répondre à ce message
Sujets en rapport avec ce message
eliminer le footer et le header lors d'une impréssion [ par vince ]
Bonjour,Je souhaiterais imprimer une page html toute simple sans qu'apparaisse le nom de la page, le titre etc... par une fonction javascript.Je n'ai
Impression de header et de footer d'images [ par jessak ]
Par exemple, si l'on a image1.gif comme header et image2.gif commme footer, mais que le texte entre est trop long. (Donne 2 pages à l'impression) . Po
position bas du footer page web [ par Jarod1980 ]
Bonjour,Je savoir comment positionner mon footer de ma page web en bas de mon écran et ceci pour chaque résolution.Mon footer est défini entre 2 balis
Script footer.js [ par Lepajero ]
BonjourJe suis en train de créer un CSS pour les pages HTML de mon site et j'ai trouvé le script footer.js pour placer un pied de page que je n'aurais
Livres en rapport
|
Derniers Blogs
COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL [WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL?[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson
Certain d'entre vous on peut être vécu cette situation embarrassante après quelques temps passer avec WF4 : Au début avec mon " ActivityDesigner" , tout allait bien. Et puis un jour j'ai au des problèmes de " Binding" . Alors nous sommes allé sur le site ...
Cliquez pour lire la suite de l'article par JeremyJeanson MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ?MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg
La prochaine session de MyTIC aura lieu à Namur, le 23 mars prochain. Pendant presque une heure, nous parlerons de SharePoint 2010. Voici un aperçu du programme.
Accueil : 17h30 Début de la session : 18h00 - Les nouvelles int...
Cliquez pour lire la suite de l'article par junarnoalg
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|