Articles avec #css tag

Publié le 12 Juin 2015

Si vous essayez de placer un datepicker à l'intérieur d'une popup (modal) vous verrez que ce dernier apparaît derrière la popup et n'est donc pas utilisable.

Cela vient du fait que la popup bootstrap a un z-index de 1050 et donc le date picker est masqué.

La correction se fait directement en css en spécifiant un z-index supérieur à 1050 pour le datepicker.

.datepicker {
   z-index: 1150 !important;
}

On prend un peu de marge en ne spécifiant pas directement 1051 au cas où d'autres éléments viendrait se glisser entre ces 2 z-index.

Voir les commentaires

Rédigé par Bliz

Publié dans #CSS

Repost 0

Publié le 7 Août 2014

Après avoir vu comment supprimer les puces d'une liste HTML voici comment afficher une liste horizontalement avec CSS. En combinant cette technique avec quelques styles bien choisis (border, padding, etc) il devient facile de réaliser des menus et onglets.

Donc partons d'une liste toute simple comme la dernière fois:

<ul>
  <li>Pêche</li>
  <li>Pomme</li>
  <li>Poire</li>
</ul>

ce qui donne:

  • Pêche
  • Pomme
  • Poire

Maintenant appliquons le style suivant sur les éléments <li>:

display: inline;

et on obtient:

  • Pêche
  • Pomme
  • Poire

Voir les commentaires

Rédigé par Bliz

Publié dans #CSS

Repost 0

Publié le 3 Août 2014

Par défaut une list HTML utilise des puces pour chaque élément de la liste.

Par exemple:

<ul>
 <li>pêche</li>
 <li>pomme</li>
 <li>poire</li>
</ul>

s'affiche de la manière suivante:

  • pêche
  • pomme
  • poire

Si on veut supprimer les puces il faut applique le style CSS suivant sur les éléments <li>

list-style: none;

Ce qui donne:

  • pêche
  • pomme
  • poire

Voir les commentaires

Rédigé par Bliz

Publié dans #CSS

Repost 0

Publié le 14 Mai 2012

CSS permet d'insérer une image directement dans un élément HTML sans avoir à utiliser la balise <img>.

C'est très pratique que le code peut se contenter de générer uniquement une div HTML avec le texte nécessaire. La mise en page (et l'inclusion de l'image se fait uniquement en CSS).

Et côté CSS c'est également très simple, il faut utiliser la propriété background-image:

background-image: url('image.png');

Attention comme indiqué l'image sera placée dans l'arrière-plan de l'élément HTML. Pour éviter qu'elle soit recouverte de texte, il faudra utiliser un padding correspondant à la taille de l'image.

Voir les commentaires

Rédigé par Bliz

Publié dans #CSS

Repost 0

Publié le 24 Avril 2012

Alors voilà mon problème j'ai besoin de supprimer l'espace qui se trouve autour de mon élément HTML mais j'ai beau mettre tous les padding et les margin à 0. Il y a toujours un espace qui apparaît autour de mon élément.

Quand je vérifie à l'aide de firebug il m'indique bien que les margin et les padding sont à 0!! Bref je commençais à sécher ... jusqu'à je découvre la propriété "border-collapse".

Effectivement mon élément se trouvait dans une table HTML et une petite recherche sur le web indique que la valeur par défaut est : 

border-collapse: separate;

Ce qui signifie qu'il y a 2 bordures séparées (une pour le contenant et une pour le contenu), comme dans une table HTML sans CSS:

border-collapse: separate;

alors qu'avec :

border-collapse: collapse;

les 2 bordures se fondent en une seule:

border-collapse: collapse;

Voir les commentaires

Rédigé par Bliz

Publié dans #CSS

Repost 0

Publié le 2 Avril 2012

CSS c'est pas trop mon fort mais c'est sympa quand même alors je note les astuces au fur et à mesure que je les découvre.

Aujourd'hui j'ai besoin d'insérer un bouton dans une table. Mon problème c'est que le texte du bouton est trop long par rapport à la largeur de la colonne et du coup il s'étalle sur plusieurs. Ce qui au passage casse toute la mise en page.

Voici le problème pour simplifier:

text trop long qui prend plusieurs ligne

et là magie avec la propriété :

white-space: nowrap;

text trop long qui prend plusieurs ligne

Voir les commentaires

Rédigé par Bliz

Publié dans #CSS

Repost 0

Publié le 9 Décembre 2011

J'ai essayé de changer les propriétés CSS de ce blog pour faire apparaître les blocs de code avec une couleur d'arrière-plan.

Le problème lorsque je spécifie une coleur d'arrière plan on dirait que les lignes du paragraphes sont surlignées avec la couleur que je voulais utilisée.

Moi je veux que tout le paragraphe apparaîsse comme un bloc avec une couleur de fond qui fasse tout le fond du paragraphe.

En fait il fallait préciser au CSS de traiter le paragraphe en mode "block" et non pas en mode "flow" (par défaut et qui donne l'effet de surlignage). Fallait juste le savoir.

Voir les commentaires

Rédigé par Bliz

Publié dans #CSS

Repost 0

Publié le 11 Octobre 2011

J'ai récemment rencontré un problème avec mes styles css.

J'utilise une table HTML à 2 colonnes pour afficher diverses information sous forme de clé/valeur.

Les clés sont du texte donc pas de problème mais les valeurs peuvent être du texte ou des éléments plus complexes.

Mon problème et que j'applique une bordure sur les images lorsqu'elles correspondent à une valeur du tableau.

Pour ceci j'utilise le style CSS suivant:

.monTableau img { border: 1px solid #000; }

Jusque là pas de problème.

 

Mais j'ai eu besoin d'ajouter un élément complexe qui n'était pas juste une image mais une autre table comprenant des images.

Et forcément mon style CSS s'est retrouvé appliqué aussi sur ces images en plus du style défini dans mon élément - ce que je ne voulais pas.

En fait on peut spécifier dans le CSS sur quel élément doit s'appliquer le style. Il m'a donc suffit de transformer mon style de la manière suivante:

.monTable > tbody > tr > td > img { border: 1px solid #000; }

pour qu'il ne s'applique que sur les images directement placées à l'intérieur d'une cellule <td> et non sur des images situées plus profondément dans la structure HTML du document.

Bien joué CSS!

Voir les commentaires

Rédigé par Bliz

Publié dans #CSS

Repost 0