Une archive de liens utiles pour webmaster, avant tout pour moi, mais autant en faire profiter les autres.
12 nov
Que de galères encore et toujours avec Internet Explorer 6 !!!
Le Z-index, encore une chose qui ne s’applique pas comme on le désire.
Vous avez surement retourné votre code HTML et CSS dans tous les sens et pourtant le problème persiste, votre menu passe en dessous d’un autre bloc !!!
Appliquez simplement une position:relative, en plus du z-index, au bloc parent qui pose problème et ça marchera.
Exemple :
#parent {
position:relative;
z-index:100;
}
23 oct
J’en ai passé du temps à chercher la raison de ce mystérieux espace entre deux lignes d’un tableau, lorsqu’une des cellules comporte une image.
Ce problème venait uniquement sous Firefox et uniquement avec un Doctype en XHTML Strict. Pas de problème sous Internet Explorer et même chose avec un autre Doctype même en XHTML Transitional.
Sans solution à mon problème et persuadé que je ne suis pas le seul à l’avoir rencontré, j’ai lancé une recherche sur Google.
La solution est la suivante : rajouté un display:block sur les images.
Pourquoi : parcequ’en XHTML Strict la valeur de base d’une image pour un « display » est « inline ». De ce faite, l’image se comporte comme du texte et affiche d’office « l’espace descendant »
utilisé pour le jambage des lettres tel que « j » « p » « q » etc… Rajouté un display:block supprime se jambage et de ce fait l’espace qu’il occupait.
Mais voici une explication bien détaillée sur le problème : Images, tableaux et décalages mystérieux – MDC.
6 oct
Voici un article de Smashing Magazine (en anglais) très intéressant sur les bases des CSS : padding vs margin, float, positionnement, etc…
Un récapitulatif, voir une découverte dans certains cas, bien pratique. Je vous invite à le lire il vous permettra de bien aborder vos feuilles de style.
18 sept
Doctype est un site Questions/Réponses dédié au HTML, CSS et Webdesign.
Vous y posez vos questions (accessible à tous même en invité) et vous attendez ensuite les réponses. Une question peu avoir du coup plusieurs réponses et donc plusieurs solutions.
Cela fait de ce site une bible des astuces HTML, CSS et Webdesign.
Les Questions/Réponses sont triées par nombre de votes, nombre de réponses, popularité…
Il est temps d’y faire un tour : Web design Q&A – Doctype.
Bon le site est en anglais, mais tous le monde le parle :p
16 sept
En dehors du fait que vos feuilles de styles soient nickel, il arrive à force de modifications sur vos pages, d’avoir des styles inutiles.
Vérifier à la main demanderait un travail énorme, alors que CSS Redundancy Checker le fera pour vous.
- Indiquez le lien de votre fichier css
- Puis le ou les pages que vous désirez vérifier et validez…
Attendez patiement le résultat et faite ensuite le ménage dans vos CSS.
Attention cependant à bien indiquer toutes les pages utilisant la css, avant de faire toutes les modifications proposées. Il serait dommage de supprimer un style qui s’applique à une page que vous avez oublié.
23 juin
Voici une alternative à la mise en page en tableau des formulaires.
Formulaire CSS avec dl, dt et dd par WANJEE
8 juin
Voici une syntaxe bien pratique, pour appliquer un style de votre CSS à un input sans pour autant lui passer une classe :
.cssform input[type="text"]
width:180px;
}
Comme vous le remarquez dans ce code, il faut simplement appliquer un filtre type au input. Dans le cas ci dessous, le style sera uniquement visible sur les input contenu dans la classe cssform et de type text (à savoir <input type="text" />).
23 avr
En attendant la mise en place, probablement dans CSS 3, et la gestion de cette fonction par les navigateurs, voici une selection de 25 techniques différentes pour obtenir des coins arrondis. Certaines sans javascript, sans images… A vous de choisir.
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
15 avr
Il existe bon nombre de technique pour créer un menu à onglets en CSS. Voici celle que j’ai retenue pour le moment, elle répond à toutes mes attentes :
* la taille des onglets doit s’ajuster à la taille d’affichage du texte;
* l’ordre entre les éléments du menu doit rester le même lorsque la feuille de style est désactivée;
* l’onglet correspondant à la page en cours ne doit pas être cliquable;
* la couleur d’un onglet doit changer au survol de la souris ou à la réception du focus au clavier;
* le fonctionnement du menu ne doit pas dépendre de JavaScript;
* les fichiers HTML et CSS doivent être valides;
* le menu doit au minimum fonctionner avec Internet Explorer 6 et 7, Firefox 2 et Opera 9;
* aucune astuce (hack) CSS ne doit être utilisée.
Merci à Normand Lamoureux pour sa technique et sont tutorial bien expliqué : http://normandlamoureux.com/cours/css/index.html
15 avr
Benjamin D. C. nous livre un article très intéressant sur la propriété display en CSS 2.1
Il nous démontre comment l’utiliser pour appliquer les avantages des cellules de tableaux à nos balise Div, P etc…
Un article à lire impérativement http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html
Commentaires récents