Comme vous l'avez surement remarqué, le site de l'Université est passé responsive ; c'est-à-dire qu'il peut désormais s'adapter à tous les écrans, néanmoins, n'étant pas prévu à cet effet, il a fallu tordre un peu le code pour que cela fonctionne

Cela n'a pour ainsi dire pas de conséquence pour les personnes qui ne manipulent pas le code HTML lors de la mise en page.

Il est néanmoins important de respecter les règles suivantes :

Page libre

Ne pas utiliser plus de trois colonnes dans les pages.

• Pour deux colonne, mettre les colonnes à 50%. Toute autre dimension entrainera des problèmes.
• Pour trois colonnes, mettre les colonnes à 33%. Toute autre dimension entrainera des problèmes.

Pour les images

Une image ne dispose au maximum que de 730px de large, aussi, merci de n'utiliser que des images ne dépassant pas cette taille en largeur

• Pour une image qui doit prendre toute la taille en largeur du bloc principal, utiliser une taille au-dessus de 500px.
  Attention : pour les encadrés, ne pas utiliser de tailles supérieures à 150px.
• Pour le reste, les images sont traitées de la sorte :
  • Pour les images de largeur inférieure à 20px, les images feront 20px de large
  • Pour les images de largeur comprise entre 20px et 40px, les images feront 40px de large
  • Pour les images de largeur comprise entre 40px et 50px, les images feront 50px de large
  • Pour les images de largeur comprise entre 50px et 100px, les images feront 80px de large
  • Pour les images de largeur comprise entre 100px et 150px, les images feront 130px de large
  • Pour les images de largeur comprise entre 150px et 200px, les images feront 180px de large
  • Pour les images de largeur comprise entre 200px et 250px, les images feront 220px de large
  • Pour les images de largeur comprise entre 250px et 300px, les images feront 270px de large (sauf quand elles sont mises dans un tableau ou elles ne font que 200px
  • Pour les images de largeur comprise entre 300px et 400px, les images feront 370px de large
  • Pour les images de largeur supérieure à 500px, les images 100% de la largeur disponible
• Attention : si vous manipulez le code des images, veillez à respecter la nomenclature de la propriété largeur. Soit : width:XXXpx où XXX est un nombre, sans espace entre les deux points du width et le nombre de pixels.

  Les propriétés dites d'alignement lors de l'intégration (à droite et à gauche) permettant de faire "flotter" une image à droite ou à gauche d'un texte restent valables

  Pour le texte

  Ksup gère mal le texte. Techniquement, il n'utilise pas de balise paragraphe pour gérer ces derniers, et lorsque l'on veut aligner à droite ou justifier, il utilise des balises div... or, pour pouvoir rendre le site responsive, un traitement supprime les styles attribués à ces balises... ce qui a pour conséquence que les alignements de texte ne sont plus pris en compte !

  À noter que pour ce site, la justification est peu recommandée, puisqu'on ne peut pas la changer à la volée lors d'une réduction de fenêtre, ni même la définir autrement pour les smartphones. Aussi, nous vous déconseillons de l'utiliser.

  Pour l'alignement au centre ou à droite, lorsque vous sélectionnez du texte (ou une image, ou les deux) et que vous utilisez les boutons d'alignement de texte, voici ce que vous trouvez dans le code source (bouton Source de la barre d'outils) (ici exemple du centrage) :

  <div style="center">Votre texte</div>

  Pour que le code fonctionne, dans la ligne ci-dessous, remplace div par p dans les deux balises (<div style="center"> et </div> devient <p style="center"> et </p>).