Un tutoreil plus simple sera disponible dans le courant de la semaine. Si vous n'êtes pas très à l'aise avec le CSS, je vous déconseille de suivre ce tuto. Voici le tuto de niveau avancé pour faire un thème sur EklaBlog de A à Z. Le but de ce tutoriel...
Il existe deux type de balise en HTML : les balises en paire, et les balises orphelines. Les balises en paire sont les plus répandues, et s'écrivent de la façon suivante :
* { line-height : 17px ; } * a { color : #000 ; text-decoration : none ; opacity : 1 ; -webkit-transition : 500ms ; -moz-transition : 500ms ; -o-transition : 500ms ; transition : 500ms ; } * a : hover { opacity : 0.8 ; } * img { max-width : 98% ; margin...
Qu'est-ce que le HTML ? HTML veut dire HyperText Markup Language, c'est le language utilisé pour organiser les pages web. Il s'agit d'un language de description de données, et non de programmation, ce qui veut dire qu'une page HTML est statique, elle...
Une balise seule n'a généralement que peu d'utilité. C'est pourquoi on leur ajoute souvent un ou plusieurs attributs.
/*Page*/ #body { font-size: 13px; font-family :arial; background: url(https://ekladata.com/K-PGqRYeLRsOZkR4Mm19lFFDs4o.png); } #background { background : url(https://ekladata.com/gyqFckvAaUU6uWcoj-zu4pBMVj0.png); width: 760px; margin: auto; border: 2px...
Ce tutoriel passe en revu les différents éléments de la barre d'outil EklaBlog (la petite barre blanche au dessus du blog). Comme le sujet un petit peu "touffu", des codes tout prêts sont disponible à la fin de l'article. • Accéder aux codes Structure...
/*DESIGN BY NAGALIA*/ #body { background: black; font-family: verdana; font-size: 13px; font-weight: 0 } img { max-width: 100%;} a { color: #916a5b; text-decoration: none; text-shadow: 1px 1px 1px black; } a:hover { text-shadow: 0px 0px 1px rgba(197,141,69,0.2);...
Photoshop est un logiciel de retouche et de traitement d'image édité par Adobe. Il est disponible gratuitement en version d'essaie, mais du fait qu'il soit l'un des logiciel les plus piraté, il est facile d'en trouver une version pirate... Proposant beaucoup...
Les flexbox vous permettent, si votre html est structuré correctement, de créer des grilles responsive (qui s'adapte à la taille de l'écran de l'utilisateur) très rapidement. Pour commencer, la structure de votre HTML doit être la suivante :
Code pour afficher le formulaire des commentaires de cette façon #ulmodules form { display: flex; flex-wrap: wrap; font-size: 0px; color: transparent; width: 500px; /*largeur du formulaire*/ margin: 0 auto;} #ulmodules form input,#ulmodules form select,#ulmodules...
#email-verification-warning {height: 0px; padding: 0px; margin: 0px; font-size: 0px; opacity: 0; } #help_bubble{ background: rgb(240,240,240); border: none; border-radius: 2px; border-top: rgb(250,250,250); box-shadow: 0 0 1px rgba(0,0,0,0.4); } #help_bubble...
Les Marges Voilà un truc trèèèès pratique: Les marges Il y a deux types de marges, les marges interieurs et les marges exterieurs. On va commencer avec les marges exterieur. La propriété est "margin" sélecteur { margin: Xpx;} Encore des pixel XD. Bon,...
Propriété de Texte Je vous rappelle de que le sélecteur du texte est "p" et celui des liens "a". Mais si vous vous voulez par exemple changer modifier les textes du menu à gauche, utilisé le sélecteur "#menu1" avec les propriété suivantes Changer la couleur...
Horloge
Créer une classe Sisi, c'est possible ;) Un exemple? Blaaaaaablaaaaaablaaa J'ai créé une "boite" dans mon article. L'apparence est géré grâce au css, et je l'insert dans une page avec la balise div en html C'est cool non? Je vous prévient quand même,...
/!\ Le javascript doit être activé pour pouvoir faire ça! Un spoiler, qu'est ce que c'est? Cliquez sur le bouton en dessous: Cliquez sur le bouton => Et magique!! Du texte apparaît!!! Bon, on peu mettre ce qu'on veut dedans (image, tableau....) Voilààà....
/!\ Ne fonctionne qu'avec les dernière version de Google Chrome, Mozilla Firefox et Safari (autre navigateur non testé) et ne marche absolument pas avec Internet Explorer /!\ Ce code n'est pas à la porté des débutant en css. Il faut savoir maitriser les...
Sur EklaBlog, nous n'avons pas accès au code source de la page, il est donc un petit peu compliqué d'ajouter des éléments dans le header ou en dehors de la page par exemple. Voici donc une petite astuce pour remédier à ce problème. Créer votre nouvel...
Et revoici le tuto pour faire des onglets coulissants (comme sur le côté gauche du blog) en plus développé, mais plus simple à coder ;) /!\ Compatible seulement avec les dernière version de Chrome, Safari et Firefox. Ne fonctionne pas avec IE. Autre navigateur...
Après une demande, voilà un tuto pour faire une signature en css et html à mettre sur les forum. /! Vérifiez que le forum accepte que les membres utilisent le html. C'est joli, certes, mais comment on fait ça? Pour les EklaBloger, nous avons la chance...
Ce tutoriel vous apprend à mettre des petits liens sur le côté de la page qui renvoient en haut ou en bas. - Commencez par créer les images qui vous servirons de liens (je vous conseille de faire deux flèches, c'est assez compréhensible pour les visiteurs)...
Voici un code HTML tout simple pour faire défiler des éléments (texte, images...) de façon automatique : Par exemple comme ça. Une fois arrivé au bout de la ligne, le défilement recommence CODE : ...
