background preloader

Image de fond en CSS (background-image) dans une page html - CSS Debutant

Image de fond en CSS (background-image) dans une page html - CSS Debutant
Mettre une image de fond dans une page html est un exercice très répandu. Et il est loin et révolu le temps où on utilisait le code du type : <body background="images/image_de_fond.png"> si peu adaptable aux besoins. Avec les feuilles de style on peut obtenir beaucoup plus, surtout depuis l'arrivée des CSS3 qui permettent de mettre plusieurs images de fond d'un seul coup. Fonctionne avec : Tous les navigateurs graphiques Attributs utilisés : background-image background-repeat background-position Petits avertissements préliminaires : L'image de fond d'une page html doit être légère. Pour illustrer tout cela, visionnez ce mauvais exemple : la photo fait 330 ko ; la couleur utilisée, pour la police de caractère et le fond, est blanche. Code CSS de base L'image de fond se déclare en général pour la balise body (corps de page), mais on peut aussi l'appliquer à un bloc (<div></div>), ou un titre (<hx></hx>), une citation (<blockquote></blockquote>), etc. Visionner l'exemple Fond de page fixe ou : Astuce

Formation Développeur WEB en 3 mois | 400 heures de cours, 10% de théorie pou... CSS3 Background Images 100% width/height 28th July 2010 A Box with known width and height A Box with known width and height Caramels caramel tiramisu. A Box with known width and unknown height A Box with known width and unknown height Sugar plum sesame snaps cotton candy chupa chups jelly lemon drops. Liquorice tiramisu tootsie roll apple pie pudding bear claw. A Box with unknown width and unknown height A Box with unknown width and unknown height Sugar plum sesame snaps cotton candy chupa chups jelly lemon drops.Gingerbread tiramisu gummies. stu nicholls - CSS play Information Having recently ploughed through hundreds of pages on the web looking for information on how to style a background image to be 100% the size of the container using CSS3 and found most did not have the correct information, I thought that I would clarify things here and show how this is actually styled. All three of the above boxes use the same styling for the background image and is as follows: Copyright

CSS Sprites: What They Are, Why They're Cool, and How To Use Them By Chris Coyier On This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015. #What are CSS Sprites? Spoiler alert: they aren't fairies that write your stylesheets for you. I wish. To summarize: the term "sprites" comes from a technique in computer graphics, most often used in video games. CSS Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it. #Why use CSS Sprites? It may seem counterintuitive to cram smaller images into a larger image. Let's look at some numbers on an actual example: That adds up to a total of 14.38KB to load the three images. While the total image size (sometimes) goes up with sprites, several images are loaded with a single HTTP request. Thus, sprites are important for the same reasons that minifying and concatinating CSS and JavaScript are important. $ sprity . #SVGs

Sublime Text: The text editor you'll fall in love with Manuel PHP Edit Report a Bug Manuel PHP ¶ par: Mehdi Achour Friedhelm Betz Antony Dovgal Nuno Lopes Hannes Magnusson Georg Richter Damien Seguy Jakub Vrana Et bien d'autres Édité par: Peter Cowburn par: Frédéric Blanc Traducteur Vincent Blanchon Traducteur Pierrick Charron Traducteur Julien Pauli Traducteur Mickaël Perraud Relecteur Guillaume Plessis Traducteur Yannick Torrès Traducteur Vincent Briet Jean-Sébastien Goupil David Manusset © 1997-2019 PHP Documentation Group add a note User Contributed Notes There are no user contributed notes for this page.

Des stations de métro fantômes sous Paris Cela se passe généralement lors des Journées du patrimoine. A l'heure où les métros parisiens font leur dernier trajet, une rame pleine de voyageurs décolle d'un quai caché dans les profondeurs de la station Porte des Lilas. Toute la nuit, elle sillonnera en tout sens le réseau de la RATP, en passant par les voies régulières et les tunnels de service. Objectif: découvrir et visiter des stations abandonnées. Porte des Lilas Cette opération est organisée par une association de passionnés de matériel ferroviaire, l'Ademas, Association D’exploitation du Matériel Sprague. La station Porte des Lilas n'est pas abandonnée. Haxo Non loin, une autre curiosité attend le convoi de l'Ademas. Martin-Nadaud La station Martin Nadaud de la ligne 3 est bien accessible mais n'existe plus vraiment. Porte Molitor La station Porte Molitor n'a, elle aussi, jamais servi. Croix-Rouge Sur la ligne 10, justement, l'ancien terminus Croix-Rouge est fermé au public. Saint-Martin Plus au nord, c'est Saint-Martin. Arsenal

Sélecteurs CSS class et id A quoi servent les sélecteurs CSS class et id ? Tout simplement à définir des styles particuliers que l'on voudra reproduire de façon ponctuelle ou récurrente dans les pages HTML.Une fois que la la feuille de style de base n'a plus de secrets, il est temps de passer à la vitesse supérieure. Les sélecteurs class et id sont incontournables et indispensables. Voyons leurs similitudes et leurs différences par deux exemples. Fonctionne avec : Tous les navigateurs Propriétés utilisés : background-color float width margin text-align Le sélecteur class Premier exemple : les pages web sont souvent ponctuées d'ancres permettant de remonter en haut de page, et celles-ci sont souvent placées à droite de la page. Code CSS Code (X)HTML Pour appeler ce style dans la page html, on indique simplement class="haut" à l'intérieur de la balise voulue. <p class="haut"><a href="#haut">Haut de page</a></p> Et voilà, et cette mise en forme peut-être répétée autant de fois que besoin dans la page. Sélecteur id Haut

