background preloader

Le positionnement CCS en moins de 10 etapes: position static relative absolute float

Le positionnement CCS en moins de 10 etapes: position static relative absolute float
1. position:static Le positionnement par défaut de tous les élément est : position:static, qui signifie que l'élément n'est pas explicitement positionné et apparaît là ou il doit normalement apparaître dans le document. Normalement vous n'avez pas à le spécifier sauf pour remplacer un positionnement qui a été mis précédemment. 2. position:relative Si vous spécifier position:relative, alors vous pouvez utilisez top ou bottom, et left ou right pour déplacer les éléments relativement a l'endroit ou ils devraient normalement se trouver dans le document. Déplaçons div-1 vers le bas de 20 pixels, et vers la gauche de 40 pixels: Remarquez que l'espace ou div-1 aurait du être si nous ne l'avions pas déplacer est maintenant un espace vide. Il semble que position:relative ne soit pas vraiment utile mais it pourra l'être pour certaines présentation que nous verrons plus tard. 3. position:absolute Déplaçons div-1a dans le coins supérieur droit de la page: Footnotes 4. position:relative + position:absolute

CSS3 Animations Un pyjama efficace pour Internet Explorer | Border-Labs En termes d’ergonomie, on conseille souvent d’implanter dans ses tables HTML des « pyjamas », c’est-à-dire des couleurs de lignes alternées. Cela permet de faciliter la lecture : l’œil peut plus facilement suivre les lignes. Une table avec pyjama En CSS 3, il existe une solution tout à fait satisfaisante, utiliser la pseudo classe nth-child qui permet de sélectionner le nième fils d’un nœud DOM. Cette pseudo classe accepte une syntaxe du type an+b où n représente le fils sélectionné et accepte deux mots clefs odd (pour les fils dont l’index est impair) et even (pour les fils dont l’index est pair). nth-child(2n) correspond à nth-child(even)nth-child(2n+1) correspond à nth-child(odd) On peut donc directement utiliser cette pseudo classe pour sélectionner les lignes paires et impaires (c’est-à-dire les nœuds de type TR) en fonction de la parité de leur index. Du coup, il existe même des librairies javascript pour résoudre de façon générique ce problème, par exemple :

CSS Transitions Abstract CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. Publication as a Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. This document is expected to be relatively close to last call. Table of Contents 1. This section is not normative. This document introduces new CSS features to enable implicit transitions, which describe how CSS properties can be made to change smoothly from one value to another over a given duration. 2. Transitions of ‘left’ and ‘background-color’ Example(s): 2.1. 3.

Les 30 sélecteurs CSS à connaître absolument tomsyweb.com Buy this domain The owner of tomsyweb.com is offering it for sale for an asking price of 345 GBP! Related Searches This page provided to the domain owner free by Sedo's Domain Parking. CSS : comprendre le fonctionnement de float et clear Pourtant l'une des propriétés les plus utilisées en matière de CSS, float, avec ses valeurs left, right et none, reste celle dont le comportement est le moins prédictible par les designers Web même non débutants. Combiné à la propriété clear, et ses valeurs left, right, both et none, cela donne parfois des arrangements de règles hasardeuses dont l'affichage final est le résultat avant tout à d'une suite de tâtonnements et de rechargements de page. Comprendre le comportement de float implique une compréhension plus globale de la philosophie des CSS, notamment celle du flux. float permet de sortir un élément du flux, en cela que l'on peut préciser si l'élément ciblé, par exemple une image ou une colonne de contenu, s'affiche à gauche ou à droite. Le comportement inattendu du reste du flux se retrouve souvent sous la forme d'autres éléments flottants qui n'occupent pas la place voulue. Le code de la dernière image, ramené aux fondamentaux : Les meilleures astuces CSS sur le JDN :

Menu déroulant en CSS Si vous voulez avoir tout de suite un aperçu du type de menu décrit dans cette page, vous pouvez visiter notre page de démonstration. Et pour garder le script proposé au chaud sur votre PC, vous pouvez aussi le télécharger. Avec ou sans javascript ? Lorsqu'on peut se passer de javascript, il est prudent de le faire. Certains internautes désactivent en effet l'exécution du javascript et pourraient se retrouver dans l'impossibilité de naviguer sur un site utilisant ce langage dans sa gestion de menu. Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures. Notre choix a consisté à mettre au point un menu à 2 vitesses qui fonctionne : Sans javascript pour Firefox, Opera, Mozilla et IE7Avec javascript pour IE 5.5 et 6 Ce choix permet à notre menu de rester pleinement opérationnel pour la quasi-totalité des visiteurs. Une partie de cache-cache Pour obtenir ce résultat, il faut donc maîtriser deux techniques :

