background preloader

FrogWeb - Tutoriel pour créer un menu déroulant

FrogWeb - Tutoriel pour créer un menu déroulant
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.

http://www.frogweb.fr/menu-deroulant-horizontal/

Related:  nicolaslemeurTuto WEBPROJET HTML

Alsacreations - Centrer les éléments ou un site web en CSS Il existe plusieurs méthodes d'alignement et de centrage en CSS, qui dépendent de la structure des balises (bloc, en-ligne) et le type (vertical, horizontal). Le centrage horizontal des éléments de type en-ligne Vous voulez centrer horizontalement un élément de type "en-ligne" au sein d'un bloc. Menu déroulant vertical – FrogWeb Pour un menu vertical, la technique la plus simple à utiliser est celle du left: -999em. Nous reprenons donc le même code html : Code HTML <ul id="menu-vertical"><li><a href="#">Lien menu 1</a><ul><li><a href="#">lien sous menu 1</a></li><li><a href="#">lien sous menu 1</a></li><li><a href="#">lien sous menu 1</a></li><li><a href="#">lien sous menu 1</a></li></ul></li><li><a href="#">Lien menu 2</a><ul><li><a href="#">Lien sous menu 2</a></li><li><a href="#">Lien sous menu 2</a></li><li><a href="#">Lien sous menu 2</a></li><li><a href="#">Lien sous menu 2</a></li></ul></li></ul>

40 nouveaux Tutoriels de qualité gratuits pour Illustrator Adobe Illustrator est un logiciel de création vectorielle facile à prendre en main mais extrêmement complet. Au fil du temps, sa palette d’outils et de fonctionnalités n’a cessé de grandir. En maîtriser tous les aspects demande un long apprentissage mais cette longue liste de tutoriels devrait vous aider à couvrir tout ce qu’il faut savoir pour devenir un pro du vectoriel !

cadre.html Comment créer des cadres avec Netscape Composer? La technique des cadres consiste à séparer votre écran de navigation en différentes parties (généralement en 2 ou 3 sections). Bien que Netscape Composer répond aisément à la création de pages Web, cet outil est plus difficile à utiliser avec la création de cadre de navigation. C'est donc pour cela que nous allons vous suggérer quelques modèles préparés à l'avance. Apprendre HTML5, CSS3 pour créer un site web À travers de nombreux exemples pratiques et cas concrets, Alsacréations vous propose de découvrir toutes les possibilités offertes par la conception web aux normes, HTML, XHTML, HTML5, les feuilles de style CSS et CSS3, le Web mobile, l'accessibilité, PHP, JavaScript, jQuery, etc. Tutoriel : Guide pas à pas Article : Document d'analyse ou de référence Astuce : Court stratagème toujours utile Cette page présente une sélection de nos ressources. Vous pouvez aussi consulter la liste complète des tutoriels et articles ou des astuces.

Thickbox Et Photo Diaporama Visual LightBox Présentation VisualLightBox est un assistant qui vous permet de Créer facilement des galeries de photos Web en quelques clics sans avoir à écrire une seule ligne de code,basé sur la célèbre scripte LightBox2. Il vous suffit de glisser-déposer vos photos dansla fenêtre de Visual Lightbox, appuyez sur "Publier" et votre propre Galerie Web avec de beaux effets. L'album est ouvert instantanément dans votre navigateur! PHP - Documentation Edit Report a Bug Manuel PHP ¶ par: Mehdi Achour Friedhelm Betz Antony Dovgal Nuno Lopes CSS - la propriété "display" La propriété CSS display est la plus importante pour contrôler la mise en page. Chaque élément à une valeur display par défaut dépendante du type de l'élément. Les valeurs par défaut de la plupart des éléments sont block ou inline. Un élément block est souvent appelé un élément block-level.

FreeMind - organiser ses idées FreeMind est un logiciel de Mind mapping entièrement libre, permettant de créer des cartes heuristiques permettant de représenter graphiquement un projet ou une idée. Les cartes heuristiques sont des données organisées en branche, avec des couleurs et des visuels, afin de faciliter la compréhension et la mémorisation. Utilisé en prise de note, ce type d'outil peut également s'avérer très performant ! Fonctionnalités Flexbox - guide complet Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici. Par Chris Coyier NdT : Ce tutoriel est la réunion de quatre articles de Chris Coyier formant une introduction à Flexbox. Vous pouvez ensuite consulter tous les articles sur Flexbox traduits dans la Cascade notamment les exemples concrets d'implémentation et les astuces techniques.

Related: