a
Accueil du siteContact E.mail
 
 
Ouvrir Fermer
Partager

Les astuces et divers scripts utilisés

CSS

La plupart des navigateurs récents respectent les standards, ce qui devrait simplifier la tâche du créateur d'un site web.
Mais Internet Explorer se distingue par quelques bugs ou différences de prise en charge, ce qui nécessite parfois quelques "détours" pour s'adapter au plus répandu des navigateurs.
 

Image fixe en bas de page

Exemple: la barre à roue de cette page.

Positionner un élément fixe (image, menu, etc...) en bas de la page est théoriquement très simple avec les css. Par exemple:
.fixe {
position:fixed;
bottom:0;
right:0;
}
Mais Internet Explorer ne prend pas en charge l'attribut "fixed".
Il existe un hack pour contourner ce problème.
Il est tès bien détaillé ici > Zone figée à l'écran sous IE.

J'ai bien évidemment essayé, mais si le résultat est globalement satisfaisant, il y a néanmoins quelques petits bugs sur certains navigateurs.
J'ai donc préféré une autre méthode faisant appel à javascript. On place le bloc en position absolute pour IE, et en position fixed pour les autres navigateurs.

Css du bloc fixe:

#fixed { /* place le bloc en position absolute pour IE*/
position: absolute;
bottom: 0;
right: 0;
}
html>body #fixed { /*IE ne comprenant pas cette graphie, replace le bloc en position fixe pour les autres navigateurs*/
position: fixed;
}
On fait appel maintenant à un script qui recalcule la hauteur de la page en fonction de son défilement.
Si javascript est désactivé, le bloc apparaitra en position absolute en bas de la page.
A mettre dans un fichier externe, téléchargeable ici: div-fixe.js
Lien à mettre dans le head:
<script src="div-fixe.js" type="text/javascript"></script>

Le script de positionnement (div-fixe.js):

Cliquez dans le champ de texte pour tout sélectionner


Ce script ne fonctionne pas sous IE avec une DTD strict, comme c'est le cas ici. Il faut donc la cacher à IE:
<!--[if !IE]> <--> <DTD> <!--> <![endif]-->
Ce qui permet également d'utiliser des effets de style propres à IE, qu'une DTD strict n'autorisait plus, avec une css lue uniquement par IE.

Les info-bulles 

Il existe de nombreux scripts permettant l'apparition d'info-bulles au survol d'un lien (texte ou image).
J'ai préfèré faire appel aux css pour faire apparaître un

bloc en position absolute en guise d'info-bulle

Définition du bloc de l'info-bulle

dans la feuille de style.
#infobulle {
top:0px; /*position par rapport au haut*/
left:0px; /*position par rapport à la gauche*/
position:absolute;
visibility: hidden;
/*largeur, hauteur, bordure, ect...*/
}

Appel de l'info-bulle

au survol d'un lien ou d'une image.
Cliquez dans le champs de texte pour tout sélectionner

Contenu de l'info-bulle

à placer tout en bas de la page.
<div id="infobulle">....contenu....</div>

Menu dans une popup

Menu déroulant dans un select

Initialement, je souhaitai mettre en place un menu déroulant reprenant toutes les rubriques et sous-rubriques du site, pour une navigation rapide.
Un simple select aurait pu faire l'affaire.
Mais la personnalisation du champ select est limitée et il est impossible de supprimer les bordures, ce qui ne me convenait pas.

J'ai donc choisi d'ouvrir un bloc sur le click d'un bouton

Menu dans une "popup"

Voir l'exemple en haut (Menu rapide)

Définition du bloc du menu

dans la feuille de style.
A noter l'utilistion de
"overflow:auto;"
pour inclure des barres de défilement.
#pop {
width:390px;
height:380px;
position:absolute;
top:135px;
left:370px;
display:none;
overflow:auto;
background-color:#d6e2ec;
background-image:url(img-ac/trame3.gif);
border-style:solid;
border-width:1px;
border-color:#223F56;
padding:4px;
color:#343444;
font-family:geneva, arial, helvetica, san-serif;
font-size:12px;
text-align:left;
}

Ouverture du menu