Hover avec transitions - Réaliser un effet de hover progressif avec les transitions en CSS3 Création d’un hover progressif Un hover progressif ? Je n’ai pas trouvé mieux pour expliquer cet effet pourtant si simple. Plutôt que de gérer un hover ON/OFF, ici le :hover s’applique progressivement, plus précisément, il disparait progressivement. De plus, l’effet de transition progressive est appliqué sur un dégradé. Puis, sur chaque lien est appliqué un fond de couleur (gris) et lors du :hover, on fait disparaitre ce fond avec les transitions. Obtenez plus d’infos sur l’utilisation des dégradés. Les coins arrondis Dans cette démo, j’utilise également border-radius avec les pseudo-classes :first-child et :last-child pour arrondir le coin supérieur droit du premier <li> et le coin inférieur droit du dernier <li>. Pour la création de la petite flèche, suivez le tutoriel d’utilisation des bordures Astuce : utilisez prefixMyCSS pour ajouter les préfixes propriétaires aux règles CSS3.

Menu horizontal déroulant en CSS Un menu horizontal, c'est bien... Un menu horizontal qui déroule, c'est mieux !... Oh enfin, mieux... Comme précédemment, le menu sera fait sous forme d'une liste à puces que l'on va contraindre à devenir horizontale, mais ce sera, en plus, une liste à puces imbriquée qui va donc être démasquée par rollover. Fonctionne avec : Firefox 3 IE 7 SeaMonkey Opéra 9 Safari 3 Camino 1.6 Attributs utilisés : background-color color display float height list-style-type padding position margin text-align, text-decoration width Note importante Comme indiqué ci-dessus, cette technique, basée uniquement sur des propriétés CSS (notamment la pseudo-classe :hover), ne fonctionnera que sur des navigateurs récents. Code (x)html <div id="menu"><ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a><ul><li><a href="#">Sous-item 1</a></li><li><a href="#">Sous-item 2</a></li><li><a href="#">Sous-item 3</a></li></ul></li><li><a href="#">Item 3</a></li></ul></div> Code CSS A ce stade, le résultat est le suivant :

Menu horizontal en CSS - CSS Debutant Les menus sont logiquement des listes à puces. Oui, mais voilà, si on veut un menu horizontal, on ne voit pas bien comment faire devenir une liste verticale en liste horizontale... Et bien si ! Avec les CSS, on peut réaliser un menu horizontal avec une liste à puces dont chaque item sera un bouton. Fonctionne avec : Tous les navigateurs graphiques Attributs utilisés : background-color border-color ; border-style ; border-width color float height list-style-type padding text-align ; text-decoration width Code (x)html <ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item plus long</a></li></ul> Ce code html va donc être stylisé afin d'obtenir un menu horizontal, soit sous forme de boutons simples sans images, soit avec des images de fond qui changeront au survol de la souris par effet rollover. Mise en forme de boutons CSS simples Le principe est donc de transformer cette liste à puces verticale en liste (sans puces) horizontale. Code CSS Résultat attendu Astuce Haut

Les transformations 3D en CSS3 L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Nous allons aujourd’hui appliquer ces transformations dans l’espace grâce aux transformations 3D du CSS3 ! Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Passionné du web, il est le créateur du site CSS3create, dédié à l’expérimentation et à l’apprentissage de CSS3 ainsi que de l’outil PrefixMyCSS, permettant l’ajout automatique des préfixes propriétaires CSS. Introduction Vous avez déjà entendu parler des transformations en CSS, qu’elles soient 2D ou 3D? Quels navigateurs sont compatibles? Les rotations

Les sélecteurs CSS 2 et 3 Les règles des feuilles de styles sont composées d'un sélecteur qui désigne l'élément du code HTML et d'une définition comportant une liste de propriétés relatives à cet élément HTML ou cette classe d'éléments. Un sélecteur peut être un sélecteur simple ou un sélecteur composé, ou une chaîne de sélecteurs simples ou composés séparés par des combinateurs. Ceux-ci sont les signes > ou + ou espace blanc. Le sélecteur simple Ce peut être le nom d'une balise, celui d'une classe précédé d'un point, celui d'un identifieur précédé du symbole dièse. Exemple, un code HTML: La feuille de style associée: Tous les calques auront un fond blanc. Le seul calque dont l'identifieur est "identifieur" aura un texte de couleur rouge. Tous les calques appartenant à la classe "box" auront un bord gris d'un pixel d'épaisseur. En conclusion, les sélecteurs permettent d'associer un style à un élément unique, à une balise ou à des balises différentes mais ayant une même classe. Le sélecteur universel La règle: Syntaxe: ou:

Sélecteurs css - Tais toi et code Nous l’avons vu, la mise en forme css se définit par un ensemble de règles, composées de déclarations, appliquées aux balises html. La première partie d’une règle, celle qui indique l’élément ou les éléments html à laquelle elle s’applique, soit la partie dans la règle correspond à ce que l’on appelle le sélecteur. Sous sa forme la plus simple, un sélecteur désigne une balise. Sélecteur de type id Hors, il arrive que plusieurs éléments partageant la même balise doivent être mis en forme différemment. et de pointer vers cet élément précis dans le css à l’aide du sélecteur la règle css deviendra donc Cette manière de faire nécessite que l’élément html à mettre en forme ait un identifiant unique, spécifié dans le code html (ici « bloc »). Sélecteur de type class et de pointer vers ces éléments à l’aide du sélecteur La règle ci-dessus spécifie donc que les éléments html qui ont un attribut « class » de valeur « ensemble » doivent avoir un fond rouge. Chemin d’éléments et les règles css

Related: