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

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

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.

Créer des menus simples en CSS - Alsacreations Dans ce tutoriel, nous allons apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style. Sommaire Le code HTML Comme toujours, le choix des balises html doit être guidé par la nature du contenu qu'on souhaite y placer. Un point de vue largement répandu consiste à considérer le menu de navigation comme une liste de liens, et donc à utiliser la balise correspondant aux listes non ordonnées, <ul>. Par exemple, pour un menu comportant 5 items: <ul id="navigation"><li><a href="#" title="aller à la section 1">item1</a></li><li><a href="#" title="aller à la section 2">item2</a></li><li><a href="#" title="aller à la section 3">item3</a></li><li><a href="#" title="aller à la section 4">item4</a></li><li><a href="#" title="aller à la section 5">item5</a></li></ul> Remarquez l'identifiant placé sur la balise <ul>. Capture d'écran du résultat: On va donner une bordure, une couleur de fond et une couleur de texte aux éléments <li>:

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

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 Gérer les débordements de contenus grâce à CSS - Alsacreations Comment ça ? Vous pensiez être maître de votre design web et voilà que certains bouts de textes débordent par-ci par-là en cassant toute votre œuvre ? Quel manque de reconnaissance de vos rédacteurs ! Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants. Préambule J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs… overflow: hidden : circulez, y'a rien à voir ! La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc. Voici comment mettre en œuvre cette propriété : Le retour à la ligne forcé avec word-wrap : chérie, ça va couper ! Exemple (HTML) :

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.

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Apprendre le HTML : les bases des CSS Les CSS (Cascading Style Sheets) peuvent constituer le point de réference du formatage (couleurs et apparence du texte, des liens, et de certains éléments de la page html) de tout le site web. Si votre site comporte plus d'une centaine de pages HTML, il serait fastidieux de les modifier une à une, si vous décidez de changer la couleur de vos liens sur votre site ! Les CSS vous permettent une maintenance extrèmement simple... Les liens avec les CSS Par exemple, si vous désirez que tous les liens de votre site soient rouges, blancs lorsqu'ils sont survolés par la souris, et orange une fois cliqués, vous utiliserez ce code : Pourquoi "a:" ? Autre exemple, mais ici les liens survolés vont être en gras, soulignés, verts et en taille de 20pt : Le body et les CSS Intégrez la couleur du body dans les CSS et non dans le code HTML de la page : si vous décidez de modifier après coup la couleur du body, vous n'aurez qu'à modifier une ligne dans le fichier CSS et non chaque page HTML !

Créer un bouton en CSS3 sans images - Utiliser les dégradés, les ombres et les coins arrondis. Tutoriel Dans ce tutoriel, nous allons utiliser différentes techniques CSS qui vont par exemple nous permettre de réaliser un bouton, sans utilisation d’images. Ces techniques sont utilisables sur tous les éléments d’une page web : C’est parti ! Tout d’abord, commençons par le code HTML nécessaire. <p>Press</p> Appliquons-lui quelques styles par défaut : une taille, une police, une couleur, un alignement. Vous devriez donc obtenir ceci : Et les nouveautés CSS3, c’est pour quand ? J’y viens, j’y viens. Ici nous appliquons donc un dégradé partant du haut vers le bas, avec un gris #555 en haut et un gris #2C2C2C en bas. Je laisse volontairement la valeur background: #444 pour la dégradation gracieuse dans les navigateurs trop ancien. Voila donc le résultat : Continuons notre CSS avec les coins arrondis. Les effets de lumière pour plus de réalisme Pour ajouter un peu de volume et de réalisme, nous allons ajouter plusieurs ombres. L’ombre du texte tout d’abord. Un peu d’interaction !

Related: