background preloader

Creative Juiz, Plugins jQuery

Creative Juiz, Plugins jQuery
Related:  WebDesignRapide

display: inline-block et les espaces indésirables La valeur inline-block de la propriété display est à la mode, même si elle demeure encore trop peu connue et mal utilisée. Elle offre de multiples avantages dont le principal est de pouvoir disposer des éléments les uns à côté des autres, tout en étant dimensionnés et sans les retirer du flux. L'un de ses inconvénients majeurs est l'apparition d'un espace indésirable et incompressible de prime abord entre les blocs. Le cas «white-space» Comme tous les éléments de type inline ou de contenu textuel, les objets munis de la déclaration display: inline-block respectent la règle des caractères blancs (whitespace), c’est-à-dire que n’importe quel caractère HTML espaçant deux éléments va immanquablement apparaître entre leurs deux boîtes. L’espace créé par le white-space est d'environ 4 pixels, mais ne vous y méprenez pas : cela varie selon les navigateurs et la taille de police. Dans la grande majorité des cas, cette situation n’est guère gênante. Démonstration Variante : commentaires HTML

CSS Tutorial Display inline-block, une valeur trop peu utilisée Floatera, floatera pas… mais pourquoi ne pas utiliser la valeur inline-block de la propriété display en CSS ? Vous connaissez certainement les valeurs block ou inline, mais moins celle de inline-block et pourtant elle peut vous servir dans bien des cas. Voyons dans quelles conditions nous pouvons l'utiliser (de manière non exhaustive) dans un premier temps, puis dans un second temps quelques difficultés dans son utilisation. Cette astuce a été publiée initialement sur le blog personnel de l'auteur, creativejuiz.fr à la date du Jeudi 17 mars 2011. Utiliser display: inline-block Par défaut les éléments input ont comme valeur de display celle de inline-block. Le formulaire Quelle transition ! Je vous propose cette forme de mise en page pour formulaire. Notre code CSS va donc nous permettre d'avoir un comportement homogène. La CSS : Aperçu du formulaire Une navigation horizontale (éléments de liste) Le code HTML : Le code CSS : Remarque : la valeur inline sur le li est suffisante dans mon exemple.