en cliquant sur un lien de la page
<a href="#pop" class="pop"><img src="bouton.gif" alt="Menu" width="25" height="30" class="img" /></a>

Contenu du menu

à placer en bas de la page
<div id="pop">......contenu.....</div>

Code du script

A mettre dans le <head> ou dans un fichier.js externe.
Cliquez dans le champ de texte pour tout sélectionner

Agrandir les images dans une popup

Agrandissement d'images

Toutes les photos présentes sur le site sont de taille réduite, afin d'améliorer le chargement, liées à une photo plus grande qui s'ouvre dans une popup.
Le script utilisé est le suivant: popup-img.js
Il ouvre une popup à une taille initialement définie et qui se redimensionne à la taille de l'image.
Il s'ouvre ainsi:
<a href="javascript:PopupImage('grande-image.jpg')"><img src="petite-image.jpg" /></a>
S'il fonctionne parfaitement sous Internet Explorer, il génère sous la plupart des autres navigateurs une popup légèrement plus petite avec des barres de défilement, ce qui oblige à redimensionner la fenêtre pour voir l'intégralité de l'image.
Ce qui n'est pas vraiment idéal.

Un nouveau script pour l'affichage des images

va donc progressivement être mis en place.
Il ouvre une simple popup aux dimensions de l'image, l'astuce étant de mettre l'image en fond de page afin d'éviter un décalage selon le navigateur ou le système d'exploitation.
Cliquez dans le champ de texte pour tout sélectionner

On peut faire apparaitre le nom du fichier de l'image à la place de "mes photos" en remplaçant:
titre="Mes photos"
par
var titre=fichier;
var k=titre.lastIndexOf('/',titre.length-1);
titre=titre.substring(k+1);
Cette popup se referme automatiquement (onBlur) dès que l'on clique dans la page.
Pour ouvrir la popup:
< a href = "grande.jpg" onclick="ouvre(this.href,400,300);return false;" > petite.jpg </ a >
Il faut bien sûr à chaque fois indiquer les dimensions de l'image.
Si le javascript est désactivé, l'image s'ouvrira comme un lien classique, dans la fenêtre active.

Impression des pages

Une feuille de style pour faciliter l'impression des pages.

Il est intéressant de pouvoir imprimer les pages d'un site sans les menus ou éléments inutiles.
Il suffit de dédier une feuille de style à l'impression, comme dans cet exemple avec print.css:
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Dans la structure de la page, certains éléments sont isolés dans des blocs spécifiques.
Par exemple:
  • <div class="bandeau"></div> Bandeau du haut
  • <div class="menu"></div> Menu à gauche
  • <div class="page"></div> Contenu central de la page
  • <div class="footer"></div> Pied de la page
Pour conserver uniquement le contenu du bloc "page" lors de l'impression, on rédigera la css suivante:
.bandeau, .menu, .footer {
visibility: hidden;
display:none;
}
.page {
width:90%;
/*on définit ici la mise en page souhaitée pour l'impression, type de police, couleur, cadre, etc...*/
}
A appliquer à tous les blocs que l'on souhaite mettre en forme ou supprimer.
Les styles s'appliquent par défaut à tous les blocs interne au contenant.

Feuille de style pour Internet Explorer
 

Il peut être utile de destiner une

feuille de style aux seuls utilisateurs d'Internet Explorer.

Comme nous avons dû cacher la DTD-strict à IE pour autoriser le fonctionnement d'un script, il est désormais possible de définir certains effets de style propre à ce navigateur, et qu'une déclaration stricte nous interdisait.
Ici, une css qui colore les barres de défilement.
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
Les statistiques du site avec
MOOSTIK
sont consultables ici statistiques du site


Diamond Web Award      Golden Web Award     Canada Graphics     Gold Metal Web Award of Excellence
 
Facebook.com/Mandragore2
 
 
Haut de la page
Haut de la page
visiteurs depuis le : 02-04-2002 - Actuellement sur le site :
Accueil du site

ACCUEIL

La construction du Mandragore 2

Les plans

L'histoire du Mandragore 1

Jonques et gréement de jonque

Projets

Encyclopédie de la mer

Le bois

Pavillonnerie

La construction amateur

Liens

Livre d'Or

Référencement

Webmasters

Le site