Vous consultez les articles de la catégorie HTML / CSS
Fév
16

Des slides qui ont de la gueule, avec impress.js !

Comme je vous l’avais dit lorsque je vous ai présenté nos vœux 2012, j’ai découvert récemment un outil qui va vous permettre d’en mettre plein la vue à votre auditoire lors de votre prochaine présentation.

Bye bye le vieux Powerpoint des familles, et place aux technos modernes : HTML5, CSS3 et JavaScript. Lire la suite

Juin
17

Iconize : Ajouter des icones à vos liens selon leur extension

Iconize

Et non, nous ne sommes pas mort ! Après quelques semaines d’inactivité sur le blog, voici enfin un nouvel article.

Ce que je  vous présente aujourd’hui n’est pas tout récent, mais je me suis aperçu aujourd’hui que mes collègues ne connaissaient pas alors, je me suis dis qu’ils ne devaient pas être les seuls !

Il s’agit d’un petit fichier css et son lot d’images servant à mettre automatiquement une petite icône à vos liens selon l’extension.

Lire la suite

Jan
6

HTML Ipsum, extrait de code HTML

Vous devez tous connaitre le lorem ipsum, ce fameux faux texte latin qui permet de remplir temporairement votre site afin de mettre en page votre site avec du contenu.

Il existe différents sites permettant de générer ce faux texte, le plus connu étant http://fr.lipsum.com/, qui vous permet de générer un nombre voulu de paragraphe, mots, caractères ou listes. Il existe aussi un plugin firefox

Cependant ce n’est pas de ce site ou plugin dont je vais vous parler aujourd’hui mais d’un site que l’on m’a fait découvrir aujourd’hui, il s’agit de HTML Ipsum. Ce site vous propose tout simplement des extraits de code HTML avec du faux contenu.

Vous pouvez récupérer le code HTML  :

  • d’un paragraphe (plusieurs tailles disponibles)
  • d’une liste non ordonnée (plusieurs tailles disponibles)
  • d’une liste ordonée
  • d’un menu de navigation
  • d’un contenu utilisant différentes balises html (h1, h2,h3, p, strong, em, code, a, ol, ul, li, blockquote, pre)
  • d’un formulaire (avec différents champs)
  • d’un tableau vide

Utile quand on a besoin vite fait d’un contenu ou pour tester son CSS sur la plupart des balises utilisés régulièrement.

Déc
27

Pourquoi l’editeur CSS de Netbeans est-il le meilleur ?

Editeur CSS Netbeans

Après avoir utilisé pendant quelques années Zend Studio et essayer d’autres IDE comme Eclipse PHP avec des plugins pour le CSS et le JS, JEdit ou tout simplement Notepad++, j’ai récemment utilisé Netbeans, notamment pour son support de symfony.

Je découvre peu à peu cet IDE et il y a une chose que j’ai trouvé vraiment bonne par rapport à ce que j’avais pu essayer avant, c’est l’éditeur CSS.

Voici ci dessous, les petits plus, qui rendent cet éditeur CSS génial.

Lire la suite

Fév
26

IE6 et les PNG

Attention, avec IE6 il y a de fortes chances que si vous utilisez des background avec des images en PNG, vos liens ne soient pas actifs.

Pas de solutions pour l’instant à part remplacer par des jpg ou gif…

Fév
26

IE6 et Z-index la solution !

Ce bug concerne z-index qui permet de gérer l’empilement (profondeur) des éléments HTML sur une page.

On rencontre ce bug la plupart du temps en créant un menu déroulant,quant le menu se déroule sous le contenu.

Pour le résoudre il suffit d’associer les styles CSS : position:relative; et : z-index:1; à la balise parente.

Exemple :

<div id="barre">
 
<ul id="menu">
 
	<li><a href="http://">Lien1</a></li>
 
 
	<li><a href="http://">Lien2</a></li>
 
</ul>
</div>
 
 
#barre{
position: relative;
z-index:1;
}
 
#menu
{
z-index:12;
}
Jan
12

Plugin Zen coding pour Eclipse

