Mois : mai 2014

[CSS] Forcer une liste non ordonnée (ul) à se comporter en tableau HTML avec la pseudo-classe nth-child, la propriété box-sizing et la fonction calc

27/05/2014 /

list-table

Nouvelle version :

Autre solution, mieux écrite, exploitant la propriété CSS box-sizing: border-box; : http://jsfiddle.net/frontenddeveloper/795Cc/4/.

Sources :

Prise en charge : IE9+ (IE8+ sans l’utilisation de la fonction calc pour pallier à un bug de largeur sur le dernier élément de la liste).


<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
  <li><a class="link" href="#">01</a></li>
  <li><a class="link" href="#">02</a></li>
  <li>03</li>
  <li>04</li>
  <li><a class="link" href="#">05</a></li>
  <li><a class="link" href="#">06</a></li>
  <li class="current"><strong>07</strong></li>
  <li><a class="link" href="#">08</a></li>    
  <li><a class="link" href="#">09</a></li>
  <li><a class="link" href="#">10</a></li>
  <li><a class="link" href="#">11</a></li>
  <!--li><a class="link" href="#">12</a></li-->    
</ul>



.sizes-list{
  width: 100%;
  float: left;
  margin-bottom: 16px;
}

.sizes-list li{
  float: left;
  text-align: center;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
  clear: left;
}

/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
  clear: none;
}

.sizes-list li{
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-right-width: 0;
  border-style: solid;
  border-color: #e5e5e5;
}

.sizes-list li{
  width: 20%;    
}

.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
  width: calc(20% + 3px);
  border-color: red; 
}

.sizes-list li:nth-child(5n+5):last-child{
  width: 20%;
  border-color: olive;
}

.sizes-list.four-columns-rows li{
  width: 25%;
}

.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: calc(25% + 3px);
  border-color: red;
}

.sizes-list.four-columns-rows li:nth-child(4n+4):last-child{
  width: 25%;
  border-color: olive;
}

/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
  margin-top: -3px;
}

.sizes-list,
.sizes-list a.link{
  color: #50494c;
  text-decoration: none;
}

.sizes-list li.current{
  background-color: #e5e5e5;
}

/*
.sizes-list a.link,
.sizes-list strong{
  display: block;
  padding: 8px 0;
}
*/

.sizes-list li:last-child,
.sizes-list li:nth-child(5n+5),
.sizes-list.four-columns-rows li:nth-child(4n+4),
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child{
  border-right-width: 3px;
}

.sizes-list.four-columns-rows li:nth-child(5n+5){
  border-right-width: 0;
}

Ancienne version :

Test en live : http://jsfiddle.net/frontenddeveloper/As8BQ/.

La liste comportera des cellules à largeurs flexibles (déclarées en pourcentages (%)). Le tableau affiche par défaut 5 colonnes. L’ajout de la classe .four-columns-rows affichera un tableau de 4 colonnes.


<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><strong></strong></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
</ul>



.sizes-list{
  width: 100%;
  float: left;
  margin-bottom: 16px;
}

.sizes-list li{
  float: left;
  text-align: center;
}

/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
  clear: left;
}

/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
  clear: none;
}

.sizes-list li{
  width: 20%;
}

/* [standard 5 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 6ème élément inclus */
.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
  width: 20.97%;
}

/* [4 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li,
.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: 25%;
}

/* [4 colonnes] Si le dernier élément de la liste est l'un des 3 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li:nth-child(-n+3):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: 25.97%;
}

/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
  margin-top: -3px;
}

.sizes-list a.link,
.sizes-list strong{
  display: block;
  padding: 8px 0;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-right-width: 0;
  border-style: solid;
  border-color: #e5e5e5;
}

.sizes-list,
.sizes-list a.link{
  color: #50494c;
  text-decoration: none;
}

.sizes-list strong{
  background-color: #e5e5e5;
}

/*
.sizes-list li:nth-child(5n+1) a.link,
.sizes-list li:nth-child(5n+1) strong,
.sizes-list.four-columns-rows li:nth-child(4n+1) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+1) strong{
  border-left-width: 3px;
}
*/

.sizes-list li:last-child a.link,
.sizes-list li:last-child strong,
.sizes-list li:nth-child(5n+5) a.link,
.sizes-list li:nth-child(5n+5) strong,
.sizes-list.four-columns-rows li:nth-child(4n+4) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+4) strong,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child strong{
  border-right-width: 3px;
}

.sizes-list.four-columns-rows li:nth-child(5n+5) a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5) strong{
  border-right-width: 0;
}

[Prestashop 1.6] Charger ou surcharger proprement un fichier CSS ou JS se trouvant dans un thème

22/05/2014 /

Source : http://stackoverflow.com/questions/23472036/override-controller-in-prestashop-1-6 et http://www.prestashop.com/forums/topic/207770-load-css-last/.

Exemple pour l’ajout d’un fichier CSS global.css se trouvant dans _mon_thème_/css/override/

Créer un fichier FrontController.php dans /override/controllers/front (ce répertoire se trouve en-dehors du thème).

Pour une SURCHARGE du code existant, utiliser la fonction initContent() qui permet d’inclure votre fichier APRES tous les autres :


<?php
class FrontController extends FrontControllerCore
{
    public function initContent()
    {
        parent::initContent();
        $this->addCSS(_THEME_CSS_DIR_.'/override/global.css');
    }
}
?>

Pour un SIMPLE AJOUT de code qui ne surchargera pas le code existant, utiliser la fonction setMedia() qui incluera votre fichier AVANT ceux du thème (à l’exception de ceux présents dans les répertoires _mon_theme_/_mon_type_de_fichier_/autoload/ :


<?php
class FrontController extends FrontControllerCore
{
    public function setMedia()
    {
        parent::setMedia();
        $this->addCSS(_THEME_CSS_DIR_.'/override/global.css');
    }
}
?>

Remarque importante : ne pas oublier de supprimer (manuellement ?) le fichier /cache/class_index.php (ce répertoire se trouve également en-dehors du thème).

[jQuery] Déplacer au clic le focus d’un élément actif à un élément inactif

14/05/2014 /

switch-focus