background preloader

Structure HTML et rendu CSS des balises : bloc et en-ligne

Structure HTML et rendu CSS des balises : bloc et en-ligne
La compréhension de la structure des éléments HTML est paradoxalement un sujet peu connu des développeurs web. Bien souvent sont évoqués des éléments de type bloc et des éléments de type en-ligne. Il faut savoir que ces désignations sont quelque peu faussées car elles mélangent une partie des spécifications HTML (qui proposent des catégorisations d'éléments) et une partie des spécifications CSS (qui proposent des modèles de rendus). Historiquement, HTML ne proposait que deux catégories d'éléments : les éléments de niveau block et les éléments de niveau inline. En HTML5 La catégorisation est améliorée et modifiée depuis HTML5. Le flux (flow) regroupe la plupart des éléments courants, c'est-à-dire les autres sous-modèles cités ci-après, ainsi que le contenu texte simple. Le contenu sectionnant (sectioning), définit les grandes zones du document HTML ou de l'application web : <article>, <aside>, <nav>, <section>. Emboîtements En HTML4 et XHTML 1.x Fonction et emboîtements En règle générale : none Related:  HTML CSSCSS

Contraintes web : le matériel L'accessibilité d'un site web est liée en grande partie à l'aspect technologique. Une page Internet peut être vu différemment par les internautes en fonction du matériel sur lequel le site est consulté. Différents critères rentrent en ligne de compte. Le navigateur. Le système d'exploitation. Il est impossible de concevoir un site Internet qui réponde à l'ensemble des caractéristiques optimisées d'une plate-forme informatique. Une grosse erreur de design consiste à concevoir un site qui ne rentre pas dans la largeur des écrans standards du moment. L'interface de votre site occupera au maximum 960 pixels de large, pour que le contenu de la page web rentre dans la largeur de l'écran. Recourir à de nombreux plug-ins multimédias ou à des technologies non standard peut réduire sensiblement le nombre d'internautes capables de lire votre site.

Changer le CSS d'un template - Apprentissage du web Cet article va expliquer comment passer d'un template par défaut à un template personnalisé dans l'outil de création de site web Jimdo. Bien que le tutorial soit très didactique et détaillé il est recommandé d'avoir quelques notions d'xHTML et de CSS surtout pour ensuite personnaliser le design en question. Aucun support personnalisé ne sera fournis en plus de ce tutorial. Ce petit cours est fournit à titre informatif pour les Jimdonautes bricoleur. Pour plus d'informations et mieux comprendre certains points il faut absolument apprendre l'xHTML et le CSS, plusieurs sites très efficace existe sur internet sur ce sujet. Avertissement: Veiller à ne pas voler le template d'un autre site. La première étape de ce tutorial est de créer deux fichiers texte qui contiendront respectivement le code xHTML et le code CSS de votre template par défaut. Avant d'aller plus loin, assurez-vous que votre site web Jimdo possède le template que vous souhaitez éditer. Supprimer les scripts Organiser le contenu

Initiation à la création d'un design extensible Nous allons donc créer un design extensible simple, pas à pas, en abordant les principales techniques. Je passerai très rapidement sur le code qui ne concerne que l'esthétique (bordures, couleurs, etc.) : vous êtes normalement capables de le faire sans problème. Notez que ce qui est abordé dans ce tutoriel peut être utilisé sans problème pour un design fixe en faisant quelques modifications (en ajoutant des tailles fixes, notamment). Voici donc à quoi va ressembler notre design : Aperçu du design Magnifique, n'est-ce pas ? Résumons un peu, le design comportera : un titre principal centré en haut de la page ;un menu à gauche comportant quelques liens ;le contenu de la page à droite, dans un bloc ;un pied de page centré en bas. Il s'agit d'un exemple de design qui n'est pas très compliqué à mettre en place. Préparation Le site ne sera composé que d'une seule page, nous aurons donc une page HTML et une page CSS. <title>Mon premier design extensible</title> <h1>Mon premier design extensible</h1> h1

Can I use... 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 Cet article est la réunion de quatre articles de Chris Coyier sur Flexbox. Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les items d'un container, même lorsque leurs dimensions sont inconnues et/ou dynamiques - d'où le terme "flex". L'idée principale est de donner à un élément contenant (container) la possibilité de changer les largeur et hauteur des éléments contenus (items), afin de remplir au mieux l'espace disponible, et s'adapter à tous les devices et toutes les tailles d'écrans. Un container flexible permet aux items de s'étendre pour occuper la place disponible ou au contraire les réduit pour leur éviter de déborder. Les bases Le schéma ci-dessus montre bien que l'axe principal peut être horizontal ou vertical. Propriétés flex

Best CSS Code Snippet Sites On the web there are many different code repositories of web programming languages from which you can take free or licensed, but mostly free, small snippets for personal and professional use. Many are also collaborative communities that share code and discuss with others. Here is a small selection: asdfgas CSS Tricks CSS Tricks offer CSS code snippets but also some for HTML, HTAccess, JavaScript, jQuery, PHP and Wordpress. Although it is an HTML5 repository, labels filter snippets for CSS3 very well. html5snippets.com/css3 Other blogs have already published good collections of snippets in some of their posts: Tzine is an awesome web development website with tutorials and resources. tutorialzine.com

JSbin, JSfiddle or Codepen, which one to use and why? There are lots of css – js playgrounds now in the market, and the most popular ones are JSbin (by Remy Sharp), JSfiddle (by Oskar Krawczyk), codepen (by Chris Coyier, Tim Sabat and Alex Vasquez). So sometimes it become a confusing question which one to use; and more importantly why and when? Let’s compare these three today and find out which one can be the most suitable one for you. So, first of all let’s compare the features of these three. Feature comparison table These are the main features provided by these three playgrounds. My Personal Recommandation Why JSbin It is fast, light weight, windows can be hidden and shown easily. Why JSfiddle I like the collaboration feature of jsfiddle. Why Codepen Preview feature is what I like there. Cons of them I’m not mentioning any paragraph or table for the pros; cause, the feature table itself says about the pros of each of them. JSbin cons JSfiddle cons Hitting the run button everytime is frustrating if you are testing a small snippet. Codepen cons

Simple scalable CSS based breadcrumbs A few days ago I was implementing breadcrumbs in a website I’m working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it’s been a while since I last wrote about anything CSS-related. The one I’ll share with you is a very simple one. It uses only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code. The one I implemented in the project I'm working on looks a bit similar, but was more complex to code. The HTML code Here is our HTML code. <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> All items have links, except the page you're on. The CSS Here is the CSS styling: I've given the list an ID called #crumbs. We want to have the entire arrow area clickble.

Generateur de multi-colonnes en CSS3 Développement CSS animation, transition, font, playground, ... Développement Javascript jQuery, Javascript, performance, ... Développement PHP test unitaire, librairies, ... Développement HTML5 HTML5 Api, localStorage, geolocalisation, ... Développement jQuery jQuery, plugins, performance, ... Outils pour développeur bordure, box-shadow, multi-columns, ... UPDATED - nouvelles fonctionnalités HTML5 - sliders Résultat Lorem ipsum dolor sit amet, consectetur adipiscing elit. Code à copier -moz-column-count: 4; -webkit-column-count: 4; -o-column-count: 4; column-count: 4; -moz-column-gap: 20px; -webkit-column-gap: 20px; -o-column-gap: 20px; column-gap: 20px; -moz-column-rule: 1px dotted #cbcefb; -webkit-column-rule: 1px dotted #cbcefb; -o-column-rule: 1px dotted #cbcefb; column-rule: 1px dotted #cbcefb; Faire un don pour m'aider à continuer d'améliorer le site Autres outils que vous pourriez aimer

40+ Beautiful CSS HTML Login Form Templates In this article we’ll show you some creative css html login forms templates using modern design with CSS3 and HTML5. In fact, nowadays, popular web service, web application are allows or requires user subscription, which means that they will need some kind of forms for users to register and sign in on their website. To help you, so I tried to find beautiful some different login forms, some of which are inspired by design concepts on the web design. I believe that css / hmtl login form templates web design should be clean and efficient. With in mind that the form design should have different style, the principals login form need including just three elements: a username, a password , and a submit input. You may like this: jQuery login form Log in Form Connect with Facebook Demo More Info CSS3 Login Form Demo More Info Dark Login Form Demo Download A clean and simple login form Demo Download Login Form Alert Interface in PSD and CSS More Info Nice CSS3 Login Form More Info Elegant Login Form

CSS3 Multiple Columns Les grands principes du Responsive Web Design Un site web responsive est un site dont le design s’adapte à l’écran de l’utilisateur. Cette technique s’oppose à celle des sites plus classiques où le choix d’une apparence entièrement statique a été effectué au préalable. Cette approche présente l’inconvénient d’obliger les possesseurs de petit écran à scroller pour visualiser l’ensemble du contenu, ainsi que de laisser une impression de vide à ceux, plus chanceux, qui naviguent sur un écran de grande dimension, par exemple un 27 pouces. À l’inverse, l’apparence d’un site dont le design est responsive s’adapte en fonction de l’écran sur lequel il est affiché. Cela est possible de manière extrêmement simple, grâce à une nouvelle fonctionnalité du CSS 3 : les media queries. Dans cet exemple, la valeur seuil est fixée à 1024 pixels : en deçà, on bascule sur la feuille de style réservée aux petits écrans. Les media queries peuvent également être directement insérées dans les feuilles CSS : Cela serait une solution en théorie. Les images

Related: