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

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 :

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. 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 :

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 :