Positionnement, static, relative, absolute, fixed Propriété : Position La propriété sert à définir la position des éléments dans une page HTML Héritage : Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage sur ce lien) Syntaxe : position: valeur; Valeurs possibles: La propriété de feuille de style position css est généralement utilisée pour la création de calques (Layer). Valeurs possibles: top left right bottom Exemple : position: absolute; top: 10px; right: 10px; Le principe du positionnement en CSS fait qu'il est possible de positionner un block n'importe. Le positionnement absolu Une balise HTML avec une position absolue ne laisse aucun espace vide après qu'il est positionné. Dans cette exemple, vous allez obtenir une div à chaque coin de votre écran. Le positionnement relatif On place une div en position relative en avec la valeur de la propriété : relative. En d'autres termes, si on déplace l'élément vers la droite, la gauche, le haut ou le bas.
Tutoriel - Creer un site avec Bootstrap de Twitter Découvrez comment il est possible de réaliser une interface Web de manière simple et la rendre compatible avec les différents types de support mobiles en utilisant Bootstrap de Twitter, qui repose sur un système de grille. Son avantage est qu'il permet également un gain de temps énorme en proposant des fondations prédéfinies pour vos projets, une normalisation de votre code en respectant les standards et des éléments graphiques loin d'etre négligeables. En plus de tout ceci, et c'est là l'objet de ce tutoriel, Bootstrap permet de faire rapidement et efficacement des structures de sites en Responsive Web Design, en d'autres termes de prendre en compte et d'adapter le contenu de votre site Web aux différents types d'appareils, mobiles ou non. Afin de profiter pleinement de toutes le joies que peut proposer Bootstrap, il est préférable d'avoir déjà de bonnes connaissances en CSS et une approche plus ou moins familière de JQuery et LESS. Voir la réalisation effectuée avec ce tuto <! <! <!
Components Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible. How to use For performance reasons, all icons require a base class and individual icon class. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements. Changing the icon font location Bootstrap assumes icon font files will be located in the .. Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Use whatever option best suits your specific development setup. Accessible icons Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters.
TUTO intégration html5 / css3 d'un portfolio minimaliste avec Dreamweaver CC, HTML 5, CSS 3 sur Tuto.com Voici la suite de la formation Photoshop consacrée à la création des maquettes des pages du site Internet Portfolio minimaliste. Cette 2ème partie sera consacrée à l'intégration HTML5 et CSS3 des maquettes Photoshop. Voici le programme de ce tuto : Page d'accueil : Mise en place d'un moteur de recherche animéEffet d'opacité sur les icônes des réseaux sociauxCréation du menuMise en place d'un slider aux couleurs du siteMise en place des derniers articles à afficher sur la page d'accueilInstallation d'un carrousel pour lister vos clientsCréation du footer Page A propos : Mise en place d'un sliderInstallation de barres de compétences animéesMise en place d'un carrousel pour afficher les membres de l'équipeCréation d'un sidebar et mise en place des éléments qui la constitue (dernier article, dernier projet, newsletter...) Page portfolio : Installation d'un portfolio filtrable fluideEffet au rollover sur les images avec icône superposée Page Singleportfolio : Page blog : Page SingleBlog :
How To Create a Pure CSS Dropdown Menu With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu. The menu we will be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. View the pure CSS dropdown menu demo <nav><ul><li><a href="#">Home</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Articles</a></li><li><a href="#">Inspiration</a></li></ul></nav> First up we’ll need to create the HTML structure for our CSS menu. The secondary sub-menu is nested under the “Web Design” option of the first sub-menu. Let’s begin the CSS by getting the basic dropdown functionality working.
How to Create a Dropdown Menu in HTML and CSS: 9 Steps Edit Article Edited by D1s1, Teresa, 80_Calo, Jeff and 5 others Two Methods:HTMLCSS A dropdown menu provides clear and hierarchical view of all main sections on the page and subsections contained within them. Ad Steps Method 1 of 2: HTML 1Create a HTML structure for your CSS menu. 4Add CSS to your HTML. Method 2 of 2: CSS 1Create a CSS file. 5Position your dropdown and align it to list item. Guide des étapes par étapes à la mise en place d’un forum BBPress - Partie 1 - Bb press français Partie 1- Les instructions de configuration étape par étape du forum BBPress Les instructions de configuration étape par étape de BBPress BBPress est un plugin pour WordPress qui permet d’avoir un forum pour votre site. BBpress utilise le concept de votre site quand c’est possible pour répondre à vos attentes. Cela peut très bien marcher sur certains thèmes, mais ne marchera pas bien sur d’autres, donc différents styles seront nécessaires. En dehors de la boite, il fonctionne bien avec TwentyTen, et je comprends TwentyEleven. La mise en place de WordPress nécessite certaines ou toutes les étapes suivantes en fonction de la manière dont vous voulez qu’il apparaisse. Les instructions ici génèrent un forum qui travail à l’intérieur d’un thème TwentyTen. Qui ressemble à : Cliquer sur cette image pour voir en taille réelle. En résumé vous avez besoin de : La partie 1 traite les étapes de 1 à 8 La partie 2 traite l’étape 9 Installer le plugin
BuddyPress - Le Tutorial complet en mode pas-à-pas Il y a quelques jours, le WordCamp me donnait l’opportunité de parler de mon plugin WordPress préféré : BuddyPress. Lors de ma conférence, je vous ai présenté globalement ce puissant moteur de communautés. Or le WordCamp, c’est aussi une rencontre communautaire, et je suis heureux d’avoir fait la connaissance de Fabrice (WP Formation WordPress) avec qui j’ai beaucoup échangé pendant ces 2 journées dédiées aux amoureux de WordPress. Il m’a notamment proposé de publier des "tutos" sur son site, et c’est pour moi l’opportunité de prendre le temps d’entrer un peu plus dans le détail de BuddyPress et ce de manière très opérationnelle. Je vous propose donc une série d’articles pour découvrir BuddyPress en mode tutorial pas-à-pas. Dans ce 1er épisode, nous allons commençer par créer un annuaire de membres pour notre site... @iMath Episode 1: Mettre en place un annuaire de membres WordPress Out of the box Petit rappel de ce que nous propose WordPress pour organiser les membres de notre blog : Tada !
The Beginner's Guide to BuddyPress (Open Source Social Networking) BuddyPress is plugin that adds social network like abilities to the acclaimed CMS WordPress. Adding features like a better profile for your blogs writers which combined turn it into a fully fledged social networking site. Most of the possibly for this great plugin aren’t even existent yet! As more and more sites start to use BuddyPress its true power, and that of WordPress is astonishing. Despite all this BuddyPress isn’t too hard to set up and use. BuddyPress adds the following functionality to WordPress. Activity Streams: Members can follow the activity of their friends or groups on your site. Extended Profiles: The default WordPress profiles don’t even compare to these ones. Friends: Members can add each other as friends, this allows them to communicate and track each other easily. Private Messaging: Allows members to message each other privately so discussion doesn’t have to be “out in the open”. Groups: Members can create and join groups on whatever topics they like. BP Profile Privacy
Social Admin Template Template (v2.0.1-rc1) Overview, structure and usage. 1. Overview Social Admin Template includes a simple PHP version that exposes a basic templating system with a main bootstrap file, header, footer, pages & sub-pages. Requirements: Setup: Unpack the downloaded package from themeforest in your webserver root directory eg. 2. A breakdown of the php folder structure: Header Include this in every page of your site <! Pages & Footer Automatic Page Loader: The template system can handle the loading of pages from the admin/pages/ directory and sub-pages from the admin/pages/<page-name>/<subpage-name>.php. Footer: Menu Builder Configuration The sidebar menu is being generated from the /config/config.menus.php configuration file. 4. JavaScript files are loaded dynamically by PHP on a per page basis. Header Scripts Loader: This is located in the admin/header.php file. Footer Scripts Loader: This is located in the admin/footer.php file. 5. This is located in the admin/header.php file. <?
► Website Templates - Amazing Prices & 24-7 Live Support