Cours PHP-MySQL : les bases de donn es Accèder aux bases de données avec PHP Introduction L'intérêt majeur de PHP est son interfaçage avec un grand nombre de bases de données d'une manière relativement simple et efficace.Nous a vons vu en introduction que pratiquement tous les SGBD sont pris en charge, mais PHP s'utilise bien souvent avec MySQL, un SGBD rapide (à moyenne charge) et qui satisfait à la plupart des sites Internet, même si il n'a pas encore toutes les potentialités d'autres... Mais rassurons nous, MySQL est exploitable même pour des bases de données de plusieurs Giga-octets et son moteur est basé sur la norme ANSI SQL 92. Périmètre et limites Nous ne passerons pas en revue les différentes commandes SQL mais nous privilégierons leurs interactions avec PHP. Les exemples donnés ici s'appuient sur une version de MySQL inférieure à 4.1 qui dispose de nouvelles fonctionnalités et nécessite quelques aménagements. utiliser MySQL avec PHP Se connecter à une base de données MySQL Ouvrir une connexion
» 20 tutoriaux CSS3 pour vous préparer au futur du web Le web design évolue constamment, au grès des modes et des technologies. Les graphistes et designers doivent non seulement garder un oeil sur les nouvelles tendances mais aussi sur les dernières technologies comme jQuery, HTML5 et CSS3, qui permettent d’exprimer une plus grande créativité tout enrichissant l’expérience de l’utilisateur. Ces 20 tutoriaux CSS3 vous permettront d’apprendre à coder de superbes éléments web interactifs. Ajoutez ces sites à vos favoris, et prenez votre temps… N’hésitez pas à partagez de billet avec vos collègues / amis ! Ces 20 tutoriaux CSS3 ont été référencés sur web design ledger par Tomas Laurinavicius. Construisez rapidement une page annonce (teaser) en CSS3 Avec ce tutoriel, vous apprendrez à créer une page annonce en utilisant uniquement CSS. Créer un menu déroulant avec CSS3 Avec ce tutoriel relativement simple, vous apprendrez à coder un menu déroulant en CSS3 pour un résultat simple, propre et professionnel. Accordéon avec CSS3 Tableaux de prix en CSS3
CSS : menu déroulant Voir aussi l'index de tous les conseils. Menu déroulant La page 'Menus fixes' montre comment faire un menu qui reste au même endroit au bord de la fenêtre, même si le reste de la page défile. Nous pouvons rendre ce menu plus intéressant en le faisant se replier lorsqu'il n'est pas utilisé. Le menu à droite de cette page ne s'affiche que sous la forme d'un petit onglet vert, jusqu'à ce que vous déplaciez le pointeur de la souris (ou cliquiez dessus avec un écran tactile), puis il s'ouvre pour afficher le texte qu'il contient. Pour rendre le déroulement plus agréable, une courte transition de seulement 0,2 secondes permet au menu de glisser doucement à partir de la droite. Lorsque l'espace est limité, comme sur le petit écran d'un téléphone portable, il peut être particulièrement utile de masquer partiellement un menu. Détails Notre menu est juste une liste UL et ressemble à ceci : Voici ci-dessous la partie essentielle de la feuille de style. Accessibilité Menus de taille inconnue Et voilà !
Faire un menu déroulant 'très simple' par RAIDEN423 Ce qu'il veut est un dropdown/accordeon à ce que je comprend En CSS pure ça peut donner ça : en css pure ouverture avec hover ou tab (ou touch sur une tablette) . Pour convaincre j'ai repris ton image. un autre montage , pour l'ouvrir/fermer sur le titre : et moins concluant, adaptation de la navigation du menu au clavier (peut de différence avec les autres selon les navigateurs, dixit IE9 ) Le suckerfish dropdownmenu reste une valeur sure, mais pas l'unique référence et la seule bonne pratique, attention , je dis pas que ce que je propose au dessus est le truc a faire, mais creuser un peu, ça fait paradoxalement avancer les choses . ).
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 :
Tutoriel : Créer un menu horizontal déroulant en CSS Salut les zéros. ;) Je vais aujourd'hui essayer de vous aider à créer un menu déroulant pour votre site ! :) Ce menu déroulant est réalisé en xHTML/CSS, et utilise un brin de Javascript pour permettre une compatibilité avec les anciennes versions d'Internet Explorer. Pour pouvoir réaliser ce menu déroulant, vous devez avoir lu le tutoriel de M@teo21 : Site Web ! Une fois ce tutoriel terminé, vous serez capables de réaliser un menu comme celui-ci, ou un beaucoup plus beau. Bonne chance à vous Voilà, nous sommes partis ! Pour commencer ce tutoriel, nous allons étudier la structure xHTML à mettre en place. Pour réaliser le menu déroulant, nous allons utiliser les balises de listes et non les tableaux. Rappel Voici comment se compose une liste en xHTML : <ul></ul> liste à puces non numérotée ;<ol></ol> liste à puces numérotée ;<li></li> élément de liste. <ul><li>Un premier élément de la liste</li><li>Un deuxième élément de la liste</li></ul> accueil ;membres ;images ;téléchargements ;plus. Hop ! <!
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 déroulant – FrogWeb Menu déroulant 2 niveauxComme il y avait pas mal de demandes je me suis amusé à faire un :menu-deroulant-2-niveaux Pour le code il y a juste à afficher le code source. Menu déroulant horizontal Pour cacher/montrer un sous menu la technique du display: none (cacher) et display: block (montrer) est souvent utilisée. Pour des raisons d’accessibilité et de reférencement j’utilise une autre technique : left: -999em (cacher) et left: auto (montrer) Utilisation de left Tout d’abord une précision quant à l’utilisation de left, top, right et bottom : ça ne fonctionne que sur des éléments positionnés (absolute, fixed, relative). Cela tombe bien puisque pour faire un sous menu déroulant celui-ci doit-être en position: absolute. Voici le code totalement épuré de toute CSS décorative pour une meilleure compréhension : Code HTML Code CSS ce qui nous donnes (ah oui, c’est du brut…) : D’autres techniques existent mais je trouve celle-ci plus « propre ». Rien ne vous empêche également de les laisser.
Comment réaliser un menu déroulant en CSS3 ? 3 janvier 2014 Affichages : 12353 Dans ce tutoriel, nous allons voir comment créer un menu déroulant en pure CSS3. Il existe déjà de nombreux tutoriels sur le sujet mais la plupart d'entre eux utilisent la technologie JQuery pour obtenir l'effet déroulant. Nous allons tout d'abord commencer par créer la structure HTML, puis nous ajouterons le css pour styliser notre menu et obtenir l'effet déroulant. La structure HTML La première étape consiste à créer d'abord une liste < ul > avec quelques < li >< /li > à l'intérieur. <nav><ul><li><a href="#">Accueil</a></li><li><a href="#">Contact</a></li><li><a href="#">Menu1</a></li><li><a href="#">Menu2</a></li></ul></nav> Ensuite, nous sélectionnons une des balises < li >< / li > à laquelle nous ajoutons une nouvelle balise < ul >< /ul > avec quelques éléments à l'intérieur pour créer notre menu déroulant. <nav><ul><li><a href="#">Accueil</a></li><li><a href="#">Contact</a></li><! Le CSS Comment ajouter un symbole au menu déroulant ? En conclusion