Brico-Info - le blog de Bruno CATTEAU

Aller au contenu | Aller au menu | Aller à la recherche

Balise - css

Fil des billets - Fil des commentaires

lundi 29 mai 2006

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

Par Bruno le lundi 29 mai 2006, 08:58 - Informatique

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

aucun commentaire aucun rétrolien

mercredi 12 avril 2006

Jouer avec les lignes et les colonnes dans un tableau HTML

Par Bruno le mercredi 12 avril 2006, 22:04 - Informatique

Le HTML est du XML, la structure d'un tableau HTML n'y echappe pas. Les éléments TR sont compris dans un élément TABLE et les TD dans des éléments TR. Tous ça pour vous expliquer que c'est assez simple de retrouver la ligne d'une cellule, par contre, c'est beaucoup plus compliqué de retrouver la colonne (voir contre nature !)

Voilà trois méthodes illustrées par des exemples :

1. La première consiste à recuperer le TR parent du TD par les dom. Pour les colonnes, on compare la classe du TD qui est sous la souris avec l'ensemble des TD.

if (target.nodeName == 'TD') {
 cells = document.getElementsByTagName("td");
 for (var c = 0; c < cells.length; c++) {
  //colonne
  if (cells[c].className == target.className) cells[c].style.background = '#008000';
  //ligne
  if (cells[c].parentNode == target.parentNode) cells[c].style.background = '#008000';
 }
}

Tester l'exemple

2. La deuxième consiste à recuperer les lignes et les colonnes grâce aux classes de style. Chaque TD a deux classes, "row1 col3". Pour chaque TD, on compare la classe du TD qui est sous la souris avec la classe de chacun des TD.

if (target.nodeName == 'TD') {
  //recupération des deux class
  tabClass = target.className.split(' ');
  
  cells = document.getElementsByTagName("td");
  for (var c = 0; c < cells.length; c++) {
    //colonne
    if (cells[c].className.indexOf(tabClass[1])!=-1) cells[c].style.background = '#008000';
    //ligne
    if (cells[c].className.indexOf(tabClass[0])!=-1) cells[c].style.background = '#008000';
  }
}

Tester l'exemple

3. La derniere consiste à ajouter deux attributs sur chaque TD du tableau (col="2" row="4"). Ca ne fonctionne que sous Internet Explorer. Pour que ça marche sous Firefox, il faut que ces valeurs aient été ajouté par DOM (td.col="2")

if (target.nodeName == 'TD') {
 cells = document.getElementsByTagName("td");
  for (var c = 0; c < cells.length; c++) {
    //colonne
    if (cells[c].col == target.col) cells[c].style.background = '#008000';
    //ligne
    if (cells[c].row == target.row) cells[c].style.background = '#008000';   
  }
}

Tester l'exemple

Il y a d'autres pistes :

 - Modéliser le tableau HTML en un tableau Javascript, identifier les lignes et les colonnes sur ce tableau et faire la correspondance avec le tableau HTML

 - Utiliser le framework DOOM...

L'archive des exemples

aucun commentaire aucun rétrolien