CSS

Ils sont beaux mes crayons !

18 décembre 2009

Depuis le commit 33812 on peut facilement surcharger le styles des boutons du plugin crayons. Cela permet à l’aide des CSS3 de faire des trucs sympas comme dans l’image qui suit.
Voici le code qui permet de styler les boutons : .crayon-html .crayon-boutons width : auto ; padding : 10px 5px 0 0 ; bottom : 10px ;
.crayon-html .crayon-boutons button width : auto ; height : 32px ; text-indent : 0 ; cursor : pointer ;
background : #f2f2f2 ; color : #666 ; border : 4px solid #fff ;
border-radius : (...)

0 commentaire

Faire varier la couleur de fond d’une liste d’éléments dans SPIP

22 juin 2008

Lors du dernier SPIP Apéro brestois Hélène nous posait la question suivante :
Comment faire pour afficher une liste d’articles ou de brèves avec une couleur de fond différente pour chaque élément ?
Les styles
Afin de pouvoir contrôler l’apparence de notre liste d’élément on va d’abord définir dans notre feuille de style une palette de couleur à utiliser pour l’arrière plan.
.couleur0 background : #899d25 ; .couleur1 background : #800f25 ; .couleur2 background : #c3ff68 ; .couleur3 background : (...)

2 commentaires

hasLayout : bug d’affichage des listes avec IE

26 septembre 2007

Cet article décrit un bug d’affichage des listes dans Interet Explorer 6 quand les éléments de la liste contiennent un lien de type block.
Description du bug
Prenons pour exemple le code HTML d’un menu sous forme de liste comme celui-ci :
Lien 1 Lien 2 Lien 3 Lien 4
Appliquons les styles suivants au menu :
ul margin : 0 ; padding : 0 ; list-style : none ; li margin : 0 ; padding : 0 ; li a display : block ; padding : 0.5em ; background : #ddd ;
Ce code fait que sur (...)

3 commentaires

CSS : Appliquer plusieurs classes à un élément

23 mai 2007

Vous saviez déjà (mais si) qu’il est possible d’appliquer plusieurs classes à un élément comme ceci : <a href="#URL_RUBRIQUE" class="hac on selected">
Mais comment appliquer un style aux éléments qui ont deux classes (ou plus) ? Tout simplement comme ceci : a.hac...
a.on...
a.hac.on... La première règle cible les ancres qui répondent à la classe hac. La deuxième règle cible les ancres qui répondent à la classe on. Et la dernière règle cible les éléments qui répondent à la (...)

5 commentaires

CSS : appliquer :hover à des blocs

28 janvier 2007

Lu sur Smiley Cat un article décrivant une méthode pour appliquer des effets de roll over à des blocs (état :hover).
How to Create a Block Hover Effect for a List of Links
Pourquoi cet article ? Tout simplement parce qu’avec IE on ne peut appliquer un état :hover qu’à un lien (lire l’article sur Openweb).
La technique employée dans l’article de Smiley Cat résout le problème en encadrant le contenu de chaque <li> par des <a>. C’est un peu "bourrin" comme technique mais ça fonctionne. Cette (...)

0 commentaire

Réglages par défaut CSS

25 janvier 2007

Lu sur Ask the CSS Guy un article sur les valeurs par défaut que l’on peut appliquer à une feuille de style au début d’un projet.
The Style Declarations I Make Almost Everytime I start a new site
En résumé ça donne ça :
body padding:0 ; body background :#fff ; /* ou la couleur de votre choix */ form padding:0 ;margin:0 ; ul margin:0 ;padding:0 ; a img border:0 ; /* celle ci j’approuve à 100% */
Je crois avoir déjà lu un autre article là dessus mais je n’ai plus le lien en stock, si je retrouve ça je (...)

0 commentaire

CSS : Icone suivant le type de fichier lié

24 janvier 2007

Lu via Css Globe un article expliquant comment mettre en place un système qui permet d’identifier un lien suivant son icône. Concrètement, si un lien pointe sur un fichier pdf on affiche l’icône des fichiers pdf après le lien.
Iconize Textlinks with CSS
Une archive contenant le fichier css à lier à ses pages ainsi que les icônes nécessaires est disponible. Et en plus ce n’est pas lourd (3.87ko pour le css). Le script a été testé sur Firefox (Mac & PC), Camino, Safari, Opera (Mac & PC) & (...)

0 commentaire

Microsoft Expression Web VS Aptana

5 décembre 2006

Ce matin en lisant quelques news du web, je suis tombé sur un article présentant la prochaine suite de développement web de µcrosoft. Dans cette suite on peut trouver le successeur de FrontPage qui s’appelle Expression Web dispo pour 299$. Voici un aperçu de l’interface d’Expression Web.
Et voici un aperçu d’Aptana, logiciel libre dispo sous windows, linux et mac...
Cela fait un mois ou deux que j’ai découvert ce soft et ça m’a l’air très prometteur. Il gère l’auto-completion, la documentation (...)

1 commentaire

Tester son site sur différents navigateurs

28 novembre 2006

Deux liens utiles pour tester son site sur plusieurs navigateurs afin d’être certain du rendu de ses pages web.
Browsershots.org qui permet de tester sur cette liste de navigateurs :
Linux : Dillo 0.8, Epiphany 2.16, Firefox 1.5, Firefox 2.0, Galeon 2.0, Konqueror 3.5, Mozilla 1.7, Opera 9.0
Windows : MSIE 7.0
Mac : Safari 2.0
Et Opera Mini Simulator pour tester son site sur un navigateur de (...)

0 commentaire

CSS : conseils pour mieux gérer ses feuilles de style

26 novembre 2006

Deux articles intéressants sur la conception et l’organisation des CSS. Le premier sur pompage.net et le deuxième sur pouipouidesign :
Architecture des CSS
Des CSS plus efficaces grâce aux raccourcis

1 commentaire