Css opacity - définition opacity css (feuille de style css) et compatiblité navigateurs | ZONE CSS opacity et sa relation avec les balises Pour faire le même effet de transparence sous Internet Explorer < 9 vous devez utiliser la propriété de feuille de style css filter qui est propre à Internet Explorer.Voici le code : Exemple de code : Le résultat du code : opacity opacity opacity opacity opacity opacity opacity opacity opacity opacity Le résultat en image : La valeur opacity de la propriété de feuille de style css filter accepte comme valeur :- nombre : compris entre 0 et 100, 0 étant totalement transparent et 100 totalement opaque. A priori le top serait cela : Cependant après plusieurs tests, il semble que pour Internet Explorer, la css '-ms-filter' et 'filter: progid:' ne sont pas obligatoires car Internet Explorer 7,8,9 (pas vérifié sur le 10) comprennent filter : alpha Le générateur de code CSS pour la propriété opacity.

Dimensionner ses fontes avec rem Par Jonathan Snook Déterminer quelle unité de mesure choisir pour la taille de notre texte peut mener à un débat houleux, même de nos jours. Malheureusement, il existe toujours des avantages et inconvénients qui rendent ces différentes techniques peu désirables. La question est alors de savoir quelle solution est la « moins pire ». Les deux techniques suivantes sont le plus souvent utilisées : taille en px ; taille en em. Analysons ces deux approches avant que je ne révèle mon troisième atout. Dimensionnement avec px Au tout début du Web, nous utilisions les pixels pour dimensionner notre texte. Pour ma part, je suis du côté de ceux qui pensent que les mises en page en pixels apportent la cohérence nécessaire, et que les utilisateurs possèdent suffisamment d’outils dédiés à l’affichage pour arrêter de penser que l’accessibilité est si préoccupante. Dimensionnement avec em L’impossibilité totale de redimensionner le texte avec IE est une frustration permanente. Dimensionnement avec rem

EasyPHP | Install a local WAMP server : PHP 5 VC9, Apache 2 VC9, MySQL 5, PhpMyAdmin, Xdebug and Modules on Windows XP/Vista/Seven The PHP framework for web artisans. Where To Start Learning a new framework can be daunting, but it's also exciting. To smooth your transition, we've attempted to create very clear, concise documentation for Laravel. Here are some recommendations for what to read first: After reading through these documents, you should have a good grasp on basic request / response handling in Laravel. Next, you may wish to read about configuring your database, the fluent query builder, and the Eloquent ORM. Laravel Philosophy Laravel is a web application framework with expressive, elegant syntax. Laravel aims to make the development process a pleasing one for the developer without sacrificing application functionality. Laravel is accessible, yet powerful, providing powerful tools needed for large, robust applications.

Tuto Geek » Tutoriaux » [CSS] Les bases 1) Introduction Bonjour Le langage CSS, Cascade Style Sheet, traduit littéralement Feuille de Style en Cascade sert à la mise en forme. Il est en effet très utile pour séparer mise en forme et contenu du XHTML. 2) Utilisation du CSS Pour pouvoir l'utiliser, vous devez créer une balise <div> ou <span> avec un attribut class ou id. 1. Il faut savoir qu'il y a des différences entre class et id : - Un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page - Une classe peut désigner plusieurs objets identiques. Par exemple, il peut avoir 1. 2. Mais il n'est pas correct 1. 2. De même entre <span> et <div> : - Un <div> s'applique à un élément bloc, qui contribue à la mise en page du document. - Un <span> s'applique à un élément en-ligne, qui enrichie du texte. Il est préférable de créer une feuille de style à part en .css pour plus de lisibilité. 1. Vous pouvez spécifier le type de media comme screen, print,... 1. 2. 3. 1. Et ceci dans votre feuille de style CSS: 1. 1. 1.h1

GrizzlyDev - Migration de CMS Migration de CMS Pour une entreprise qui doit gérer des milliers de pages en ligne, la question aujourd’hui est de rester dans le coup, non pas d’un point de vue marketing, mais dans la structure technique du site de l’entreprise. Le développement des CMS a permis aux responsables de la communication de reprendre la main sur la très nécessaire actualisation continue des informations de l’entreprise en ligne. Mais nous arrivons à présent à un nouvel âge de l’Internet professionnel où les CMS plébiscités d’il y a seulement 4 ou 5 ans sont aujourd’hui dépassés ou abandonnés et où il devient nécessaire de migrer les sites d’une solution à une autre, de la manière la plus efficace, la plus rapide et la moins couteuse possible, que ce soit en temps, en argent ou en énergie, et malgré le poids croissant des données. Pour illustrer la délicatesse d’un changement de CMS pour un site professionnel, GrizzlyDev vous propose de suivre deux cas d’écoles. Migration sans casse du site Enviscope.com 1. 2.

Related: