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

Mise en page CSS avancée grâce à la propriété display L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait. Prenons un exemple simple de disposition d'un texte scindé en trois paragraphes que l'on souhaite agencer en drapeau: Logiquement, ma structure HTML sera des plus simplistes:

Div et CSS : une mise en page rapide et facile Tout au long de cet exercice, nous allons utiliser deux fichiers : index.html : contiendra tout notre code HTML. style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> : Définissons tout d'abord les propriétés de base de nos blocs. Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align). Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur : #FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99 Télécharger les codes-source de l'exemple

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

Tableaux HTML | CommentCaMarche Mars 2014 Tableaux HTML Il est souvent utile de présenter des informations mieux structurées qu'avec des listes. Un tableau doit respecter les quelques règles suivantes : Le tableau est encadré par les balises <TABLE> et </TABLE>. Voici un exemple de tableau HTML : <TABLE BORDER="1"><CAPTION> Voici le titre du tableau </CAPTION><TR><TH> Titre A1 </TH><TH> Titre A2 </TH><TH> Titre A3 </TH><TH> Titre A4 </TH></TR><TR><TH> Titre B1 </TH><TD> Valeur B2 </TD><TD> Valeur B3 </TD><TD> Valeur B4 </TD></TR></TABLE> Ce code donne le résultat suivant : Attributs A voir également Communautés d'assistance et de conseils. Tables Tablas Die Tabellen Le tabelle Os quadros

Crer des coins arrondis en CSS et sans images Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même. Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables afin de dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible. C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Simple et approprié : border-radius Exemple : Et c'est tout !

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... Fixing position:fixed for Windows Internet Explorer STATUS QUO (2006-09-26): Internet Explorer 7 applies its numerous css changes – including support for fixed positioning – only in ‘standards-compliant mode’. Both methods described below should still be ‘safe’ to use (albeit for different reasons). More info about new possibilities and consequences in terms of doctype-sniffing will be added soon. The reason that the initial approach does not work in versions prior to 6 is lacking css support for the root element. There is, however, a trivial workaround: create a dummy element that serves as the document body and move the relevant properties one node down. Absolutely positioned elements outside of div.content will be fixed in respect to the viewport, absolutely positioned elements inside of div.content will behave normally. This makes it mandatory to trigger quirks mode for ie >= 6, e.g. by inserting a comment (accurately: comment declaration; see also: other prolog) before the document type declaration. Complete cruft-free demos:

Initiation au positionnement CSS (partie 2) Le positionnement des éléments en CSS est sans aucun doute l'un des aspects les plus intéressants de cette technologie, mais également l'un des plus ardus. Positions, flux et autres flottants sont pourtant des notions essentielles à une bonne maîtrise de la mise en page. Si de plus en plus d'intégrateurs semblent aujourd'hui acquérir les bases du comportement de ces propriétés, les choix des techniques demeurent couramment discutables, tout au plus hasardeux. Voyons ces méthodes de positionnement en détails afin de ne plus se laisser aller à des choix arbitraires incohérents. Sommaire du document Parce qu'une révision des bases ne fait jamais de tort… La section qui suit se contente d'introduire brièvement les notions de positionnements disponibles en CSS. Notion de flux Le flux d'un document pourrait se définir comme étant le comportement naturel d'affichage des éléments d'une page web. Les éléments de type block (h1, p, ul, ol, dl, table, blockquote, etc.) Revenir au sommaire Un habillage

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

Related: