background preloader

Menu déroulant en CSS

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 :

http://www.css-faciles.com/menu-deroulant.php

Related:  HTML - CSS - PHPPrincipesCodage deb

Système de Gestion-Affichage de Nouvelles PHP - Système de Gestion-Affichage de Nouvelles (Articles, Actualités...) : Version 4 (MYSQL/Procédural)Version 5 (PDO/Procédural) : NOUVELLE VERSION ! 21 outils et générateurs CSS pour développeurs web Les générateurs et outils CSS sont de plus en plus nombreux sur la toile, et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant ! 1. Réaliser une galerie d'image facile avec Php et MySQL - Web Info Bazar Article lu 13 900 fois Bonjour à tous! Nous allons voir ici comment réaliser une galerie d’image avec Php et une base de donnée MySQL. Les images de la galerie seront cliquables et redirigeront vers une page contenant l’image concernée ainsi que les descriptions de celle ci. Nous verrons également comment créer un formulaire d’upload afin d’ajouter de nouvelles images à votre galerie sans avoir à toucher au code une fois celle-ci fini Cette galerie est multi-usage : trombinoscope, galerie d’image etc…. à vous de choisir l’utilisation que vous souhaitez en faire !

CSS3 : @font-face, vous avez demandé une police de caractère non standard ? Vous êtes ici > CSS Débutant | CSS3 | Déclarer une police de caractère non standard avec @font-face Longtemps, longtemps, le webmestre s'est lamenté de ne pouvoir utiliser qu'un petit nombre de fontes pour ses sites web. Arial, Helvetica, times new roman... c'était d'un triste ! Ou alors il fallait faire des images. Et mettre du texte en image ce n'est tout de même pas très logique, sans compter les problèmes d'accessibilité qui peuvent en découler. Le modèle tabulaire en CSS Note : Cet article est publié conjointement sur OpenWeb.eu.org et sur Alsacreations.com. En outre, certaines parties de cet article sont extraites du livre «CSS avancées, vers HTML5 et CSS3», avec l’aimable autorisation de l’auteur :) Compatibilité

Pagination page par page Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici. Voici un petit bout de code près à l'utilisation, permettant d'effectuer une pagination et de choisir le nombre d'élément à afficher par page. La pagination peut se faire de 2 façons: [DIY] Panneau d'affichage style aéroport full CSS Le 24/08/2013 par lobodol Dans informatiqueFacile13 Feb 2014 Bonjour à tous, aujourd'hui je vous propose un tuto orienté webdesign, puis-ce qu'il s'agit de réaliser un panneau d'affichage style aéroport. 1. Introduction Pendant que je pensais à de nouvelles idées de design pour le site, j'ai eu envie de tester un affichage du style panneau d'affichage d'aéroport.Etant un purite du CSS, j'ai commencé à chercher sur le net des exemples tout faits, mais impossible de mettre la main dessus, seuls des résultats sous forme d'images étaient disponibles.

Les sélecteurs CSS Les sélecteurs CSS Le terme sélecteur désigne la partie précédant le bloc de déclaration, à gauche de l’accolade ouvrante. Il peut être un sélecteur d’élément p, une classe .list-inline, un ID #product ou un sélecteur d’attribut [class*="col-"]. Nous pouvons déclarer plusieurs sélecteurs, à condition de les séparer par une virgule. Attention, les sélecteurs ne doivent être composés exclusivement de caractères alphanumériques, de tirets ( – ) ou d’underscores ( _ ).Il n’est pas possible de commencer un sélecteur par un chiffre, et pas recommandé de le commencer par un tiret ou un underscore. Ressource externe : Documentation de Mozilla sur les sélecteurs CSS DNS Domain Name System, Service or Server Quand vous voulez téléphoner à quelqu'un, vous devez connaître son numéro de téléphone. Comme il est difficile de les retenir par coeur, on a inventé l'annuaire (qui permet de retrouver un numéro à partir d'un nom). C'est la même chose sur Internet: pour qu'un ordinateur puisse contacter un autre ordinateur, il doit connaître son adresse IP (exemple: 205.37.192.5). Pas facile à mémoriser non plus.

Comment appliquer des styles spécifiques à la page en cours dans un menu C'est un besoin courant en ergonomie web: marquer visuellement un lien dans un menu de navigation comme «actif» ou «en cours». Pour une page donnée du site, on voudra par exemple mettre en évidence le lien vers la page en question (si le menu propose un accès direct à chaque page) ou bien le lien vers la rubrique ou partie du site dans laquelle le visiteur se trouve. La pseudo-classe :active? Rien à voir. Les débutants en HTML et CSS cherchent souvent à utiliser la pseudo-classe CSS :active pour arriver à ce résultat. Créer un design d’article de blog avec une date flottante en HTML et CSS Aujourd’hui, nous allons s’atteler au design d’un élément particulier d’un blog : le billet. Je vous propose de reproduire pas-à-pas le design ci-dessous. Jolie, hein ? Ca vous tente ? C’est parti !

Related: