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 (…)
Accueil > Mots-clés > tags > CSS
CSS
Articles
-
CSS : Appliquer plusieurs classes à un élément
23 mai 2007, par b_b -
hasLayout : bug d’affichage des listes avec IE
26 septembre 2007, par b_bCet 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 (…) -
Microsoft Expression Web VS Aptana
5 décembre 2006, par b_bCe 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 (…) -
CSS : Icone suivant le type de fichier lié
24 janvier 2007, par b_bLu 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 (…) -
Tester son site sur différents navigateurs
28 novembre 2006, par b_bDeux 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 portable. -
Réglages par défaut CSS
25 janvier 2007, par b_bLu 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 (…) -
A faire et ne PAS faire
19 novembre 2006, par b_bBon j’avais quelques liens en stock, donc les voici.
Deux articles intéressants sur la conception de pages web en général :
37 étapes pour bien coder en HTML
Comment ruiner son site web : il y a quelques perles dans ce billet.
Un bon article de l’excellent site Alsacreations sur la gestion des tailles de texte en "em". Cela me fait penser qu’il est vraiment temps que je me mette aux "em". -
CSS : appliquer :hover à des blocs
28 janvier 2007, par b_bLu 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 (…) -
CSS : conseils pour mieux gérer ses feuilles de style
26 novembre 2006, par b_bDeux 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 -
Faire varier la couleur de fond d’une liste d’éléments dans SPIP
22 juin 2008, par b_bLors 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 ; (…)