Meta viewport "width=device-width" sur iPad Bonjour, Voici ma situation : je viens créer une page dont la largeur par défaut est de 1060px, mais qui doit passer à une largeur de 100% sur les écrans de téléphone. Pour cela, j'ai ajouté à ma page la meta viewport suivante : Voici mon code html simplifié : <body><div class="content"><div class="inner clearfix"> Mon contenu </div></div></body> Et voici mon css simplifié : Et voici donc mon problème : en faisant ça, tout fonctionne très bien sur iPhone, mais ça ne fonctionne plus sur iPad : la largeur du site est alors bloquée à 768px (le reste de la largeur de ma page n'apparaît pas), la page ne s'adapte pas à l'écran de l'iPad. Avez-vous une solution qui me permettrait d'avoir un site adaptée au mobile sur les écrans de téléphone tout en ayant un site "classique" sur iPad (mais adapté à la taille de l'écran) ? Merci d'avance !

Ajouter une image aux catégories wordpress sans plugin | Wordpress spirit Dans le fichier functions.php : [php] <ul id= »category-bloc »><?php $argsCat = array( ‘type’ => ‘post’, //’child_of’ => 0, //’parent’ => , ‘orderby’ => ‘name’, ‘order’ => ‘ASC’, ‘hide_empty’ => 0, ‘hierarchical’ => 1, // ‘exclude’ => , // ‘include’ => , //’number’ => , ‘taxonomy’ => ‘category’, ‘pad_counts’ => false ); $categories = get_categories( $argsCat ); foreach ($categories as $category) { //datas avalaible /* $category->term_id $category->name $category->slug $category->term_group $category->term_taxonomy_id $category->taxonomy $category->description $category->parent $category->count $category->cat_ID $category->category_count $category->category_description $category->cat_name $category->category_nicename $category->category_parent */ ?><li><?php $catID = $category->term_id; // Get the URL of this category $category_link = get_category_link( $catID ); ?><h2><a href= »<? Dans la page des catégories (category.php): [php] <img src= »<?

Prefix free: Break free from CSS vendor prefix hell! -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile. If it doesn’t work in any of those, it’s a bug so please report it. In older browsers like IE8, nothing will break, just properties won’t get prefixed. Test the prefixing that -prefix-free would do for this browser, by writing some CSS below: Properties/values etc that already have a prefix won’t be altered. It’s not ideal, but it’s a solution, until a more intuitive way to deal with these cases is added in -prefix-free. Please note that in unsupported browsers like IE8, no such class will be added. You can exclude a file from being prefixed by adding the data-noprefix attribute to the <link> or <style> element. Firefox (and IE?) Get the jQuery plugin now:

Codes d'erreur HTTP (404, etc) La liste de toutes les questions est disponible en 1 clic, classées par ordre initial ou par nombre de hits. Où puis-je trouver la signification des codes d'erreur HTTP (404, etc) ? Thème : Autre... Voici une liste des codes HTTP (codes d'erreur)... En français : La même liste en anglais : Chercher dans la FAQ A propos de l'auteur : Olivier Duffez Consultant en référencement, Olivier Duffez a travaillé pour les plus grands sites (Doctissimo, FNAC, RueDuCommerce...). Hébergement web Hébergement web mutualisé et dédié Pour un bon référencement, il faut un bon hébergeur. A partir de 3€ HT/mois. A la une sur WebRankInfo Formation au référencement Découvrez le programme de formation au référencement le plus complet : méthodologie d'optimisation du référencement Google, Panda, Penguin, netlinking, référencement éditorial, Google Analytics, taux de transformation, ROI, réseaux sociaux et SEO, etc. Ce cycle de formation peut être pris en compte par votre budget formation... profitez-en !

Balises HTML DE BASE Pour comprendre le fonctionnement du langage CSS, il est nécessaire d'avoir quelques notions en HTML. Le HTML est un langage simple, fait de balises (du genre <tag>) qui ont toutes une fonction et un sens. C'est ce qu'on appelle la sémantique. Respecter la sémantique, c'est améliorer l'accessibilité... et aussi le référencement. Cela dit, on ne perdra jamais de vue que l'humain passe avant les robots ! On fait un site pour des utilisateurs, pas pour le plaisir de se retrouver en tête de requêtes sur google. Voici donc les quelques balises HTML fondamentales à connaître pour comprendre la structure d'une feuille de style. Sommaire Balises les plus courantes Document <html></html> : document HTML <body></body> : corps du document Titres <h1></h1> : titre 1er niveau <h2></h2> : titre 2ème niveau <h3></h3> : titre 3ème niveau (... et ainsi de suite jusqu'à 6) Éléments de texte <p></p> : paragraphe <ul></ul> : liste à puce <ol></ol> : liste numérotée <li></li> : élement d'une liste <a href=""></a> : lien hypertexte

Tutoriel complet sur les redirections (301, 302, JavaScript, …) Par Olivier Duffez, Jeudi 19 janvier 2012 Il arrive fréquemment que, sur un site web, des pages web disparaissent ou changent d'adresse. Lorsque cela arrive, il est nécessaire d'en aviser les moteurs afin de leur indiquer la marche à suivre et notamment leur soumettre la nouvelle adresse d'une page déjà référencée (et parfois bien positionnée). Sommaire : Note : Cet article complète mon article d'initiation aux différents types de redirections. Tuto redirection d'URL pour le référencement (SEO) Introduction Il est bien rare que l'on habite au même endroit pendant toute sa vie : régulièrement, on est amené à déménager. Il en est exactement de même sur le web : il est bien rare qu'une page web ne change jamais d'adresse (URL). Les standards du web ont bien entendu prévu ce cas de figure et mettent à disposition des webmasters un dispositif tout à fait similaire à celui fourni par la Poste : les redirections. Utilité d'une bonne redirection Les différents types de redirection Redirection PHP

Related: