Archive pour la catégorie ‘Intégration – CSS / XHTML’

Image full-screen et responsive avec flexbox

vendredi 21 octobre 2016

Récemment j’ai dû mettre en place une « lightbox » pour afficher une image en full-screen et responsive. Il est assez facile avec Flexbox de centrer horizontalement et verticalement un élément. Il est également assez simple de rendre cette image responsive lorsque celle-ci « déborde » en largeur. Mais réduire l’image lorsque celle-ci est plus grande que la hauteur de l’écran tout en conservant son ratio s’est révélé un peu plus compliqué que ce que je pensais.

A la base l’idée était d’avoir un flex-container avec une hauteur et largeur de 100%, d’avoir un flex-item avec un max-width: 100% et un max-height: 100% histoire de ne pas avoir de débordement et de placer l’image dans le flex-item. Or le max-height sur le flex-item ne fonctionne pas sous Chrome…

Finalement après recherches (notamment dans l’excellent livre de Raphaël Goetter sur le sujet) j’ai pu trouver une solution très simple :

Le code HTML :

1
2
3

<div class="container-center-v-img">
    <img src="test.jpg" />
</div>

Le code CSS :

1
2
3
4
5
6
7
8
9
10
11
12

.container-center-v-img {
  display: flex;
  height: 100%;
  
}
 
.container-center-v-img > img {
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    object-fit: contain;
}

C’est tout !

 

Publié dans Intégration - CSS / XHTML | Aucun commentaire »

Utiliser SASS et compass sous Windows

mercredi 18 juillet 2012

Pour tous les développeurs / intégrateurs travaillant sous Windows, voici la procédure d’installation de Sass et de Compass sous Windows 7 / 8.

Lire le reste de cet article »

Mots-clefs : ,
Publié dans Intégration - CSS / XHTML, Windows | Aucun commentaire »

IE7 et z-index

mercredi 12 août 2009

Internet Explorer 7 possède un bug bien particulier qui lui est propre au niveau des z-index. En tous les cas je ne l’ai pas retrouvé ni sur IE6 (pour une fois) ni sur IE8.

Ce bug m’est apparu lorsque j’ai créé un menu déroulant en CSS / jQuery impliquant des listes positionnées en relative et absolute et que dans le contenu situé sous le menu j’ai un ou plusieurs éléments positionnés également en relative ou absolute. Dans ce cas j’avais le menu déroulant qui passait sous les éléments du contenu. Problème de z-index semble-t-il. Pourtant malgré le fait de bien paramétrer des z-index sur les éléments du menu et les éléments du contenu, rien à faire, le menu déroulant reste derrière. Grossièrement, le code a cette structure:

<div id="header">
    <div id="div_menu">
        <ul id="menu">
            <li><a href="#">Lien 1</a>
                <ul class="sousmenu">
                    <li><a href="#">Sous-menu</a></li>
                    <li><a href="#">Sous-menu</a></li>
                    <li><a href="#">Sous-menu</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div id="contenu">
    <div id="element_en_absolu">Le sous menu passe derrière !</div>
</div>

Tous mes z-index avaient été placés sur les éléments #div_menu, #menu, #menu li etc.. ainsi que sur #element_en_absolu.

Finalement j’ai trouvé la solution sur ce blog. J’ai résolu le problème en définissant un z-index le plus élevé sur #header. Ce qui veut dire qu’il faut donc définir un z-index qui soit le plus élevé que tous les autre sur le ou les parents du menu.

Mots-clefs : , , , , ,
Publié dans Intégration - CSS / XHTML | Aucun commentaire »