Archives mensuelles : mai 2006

Alignement vertical d’une image dans un bloc div en CSS

Plusieurs techniques existent sur le web.

Quand on connait la hauteur des images

Ou quand on ne les connait pas, mais là, il faut s’accrocher

 

Quand on n’utilise pas Internet Explorer, on peut utiliser la proprieté display: table-cell; permettant alors d’utiliser la proprieté vertical-align: middle; propre aux cellules des tableaux. Mais ça ne marche pas sous IE <7 

On peut enfin utiliser les tableaux. Personne n’en parle comme d’un hack css, pourtant, avec cette technique, le code est compréhensible, pas si lourd que ça… Les pros du CSS seraient ils des ultras ?


  <html>
  <head>
    <style>   
      div {
        border: 1px solid black;
        background: #DDD;
        width: 200px;
        height: 154px;
        text-align: center;
        margin: 20px;
        float: left;    
      }     
      table {
        height:100%;
        width:100%;
        vertical-align: middle;
        text-align: center;
      }  
    </style>
  </head>
  <body>
    <div><table><tr><td><img src=image1.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image2.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image3.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image4.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image5.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image6.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image7.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image8.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image9.jpg></td></tr></table></div>
    <div><table><tr><td><img src=image10.jpg></td></tr></table></div>  
 </body>
</html>


Et les exemples en lien : avant le centrage et après le centrage

AJAX : comment gerer les favoris et la navigation du navigateur (retour et suivant)

L’AJAX va de pair avec le non rechargement de la page, mais pas la non navigation. Mais si on navique sans changer de page, alors on a pas d’historique. Et si on clique sur BACK, on pert tout !

Seulement, Gmail gère ce bouton BACK, et ce n’est pas le seul, alors pourquoi pas nous ? mais pas si simple…

Un framework qui porte bien son nom se propose de gerer le problème pour nous : RSH pour Really Simple History (genre RSS…)

Un tutorial complet est aussi disponible sur le site de onjava.com

J’ai mis à disposition les exemples sur ce blog parce qu’ils ont oublié de placer une librairie js…


On a une explication de comment marche cette gestion du back ici : de façon différentes selon les navigateurs (d’ailleurs, pas sur Safari).

Les ingrédients sont :

  • Iframes cachées,
  • Timers
  • Champs de formulaire cachés

[24/05/2006] Les exemples doivent être executés avec une adresse en « http:// » et non « file:/// » . Il faut donc avoir un serveur web.