Archives par mot-clé : css

Footer fixé en bas ultra simple avec CSS3

Publié le par
Répondre

Bonjour bonjour !

J’en suis sûr, toi aussi tu t’es pris la tête sur ce foutu footer qui doit rester en bas même si le contenu n’est pas assez important ! Tu as mis du JS si tu étais un peu bourrin, ou tu as joué avec la technique du positon absolute et margin-top négatif, mais c’était lourd si ton footer changeait de taille, et puis c’était pas responsive…

Réjouis toi camarade, CSS3 pense à toi avec FLEX !

Flex, comment ça marche ? Et bien encore plus simplement que les tableaux.

D’abords prenons un squelette html5 simple :

<html>
  <body>
    <header>
      <h1>Mysterty propose un super site</h1>
    </header>
    <main>
      <p>
        voilà notre super site, merci Mysterty
      </p>
    </main>
    <footer>
      <p>
        et le footer fixé en bas
      </p>
      <p>
        fourni par <a href="https://www.mysterty.com/" title="mysterty, développeur web">notre partenaire</a>
      </p>
    </footer>
  </body>
</html>

Un header, un main, un footer, le tout dans un body, c’est tout ce dont on a besoin. Le reste c’est du CSS. L’idée va simplement être de définir le body comme une boite « FLEX », c’est à dire que son contenu sera adaptable, et de définir sa direction en « colonne » car on veut mettre le footer en bas (et on oublie pas de définir sa taille à 100% du support 😉 ).

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

On a fait 90% du job en 3 directives ! On a plus qu’à caler le footer en bas. Pour celà, il suffit de définir que sa marge « haute » doit être de la totalité de l’espace disponible (si espace disponible il y a) :

footer {
	margin-top: auto;
}

Et voilà, vous avez un footer parfaitement adaptable, complètement responsive ready !

Petit plus si vous utilisez Bootstrap 4, tout est déjà prêt, vous n’avez que 2 chose à faire : définir la taille du body et le margin-auto du footer 😉

Enjoy !

Transition CSS basé sur la taille ajustable… possible ?

Publié le par
Répondre

La réponse est oui.

Allez, vous aussi vous avez cherché à faire une jolie transition CSS sur votre sous-menu, non ? mais vous vous êtes demandés comment faire, car « height: auto » ne fonctionne pas avec les transition. Alors quoi ? on va quand même pas mettre une hauteur fixe… Et encore moins le faire en JS…

Et bien la solution est vraiment simple en fait. Ce n’est pas sur height qu’il faut se baser… mais sur max-height !

Le code tout de suite :

.sous-menu {
	display: block;
	overflow: hidden;
	max-height: 0;
	transition: max-height 2s;
}
.menu li:hover .sous-menu {
	max-height: 100em; // ça vous donne 100 ligne d'avance ;)
}

testez !

enjoy 😉

Tableaux et positions absolues

Publié le par
Répondre

Les graphistes…

Qui a déjà eu à travailler avec un graphiste très « enthousiaste » le sait : l’intégration, ça peut vite devenir galère.

« ha bah tiens, je vais mettre une image très jolie qui sort d’une cellule de mon tableau »… sauf que c’est typiquement le genre de chose qui n’est pas prévu.

En effet, un élément de tableau ne peut pas être affiché en position:relative. De même, si comme moi vous êtes un adepte de la propriété display:table-cell pour remplir automatiquement l’espace disponible, vous serait confronté à ce problème.

Pas de panique, il n’est pas insurmontable, voici la marche à suivre.

Commençons par créer notre tableau (ou élément table-cell) :

<table>
  <tr>
    <td>
      <img src='monimage.png' alt='ma super image'style="position:absolute; top:20px; left:50px"/>
      un text à côté
    </td>
  </tr>
</table>

Donc un élément table cell ne pouvant être en position relative, inutile d’espérer placer correctement notre image. La solution est en fait très simple (bien qu’un peu gênante pour les puristes) : rajouter une div qui elle aura une position relative :

<table>
  <tr>
    <td>
      <div style="position:relative">
        <img src='monimage.png' alt='ma super image'style="position:absolute; top:20px; left:50px"/>
        un text à côté
      </div>
    </td>
  </tr>
</table>

Vous voilà paré pour affronter les graphistes les plus inventifs !