Accueil

Bootstrap - Centrer une image responsive

Tags: CSS

Posté le 5 juin 2018


Cpj20180605213755165 bootstrap center img resp may2018

Avec Bootstrap 3, il existe deux classes CSS très pratiques qui permettent respectivement de rendre responsive une image tout en la centrant :

  • img-responsive
  • center-block

Exemple :

<img src="image.png" class="img-responsive center-block" />

 

Lire ...

CSS - Positionnement absolu

Tags: CSS

Posté le 12 novembre 2017


La position absolue (position: absolute) permet de placer un élément sans que soit pris en compte l'ordre dans lequel les éléments HTML sont déclarés dans le code.

La position relative (position: relative) permet de placer un élément par rapport à une position de référence.

En CSS, il est possible de définir à partir de quel élément la position est absolue. Pour ce faire, il suffit de définir la propriété "position: relative" à l'élément parent à partir duquel on souhaite positionner notre élément absolu.

Dans l'exemple ci-dessous, on positionne un bouton en bas à gauche d'un div :

.container {
    border: 1px solid #E9E3DD;
    float: left;
    height: 210px;
    margin: 2px;
    padding: 4px 2px 10px 10px;
    text-align: left;
    width: 117px;
    position:relative;
}

#bottom_button {
   position:absolute;
   bottom:0;
   left:0;
}
<div class="container">
    <div id="bottom_button">
		<input type="submit" value="Submit">
	</div>
</div>

 

Lire ...

Font Awesome avec les lettres de l'alphabet

Tags: CSS, HTML

Posté le 12 février 2017


Font Awesome est un fantastique outil utilisé par plusieurs centaines de milliers de sites Internet à travers le monde. Il fournit une multitude d'icônes facilement personnalisables et adaptables à n'importe quelles applications. Seulement, cette librairie a un manquement : comment peut-on faire des icônes avec des lettres de l'alphabet ? Heureusement, il existe une technique simple pour parvenir à cet objectif.

HTML :

<span class="fa fa-a"></span><br/>
<span class="fa fa-b"></span><br/>
<span class="fa fa-downcase-a"></span><br/>

CSS :

body {
    font-size: 14px;
}

.fa-a:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'A';
}

.fa-downcase-a:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'a';
}

.fa-b:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'B';
}

 

Lire ...

Rechercher

Tags

Publicité

Suivez-nous