Archives par mot-clé : mysterty

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 !

Engagement politique, social et écologique

Publié le par
Répondre

Je n’ai jamais su fermer les yeux. Ça m’a parfois valu des problèmes mais c’est comme ça.

En mars 2016, j’ai vu apparaître le mouvement Nuit Debout. J’ai vu des personnes de tout âge et de toute provenance s’asseoir en cercle et discuter ensemble. J’ai vu des personnes témoigner, d’autres informer, d’autres écouter… Et ça a été une libération. Je n’étais pas seul. Nous ne sommes pas seuls.

Dans toute la France nous nous sommes réunis. Notre mouvement est venu d’un petit caillou jeté dans l’eau vers un immense raz de marrée qui a commencé à submerger les esprits et à éroder les consciences. Et j’ai compris qu’on avait chacun quelque chose à apporter. Depuis La Rochelle, j’ai vu le mouvement évoluer, monter en puissance puis s’épuiser. Mais il a été la source qui a nourri de nombreuses graines dans notre société.

Pour ma part, j’ai commencé par créer une chaîne youtube dédiée à mes engagements politiques, sociaux et écologiques en postant une première vidéo sur la fermeture de l’usine Alstom de belfort, puis que j’ai continué à nourrir au fur et à mesure (n’hésitez pas à laisser des pouces bleus et à les partager d’ailleurs 😉 ).

Vidéo sur le mythe des chômeurs assistés et fraudeurs

Et je ne me suis pas arrêté là en lançant le site Les Devinettes de Mysterty dont le principe et d’inciter chacun à réagir sur des sujets d’actualité en mettant à contribution mes quelques notions de dessin (encore une fois, n’hésitez pas à partager 😉 ).Bref, si j’écris cet article, c’est pour partager avec vous cette expérience et vous rappeler que chacun peut être utile. C’est pour vous rappeler que des solutions existent et qu’elles sont à notre portée, à condition qu’on sorte de la terre gelée qu’on essaye de nous imposer. Renseignez-vous autour de vous sur les initiatives qui essayent de germer ou qui ont déjà des racines solides et nous promettent des fruits pleins d’espoir.

De nombreuses luttes éclatent partout en France. Nous pouvons tous changer cette société.