Bonjour,
Désolé pour ce gros contre temps... Mais je suis toujours là... Ouf !
Bon alors après mille et un tests, pour la plus part concluant mais pas pour ce que je veux... En tout cas pas dans ma configuration actuelle de site.
Pour blue : Merci de ce bout de code il reflète ce que je cherche mais cela me fait trop changer ma mise en page actuelle... Mais je le garde quand même car il répond à une de mes queqtions futur (enfin plus maintenant...)
. Super encore merci
Donc pour mon histoire d'image j'ai pu le résoudre alors je vais tenter de résumer tout cela le plus clairement possible. Attention on est prêt , C'est partie !! :
Le but de tout cela est de pouvoir avoir une image en permanence en bas à droite de la page destinée à revinir en haute de page... Tout simplement...
"langages" utilisés : css, javascript et php (une pointe de rien
jsuteme pour un côté pratique... vous verrez).
Voilà comment je m'y suis pris (certainement pas sans aide mais j'en parle plus loin...
)
1) Créer un fichier .inc que vous enregistrez en "image.inc" et dans le quel vous insérez ceci :
<style type="text/css">
#fixed { position: absolute;
bottom: 0;
right: 0;
width:85px;
height:26px;
}
html>body #fixed { position: fixed;
}
</style>
<script type="text/javascript">
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var footerElement = document.getElementById('fixed');
if (windowHeight - 60 >= 0) {
if ((document.all) && (navigator.appVersion.indexOf("Mac",0)<0)) {
footerElement.style.position = 'absolute';
footerElement.style.top = (document.body.scrollTop + windowHeight - 60) + 'px';
}
else {
footerElement.style.position = 'fixed';
footerElement.style.top = (windowHeight - 60) + 'px';
}
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
window.onscroll = function() {
setFooter();
}
</script>
Note : L'extention .inc n'a guère de conséquence dans l'interprétation du code par le navigateur, mais ça permet de l'identifier pour soi même...
2) Vous créez un autre fichier .inc que vous appelez "imretour" et l'enregistrez en imretour.inc, dans lequel vous insérez ceci :
<div id="fixed">
<p><img src="http://www.votresite.truc/images/votreimage.gif" width="85" height="26" border="0"></p>
</div>
Note importante :
quand vous insérez du code dans un fichier .inc il est impératif de mettre uniquement le code voulu. C'est à dire que vous ne devez mettre rien d'autre comme <html> </html>, <title> </title>, <body> </body>... Pour plus de renseignement c'est ici :
http://www.phpdebutant.org/article68.php
Aussi, l'utilisation du php dans une page oblige de renomer son extention en .php. Même pour un chti bout de code comme celui qu'on utilise ici.
Voilà une première partie de faite !
3) Maintenant on va "inclure" ces 2 fichiers aux pages. Pour cela on va utiliser ceci :
<?php include('chemin jusqu'au fichier à inclure'); ?>
Ce code va donc appelé ce qui a été placé dans retour.inc et imretour.inc. Une fois lu dans un navigateur tout s'intégre normalement, à la manière du css...
Donc, dans votre page (l'index par exemple)
a) vous placez dans le head ceci :
<?php include('chemin.../retour.inc'); ?>
b) dans cette même page mais cette fois dans le body et de préférence tout en bas, juste avant </body>, vous placez ceci :
<?php include('chemin.../imretour.inc'); ?>
4) Finalement il vous suffit d'insérer votre ancre de "retour" en haut de votre page, juste après <body> :
<a name="retour"></a>
Note importante :
Le php ne s'affiche pas sur votre ordi sans y apporter un plus... Tout vous est expliqué ici :
http://www.phpdebutant.org/article118.php au chapître "Utiliser PHP sur son ordinateur" et "Quel outil pour faire du PHP ?". Rien de sorcier.
--------------------------------
Petits réglages :
Pour ajuster la position de l'image cela ce fait dans
image.inc, à ces lignes (le -60):
if (windowHeight - 60 >= 0) {
footerElement.style.top = (document.body.scrollTop + windowHeight - 60) + 'px';
footerElement.style.top = (windowHeight - 60) + 'px';
Et pour la taille de l'image, dans
retour.inc ce sont les :
width:85px;
height:26px;
Ainsi que dans
imretour.inc :
width="85"
height="26"
--------------------------------
Ressources :
http://www.mandragore2.net (
C'est là que j'ai trouvé la base et avec l'aide de son webmaster).
http://www.phpdebutant.org
http://www.alsacreations.com
--------------------------------
Voilà, j'espère que cela est suffisament clair. Toute fois, s'il y a une/des erreur (s) dites moi tout... Ca fonctionne c'est sûre (visible ici :
http://www.galihan.net) mais des fois dans les explications ou copies des codes... ??
Outch !! 'vai manger un bout moi
F.