Le plugin Zen coding permet d’utiliser des fonctions de complétion de code html/css dans Eclipse (mais aussi dans d’autres éditeurs).

Il faut d’abord installer le plugin EclipseMonkey pour Eclipse (url d’update : http://download.eclipse.org/technology/dash/update).

Ensuite, créer un nouveau projet zencoding (le nom n’est pas important) à la racine du workspace et créer un nouveau dossier scripts (au pluriel) à l’intérieur de ce nouveau projet.

Télécharger l’archive de zen coding pour Aptana/Eclipse et extraire les fichiers dans le dossier scripts.

Maintenant, l’installation du plugin est simplifiée. Dans Eclipse (ma version est Helios), rendez vous dans Help>Install new software. Cliquez sur le bouton Add en haut à droite et ajoutez l’URL d’update suivante : http://zen-coding.ru/eclipse/updates/ (ou http://media.chikuyonok.ru/eclipse/updates/ en cas de problème). Nommez ce nouveau site comme vous le voulez (Zen Coding, par exemple). Sélectionnez le site que vous venez d’ajouter, et dans Uncategorized, cochez Zen Coding for Eclipse.

Redémarrer Eclipse. Un nouveau menu intitulé Scripts Zen Coding (entre les menus Run et Window) doit apparaître dans le menu principal horizontal (File, Edit, …) d’Eclipse.

Test du bon fonctionnement du plugin :

Créer un nouveau fichier test.php. Y ajouter le texte suivant :

div#idDiv.uneClasse&gt;p#monParagraphe+div#idDiv2

Puis ALT+E CTRL+E. La ligne doit être remplacée par le code HTML suivant :

&lt;div id="idDiv"&gt;
 &lt;p id="monParagraphe"&gt;&lt;/p&gt;
 &lt;div id="idDiv2"&gt;&lt;/div&gt;
&lt;/div&gt;

Si rien ne se passe, ouvrir le fichier zencoding>scripts>Expand Abbreviation.js et modifier la ligne 5.

M3 représente la touche ALT (plus d’infos sur la représentation des touches du clavier ici). J’ai remplacé par M3+k, redémarré Eclipse, et le raccourci ALT+k fonctionne.

Il peut être nécessaire de faire la même chose pour les fichiers suivants :

– Format Selection With Showdown.js (par défaut : ALT+F)

– Next Edit Point.js (par défaut : ALT+])

– Output Image Size.js (par défaut : ALT+I)

– Previous Edit Point.js (par défaut : ALT+[)

– Wrap In Tag.js (par défaut : ALT+W)

Si vous souhaitez modifier (ou consulter) les combinaisons de touches par défaut utilisées par le plugin, allez dans le menu Window>Preferences>General>Keys d’Eclipse. Dans la zone de texte Filter text, saisissez zen. En principe, vous devez voir la liste des raccourcis du plugin.

IMPORTANT : si vous utilisez un clavier français, vous devrez au moins changer les combinaisons associées aux commandes Previous Edit Point et Next Edit Point, qui écrase les caractères crochet ouvrant [ et crochet fermant ].

Références :

Nov
16

Bug sur les margin auto dans IE

Vous avez peut etre rencontré le problème des marges automatiques qui fonctionnent sous firefox et non sous IE.

Alors OUI Internet Explorer prend en charge les marges automatiques, il faut juste veiller à ce qu’il n’y ait rien avant le doctype au niveau du HTML/CSS, et hop ca marche et c’est rare que ce soit aussi simple pour internet explorer.

Nov
5

Entités HTML

En HTML, les caractères spéciaux peuvent être encodés de façon à pouvoir être interprétés quel que soit l’encodage utilisé.

Référence : http://www.w3schools.com/tags/ref_symbols.asp

Sep
29

Site recensant une bonne partie des bug dans IE6

Fixe différents bugs comme la transparence, le CSS

http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

Edito

Bienvenue sur Mémorandom.

Mémorandom est le blog de 2 développeurs web, Appo et Nico.

Vous y trouverez des informations sur différents domaines touchant de près ou de loin au développement web

Tutoriels Yii Framework

Nos derniers articles

Blogs Dev

Liens

Étiquettes