HTML CSS.

Slides:



Advertisements
Présentations similaires
Lundi 8 Décembre 2008 Aujourd'hui, nous finirons la mis en forme du texte.
Advertisements

Lundi 15 Décembre 2008 Aujourd'hui, les balises et.
Introduction aux Web Services Partie 1. Technologies XML
Conception de Sites Web dynamiques
Feuilles de style CSS - XHTML est un langage impur
Le CSS : un complément au HTML
Lundi 2 Mars 2009 Aujourd'hui, les menus
Cours XHTML/CSS Lundi 9 Février 2009
XML, et HTML, comme langages de structuration
HTML CSS.
1 Modèles. 2 Sauvegarder le code en cliquant sur editer html 4 zones avec scroll
Structure du site cpe.evry.free.fr. 1. Informations générales Le site renvoi au site via un javascript.
Cascading style sheets
Procédés de Mise en forme Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) Alain Gély – Stage CIES « Initiation au web »
11:06:28 Programmation Web Programmation Web : Feuilles de style CSS Jérôme CUTRONA
CREATION DE FEUILLE DE STYLE pour structuré le document XML
XHTML XHTML Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite vous.
Introduction aux Web Services Partie 1. Technologies HTML-XML
Cascading Style Sheets (CSS)
Applications Internet – cours 3 La page web
17 octobre 2012 Grégory Petit
Les feuilles de style La mise en page
Passer au CSS et autres... (2) Pour nous encourager, on revois l'objectif à atteindre.
CSS.
1. 2 PLAN DE LA PRÉSENTATION - SECTION 1 : Code HTML - SECTION 2.1. : CSS (Méthode 1) - SECTION 2.2. : CSS (Méthode 2) - SECTION 3 : JavaScript - SECTION.
HTML / CSS Gestion des systèmes d’information Classe terminale
M. Larooussi Formatage de documents - CSS École dété INSAT Août 2006.
CSS : Quelques exemples de mise en page fluide en n colonnes
Cascading Style Sheets (CSS)
Faculté I&C, Claude Petitpierre Cascaded style sheets CSS.
Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.
31 octobre 2012 Grégory Petit
 Créer une page html nommé index  Cette page doit contenir  Partie de l’entête Titre Métas(description et mots clés) Lien vers une feuille de style.
Le langage XHTML 420-S4W-GG Programmation Web Client
Les feuilles de style en HTML. CSS CSS: feuilles de style en cascade Permettent d’appliquer une mise en page à l’ensemble d’un site très simplement Permettent.
Passer au CSS et autres... Quelle différence entre ces deux pages ? Si vous regardez uniquement le contenu, aucune. Tout se joue sur la mise en forme.
Module HTML / CSS / PHP / MySQL
Créer son site web Chapitre II. Les caractères spéciaux Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède.
Auteur : Frédéric Thériault 1. Les sélecteurs simples  Tous les éléments HTML du sélecteur sont affectés dans le document. Exemple : h1 { color:purple;
LE CSS ISN Terminale S CSS Types de styles.
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
Introduction aux langages Html et CSS
Template joomla Leblanc 2011.
CSS Cascading Style Sheets (Feuilles de style en cascade)
HTML Cours 2.
Auteur : Frédéric Thériault 1. Les boîtes 2 Les attributs 3 width height margin margin-top margin-right margin-bottom margin-left border-style border-width.
Application des CSS Régie des rentes du Québec Carolyne Dubé, RRQ Éric Fontaine, DMR.
Before Starting…. Pour les passionnés, le cours de Xhtml en classe peut être complété par les références suivantes : Cours de Xhtml en ligne :
HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.
IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Formater du texte>Les titres Définir les titres HTML distingue 6 niveaux de titre : Titre N°1 Titre N°2.
Introduction à CSS Généralités. Introduction Beaucoup de documents XML sont destinés à être présentés. Les information du fichier seul (avec ou sans DTD)
T ECHNOLOGIES WEB CHAPITRE II : L E LANGAGE CSS Mme Amani JARRAYA & Mohamed MOHSEN 1.
HTML Cours 3.
GENIE MULTIMEDIA Restitution de documents CSS Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE
Part 3 & 4.  Toutes balises ouvertes se ferme ◦ Aucun accents ni espace ◦ Encore moins des majuscules  Il en va de même pour les noms de fichier.
Cour préparé par Melle Zineb SAALAOUI HTML/CSS.
Cascading Style Sheets CSS: Feuilles de Style en Cascade Feuille: Fichier-séparé.css Style: Design de votre Site Cascade: la Page d'accueil et les sous.
CSS et DREAMWEAVER.
24 octobre 2012 Grégory Petit
Language html VI- Les CSS. Les CSS CSS: Cascading Style Sheets. Feuilles de Styles en Cascade En typographie, une feuille de style désigne l'ensemble.
Mise en forme avancée et Publication. Le CSS Avertissement : vous ne devez pas maitriser le CSS juste savoir qu’il existe et à quoi il sert ! CSS signifie.
Dreamweaver Séance 1.
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.
Dreamweaver le retour Avec Les Formulaires Les Calques
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
Création de site web Feuilles de style.
Feuilles de style Cascading Style Sheets
Transcription de la présentation:

HTML CSS

HTML HTML est un langage Universel de description textuelle destinée à Internet. Le créateur d'une page WEB définit la structure ou l'organisation d'une page en utilisant des balises.

CSS Le World Wide Web a introduit les feuilles de styles en cascade pour compléter la langage HTML. Les CSS permettent de gérer l'apparence des documents. Les feuilles indiquent aux balises HTML leur comportement ou style.

Les styles Un style rassemble tous les attributs que l'on peut appliquer à des types de textes similaires. Attribut : taille,format Textes similaires : titres, en-têtes, pied de page Les styles donnent un nom commun à des groupes d'attributs

Les styles de Word Applique le style : Titre 1

Avantage du CSS Une CSS est constituée de code séparé qui améliore les possibilités du HTML en permettant de redéfinir la façon dont fonctionnent les balises HTML existantes. L'avantage par rapport à la création de nouvelles balises HTML repose sur le fait qu'en modifiant la définition d'une seule règle CSS centralisée, l'apparence de toutes les balises contrôlées par cette règles est modifiée.

Style dans la page <style type="text/css"> body { margin: 10px 0 ; padding: 0 ; text-align: center ; font: 0.8em "Trebuchet MS", helvetica, sans-serif ; background: indianred ; } </style>

Du HTML au CSS : Principe <HEAD> <TITLE>Le CSS</TITLE> </HEAD> <BODY> <H1>Introduction</H1> ... </BODY> </HTML> .HTML <link rel="stylesheet" type= "text/css" href= "fichier.css"> Le Résultat Introduction … Un document Html est toujours composé d’un corps où se place le contenu et d’un en-tête (entre balise HEAD) dans lequel va se placer le lien entre Html et une feuille de style css grâce à la balise link. Rel permet de spécifier une relation, stylesheet se rapporte à une feuille de style externe, le type de document lié est le style css mode texte, et href définit l’adresse du document css. Ici, on appelle la feuille fichier.css car la structure du document html et sa présentation sont gérées séparément. Dans cette feuille de style, on ajoute une règle de couleur à une balise html existante h1 qui sert à définir un titre de niveau 1. On obtient ainsi comme résultat, le titre introduction s’écrivant en rouge. Il s’agit d’un sélecteur simple, on a simplement appliqué un style (couleur rouge) à une balise html. Mais il existe d’autres types de sélecteurs pour définir des règles. @charset "iso-8859-1"; H1 { color : red ; } Sélecteur simple Fichier.CSS

Les règles Une règle définit l'apparence et le comportement du code HTML. Un règle indique à une balise HTML comment afficher son contenu. La création de règles générique permet également de les appliquer à plusieurs balises.

Syntaxes Selecteur { propriété: valeur;} Règle Sélecteur HTML définit la propriété attribut à définir

Syntaxes Les propriétés identifient ce qu'il faut définir. Elles caractérisent l'apparence du contenu. Les valeurs sont assignées à une propriété pour définir sa nature Vari Faux Nombre Pourcentage

Types de règles Les sélecteurs sont des caractères alphanumériques qu'identifie la règle. Sélecteur HTML La classe L'ID

Sélecteur HTML La partie textuelle d'une balise HTML est appelé sélecteur H1 est le sélecteur de <H1> Le sélecteur est exploité pour redéfinir le style de l'affichage de la balise.

Syntaxe générale utilisée Les styles d'une balise Sélecteur HTML Propriété Valeur p { font-size: 12px;} Définition

Propriétés héritées d'un parent Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style <body> <b color:red> <i> Denis </i> </b> </body>

Propriétés héritées d'un parent Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style <body> <b color:red> <i> Denis </i> </b> </body>

Propriétés héritées d'un parent Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style <body> <b color:red> <i> Denis </i> </b> </body>

Propriétés héritées d'un parent Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style <body> <b color:red> <i> Denis </i> </b> </body>

Propriétés héritées d'un parent Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style <body> <b color:red> <i> Denis </i> </b> </body> Denis times times + bold +red times + bold +red+italics

Définition de règles identiques pour plusieurs basiles Liste de sélecteurs séparés par les virgules Propriété Valeur h1,h2,h3,p { font-size: 12px;} Définition p { margin-top: 25px;}

Rappels Marge externe (Margin-top) Marge interne (Padding-right) Css Css Css Css Css Css Marge interne (Padding-right) Marge externe (Margin-left) Une boîte ou un bloc dénomme une surface précise placé sur une page. Généralement on placera ces boîtes dans un bloc conteneur qui sert de bloc parent pour tous les autres. Une boîte est composée d’un contenu du texte par exemple ici entouré par une bordure qui peut être invisible ou marqué comme ici les pointillés. Les marges externes forment un espace séparant la bordure de l'élément des autres éléments de la fenêtre, ici il rajoute un espace entre le bloc conteneur et la boîte. Enfin la zone des marges internes ajoute un espacement entre le contenu et le bord de la boîte. Les propriétés css permettent de spécifier les dimensions de ces espaces. Après avoir aborder rapidement les boîtes dans cette première section, la suite sera destinée à comprendre les fondamentaux du positionnement des boîtes. Marge interne (Padding-bottom) Bloc Conteneur

Exemple <H1> <H2> <H3>

h1 { margin: 30px ;color:#000000; border-right: 5px solid black ; border-top: 5px solid #000000 ; padding-left: 40%; margin-right: 10px ; }

h2 { padding-left: 25px ; border-top: 1px solid #ffffff; line-height: 25px ; font-size: 1.4em ; border-bottom: 2px solid #ffffff ; }

h3 { margin-left: 15px ; padding-left: 5px ; border-bottom: 1px solid #9b2 ; border-left: 3px solid #9b2 ; color: #9b2 ; }

TD body { margin: 50px 100px ; padding-right: 200px ; // et non 200 px; text-align: right ; color: #ffffff ; font: 1.5em helvetica, sans-serif ; background: indianred ; border-style: dotted; }

exemple : Mozilla

exemple : Mozilla margin: 50px 100px ;

exemple : Mozilla padding-right: 200px ;

exemple : Mozilla text-align: right ;

exemple : Mozilla border-style: dotted;

exemple : Explorer

Il faut respecter les balises body { margin: 50px 100px ; padding-right: 200px ; // et non 200 px; text-align: right ; color: #ffffff ; font: 1.5em helvetica, sans-serif ; background: indianred ; border-style: dotted; }

La classe Une classe est un style indépendant que l'on peut appliquer à toute balises HTML. Chaque classe se voit attribuée un nom unique spécifié ensuite dans la ou les balises HTML qui l'utilisé par le bias de l'attribut style. Les règles de classe peuvent être définies entre les balises <style> </style> dans l'en-tête ou dans un fichier CSSen ligne*. Elle permettent aux fonctions Javascript d'identifier un objet unique, elles sont très utilisées en DHTML. Les id sont comme les classes définit dans l'entête ou exportées d'un fichier CSS externe ou liés au document HTML.

Syntaxe générale d'une classe CSS Le sélecteur de classe permet de définir un style applicable à toute balise HTML. Une sous class possède un nom unique précédé d’un point.

Syntaxe générale d'une classe CSS Les styles d'une balise Sélecteur de classe Propriété Valeur .copy { font-size: 12px;} Définition utilisation <p class="copy"> … </p>

Exemple : sous class indépendante .nav {color:red;} <ul> <li class="nav">nom</li> <li class="nav">prenom</li> <li class="nav">age</li> </ul> Factorisation importante <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> <style> .nav {color:red;} </style> </head> <body> <ul class="nav"> <li>nom</li> <li>prenom</li> <li>age</li> </ul> </body> </html> <ul class="nav"> <li>nom</li> <li>prenom</li> <li>age</li> </ul>

héritage sous class indépendante .nav li{color:red;} <ul class="nav"> <li>nom</li> <li>prenom</li> <li>age</li> </ul> Cela va affecter tous les éléments li dans la classe .nav li sera enfant de la classe .nav <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> <style> .nav li{color:red;} </style> </head> <body> <ul class="nav"> <li>nom</li> <li>prenom</li> <li>age</li> </ul> </body> </html>

Ecriture .nav li{color:red;} <ul> <div class="nav"> <li>nom</li> <li>prenom</li> <li>age</li> </div> </ul> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> <style> .nav li{color:red;} </style> </head> <body> <ul> <div class="nav"> <li>nom</li> <li>prenom</li> <li>age</li> </ul> </div> </body> </html>

suite .nav ul ul{color:red;} <div class="nav"> <ul> <li>nom <ul> <li>dupont</li> <li>martin</li> </ul> </li> <li>prenom <ul> <li>denis</li> <li>gerard</li> </ul> </li> </ul> </div> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> <style> .nav ul ul{color:red;} </style> </head> <body> <ul> <li>nom <ul> <li>dupont</li> <li>martin</li> </ul> </li> <li>prenom <ul> <li>denis</li> <li>gerard</li> </ul> </li> </ul> <div class="nav"> <ul> <li>nom <ul> <li>dupont</li> <li>martin</li> </ul> </li> <li>prenom <ul> <li>denis</li> <li>gerard</li> </ul> </li> </ul> </div> </body> </html>

Sous class dépendante li.nav{color:red;} <ul> <li class="nav">nom</li> <li class="nav">prenom</li> <li class="nav">age</li> </ul> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> <style> li.nav{color:red;} </style> </head> <body> <ul> <li>nom</li> <li>prenom</li> <li>age</li> </ul> <br> <ul> <li class="nav">nom</li> <li class="nav">prenom</li> <li class="nav">age</li> </ul> <br> <br> </body> </html>

Sous class dépendante <div class="nav"> … </div>

Sous Class indépendante Bilan <BODY> <ul class="niveau1"> <li>Exemple 1</li> <li>Liste simple</li> </ul> <div class="italic_rouge"> Exemple 2 </div> </BODY> .HTML Le Résultat Exemple 1 Liste simple Sous Class dépendante Le sélecteur de classe permet de définir un style applicable à toute balise HTML. Une sous class possède un nom unique précédé d’un point. Dans cet exemple, on créer la sous class appelée niveau1 que l’on associe à la balise html ul (permet de créer des listes). Pour l’utiliser, dans le body on utilise l’attribut class dans la balise ul. On obtient ainsi une liste avec des puces carrées et le texte est bleu. Sous Class indépendante ul.niveau1 { list-style-type:square; color:blue; } .CSS .italic_rouge { color:red; font-style:italic; } .CSS

Du HTML au CSS : Sélecteurs <BODY> <ul class="niveau1"> <li>Exemple 1</li> <li>Liste simple</li> </ul> <div class="italic_rouge"> Exemple 2 </div> </BODY> .HTML Le Résultat Exemple 1 Liste simple Exemple 2 Sous Class dépendante Pour le 2nd exemple, italic_rouge est une sous classe indépendante cette fois car on peut l’employer avec n’importe quel balise html, ici on utilise la balise div qui permet de regrouper plusieurs éléments html. On obtient finalement un texte italique rouge. Il existe un dernier type de sélecteur, le sélecteur ID. Sous Class indépendante ul.niveau1 { list-style-type:square; color:blue; } .CSS .italic_rouge { color:red; font-style:italic; } .CSS

ID Très utile pour spécifierdes règles qui ne s'appliquent qu'à un élément avec un ID unique donné défini par l'attribut id en HTML. Pas plus d'un élément ne doit avoir un ID donné. utilisé avec Javascript pour repérer et traiter un élément particulier.

Syntaxe générale d'une ID des styles UNIQUE indépendants de toute balise HTML utilisation <p id="area"> … </p> Sélecteur d'ID Propriété Valeur #area { font-size: 12px;} Définition

Du HTML au CSS : Sélecteurs Le Résultat <BODY> <div id="bloc_unique"> Bloc A </div> </BODY> .HTML Bloc A Le sélecteur id L’élément devient unique, il est utilisé une seule fois dans la page. #bloc_unique { background-color:black; color:white ; } On lui spécifie un nom ici bloc_unique précédé du signe dièse #. Ensuite il peut être attribué à n’importe quel balise html comme le div mais il ne peut être utilisé qu’une seule fois dans la page. Maintenant que l’on a vu comment intégrer du css au page html, je vais donner quelques indications sur le modèle de boîte en css. .CSS

TD : voir exemple

<div id="sidebar"> <h4>Toutes mes photos <br> </h4> <ul> <li><a href="#">Berlin<br></a></li> <li><a href="#">Evry</a></li> <li><a href="#">Paris</a></li> <li><a href="#">NU york </a></li> <li> <a href="#"><img alt="..." src="photo.jpg" width=50px /> </a></li> </ul> </div>

background: url(arrow.gif) 100% 100% no-repeat; } div#sidebar { float: left; width: 23%; margin: 2em 0 0 2%; padding: 0 0 15px; background: url(arrow.gif) 100% 100% no-repeat; }

#sidebar ul { list-style: none; margin: 0; padding: 0 0 10px; border-right: 3px double rgb(50%,50%,35%); text-align: right; }

#sidebar a:hover { color: rgb(10%,20%,0%); border-color: rgb(98%,48%,40%); background: url(arrow2.gif) 0 100% no-repeat; padding-left: 15px; }

div#sidebar { float: left; width: 23%; margin: 2em 0 0 2%; padding: 0 0 15px; background: url(arrow.gif) 100% 100% no-repeat;} #sidebar ul { list-style: none; margin: 0; padding: 0 0 10px; border-right: 3px double rgb(50%,50%,35%); text-align: right;} #sidebar h4, #sidebar ul {margin: 0 6px 0 0;} #sidebar li { padding: 0.5em 0 0.25em; /* border-bottom: 1px solid rgb(84%,84%,69%); */} #sidebar a {text-decoration: none; padding: 0 0.5em 0 0; border-bottom: 1px solid rgb(84%,84%,69%);} les speudos selecteurs #sidebar a:link {color: rgb(20%,40%,0%);} #sidebar a:visited {color: rgb(58%,68%,40%);} #sidebar a:hover {color: rgb(10%,20%,0%); border-color: rgb(98%,48%,40%); background: url(arrow2.gif) 0 100% no-repeat; padding-left: 15px;}

Lecture <li class="submenu"> li a un attribut class de valeur submenu div#nav ul.niv1 li.submenu:hover ul.niv2 {} la liste de la classe niv2 qui descend d'un élément de liste survolé qui descend d'une liste niv1 qui descend d'un div id nav

Positionnement et Flux en CSS Vue d’ensemble des méthodes de positionnement

Le flux On oubliera les tableaux !

Les modes de positionnement Flux : ordre d’affichage des éléments 4 méthodes de positionnement normal float relatif absolu Quels sont les différences ? Le concept de flux indique le fait que toute boîte se place en priorité dans le coin supérieur gauche d’une page. Les boîtes sont placées dans un flux et non pas collé dans une grille. Il existe principalement 4 types de positionnement pour un élément, le positionnement normal, flottant, relatif et absolu. Je vais démontrer par l’exemple leurs fonctions et leurs différences en commençant par le mode par défaut, le positionnement normal.

Le Flux normal Bloc conteneur Bloc A Bloc B <BODY> <div class="conteneur"> <div class="normalA"> Bloc A </div> <div class="normalB"> Bloc B </div> </div> </BODY> .normalA { width:150px; height:150px; background-color:red; border:1px solid black; } .normalB { width:250px ; height:100px ; background-color:green; border:1px solid black; } Bloc conteneur Pour illustrer ce mode, on crée un bloc conteneur qui contiendra tous les blocs. Par défaut, le bloc A appelé sous classe normal A est inséré en haut à gauche, c’est le flux normal. On place un second bloc, le bloc B à la suite dans une autre balise div. Bloc A Bloc B

Le Flux normal : en bloc Bloc conteneur <BODY> <div class="conteneur"> <div class="normalA"> Bloc A </div> <div class="normalB"> Bloc B </div> </div> </BODY> .normalA { width:150px; height:150px; background-color:red; border:1px solid black; } .normalB { width:250px ; height:100px ; background-color:green; border:1px solid black; } Bloc A Bloc B Bloc conteneur Le navigateur traite successivement les 2 éléments rencontrés en les affichant verticalement. L’autre type de flux normal est en-ligne. Flux normal en bloc : Succession verticale

Le Flux normal : en ligne <BODY> <div class="conteneur"> <span class="normalC"> Bloc C </span> <span class="normalD"> Bloc D </span> </div> </BODY> .normalC { width:150px; height:150px; background-color:red; border:1px solid black; } .normalD { width:250px ; height:100px ; background-color:green; border:1px solid black; } Bloc conteneur De la même manière, on place les éléments dans un bloc conteneur. On crée 2 blocs : normal C et normal D différenciés par leurs couleurs. Le bloc C se place en haut à gauche. Mais en utilisant la balise span, le bloc D se place juste à côté sur la même ligne. Bloc C Bloc D

Le Flux normal : en ligne <BODY> <div class="conteneur"> <span class="normalC"> Bloc C </span> <span class="normalD"> Bloc D </span> </div> </BODY> .normalC { width:150px; height:150px; background-color:red; border:1px solid black; } .normalD { width:250px ; height:100px ; background-color:green; border:1px solid black; } Bloc C Bloc D Bloc conteneur Pour résumer, le flux normal en bloc ou en ligne effectue un traitement linéaire du contenu. C’est un positionnement plutôt statique contrairement au flottant. Flux normal en-ligne : Succession horizontale

Noter bien .bloc_relatif {position:relative;left:30px;} Sous le pont Mirabeau <div class="bloc_relatif"> div class="bloc_relatif" </div> La joie venait toujours après la peine </div> <span class="bloc_relatif"> span class="bloc_relatif" </span> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>test</title> <style> .conteneur {margin-top:20px;width:800px;border:1px solid black;} .bloc_relatif {color:white;position:relative;left:30px;border:1px solid black;background:blue;} </style> </head> <body> <div class="conteneur"> Sous le pont Mirabeau coule la Seine Et nos amours Faut-il qu'il m'en souvienne <div class="bloc_relatif"> div class="bloc_relatif" </div> La joie venait toujours après la peine </div> <span class="bloc_relatif"> span class="bloc_relatif" </span> <br> </body> </html>

Noter bien la différence : inline et bloc <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>test</title> <style> .conteneur {margin-top:20px;width:800px;border:1px solid black;} .bloc_relatif {color:white;position:relative;left:30px;border:1px solid black;background:blue;} </style> </head> <body> <div class="conteneur"> Sous le pont Mirabeau coule la Seine Et nos amours Faut-il qu'il m'en souvienne <div class="bloc_relatif"> div class="bloc_relatif" </div> La joie venait toujours après la peine </div> <span class="bloc_relatif"> span class="bloc_relatif" </span> <br> </body> </html> Succession horizontale Succession verticale

Le Flux flottant Bloc conteneur Boîte A – float:left <BODY> <div class="conteneur"> <div class="flotteA"> Boîte A </div> <p> Texte...blabla ... </p> </div> </BODY> .flotteA { float:left; width:500px; background-color:yellow; border:1px solid black; } Bloc conteneur La position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son conteneur. La boîte A définie en float left va logiquement se placer le plus à gauche possible dans le conteneur. Boîte A – float:left

Le Flux flottant Bloc conteneur Boîte A – float:left <BODY> <div class="conteneur"> <div class="flotteA"> Boîte A </div> <p> Texte...texte ... </p> </div> </BODY> .flotteA { float:left; width:650px; background-color:yellow; border:1px solid black; } Boîte A – float:left Texte…texte…text…texte … texte… texte…texte…texte…texte…texte…texte…texte…texte…texte…texte texte…texte…texte…texte…texte…texte…texte…text…texte…texte texte…texte…texte…texte…texte…texte…texte…text…texte…texte Bloc conteneur En ajoutant un paragraphe de texte, on observe que le contenu s’écoule le long de la boîte A pour occuper tout l’espace libre. Je vais maintenant vous montrer un autre exemple particulier pour comprendre une autre particularité des boîtes flottantes.

Bloc conteneur - 800px de large Le Flux flottant <BODY> <div class="conteneur"> <div class="flotteA"> Boîte A </div> <div class="flotteB"> Boîte B </div> </div> </BODY> .conteneur { width:800px; border:1px solid black; } .flotteA { float:left; width:650px; background-color:yellow; border:1px solid black; } .flotteB { float:left; width:100px; background-color:blue; border:1px solid black; } Bloc conteneur - 800px de large Cette fois ci je vais spécifier les dimensions pour comprendre le principe. Le bloc conteneur fait 800 pixels de large. On veut y placer 2 boîtes flottantes gauche : d’abord la boîte A faisant 650 pixels se place comme la boîte précédente. La croix indique le coin supérieur le plus à gauche disponible pour y placer la boîte suivante. Boîte A – 650px

Bloc conteneur - 800px de large Le Flux flottant <BODY> <div class="conteneur"> <div class="flotteA"> Boîte A </div> <div class="flotteB"> Boîte B </div> </div> </BODY> .conteneur { width:800px; border:1px solid black; } .flotteA { float:left; width:650px; background-color:yellow; border:1px solid black; } .flotteB { float:left; width:100px; background-color:blue; border:1px solid black; } Boîte A – 650px Bloc conteneur - 800px de large Sachant qu’il ne reste que 150 pixels de largeur libre, comment va se placer la boîte B ? Boîte B – 100px

Bloc conteneur - 800px de large Le Flux flottant <BODY> <div class="conteneur"> <div class="flotteA"> Boîte A </div> <div class="flotteB"> Boîte B </div> </div> </BODY> .conteneur { width:800px; border:1px solid black; } .flotteA { float:left; width:650px; background-color:yellow; border:1px solid black; } .flotteB { float:left; width:600px; background-color:blue; border:1px solid black; } Boîte A – 650px Bloc conteneur - 800px de large Sachant qu’il ne reste que 150 pixels de largeur libre, comment va se placer la boîte B ? Boîte B – 600px

Bloc conteneur - 800px de large Le Flux flottant <BODY> <div class="conteneur"> <div class="flotteA"> Boîte A </div> <div class="flotteB"> Boîte B </div> </div> </BODY> .conteneur { width:800px; border:1px solid black; } .flotteA { float:left; width:650px; background-color:yellow; border:1px solid black; } .flotteB { float:left; width:600px; background-color:blue; border:1px solid black; } Boîte A – 650px Boîte B – 600px Bloc conteneur - 800px de large A cause de sa largeur, la boîte B va directement se glisser en dessous par rapport à la nouvelle définition du coin rouge. Ce problème n’existe pas avec le flux relatif.

Le Flux relatif Bloc A Bloc conteneur Top – 20px Left – 30px <BODY> <div class="conteneur"> <div class="bloc_relatif"> Bloc A </div> css css css css... </div> </BODY> .conteneur { width:800px; border:1px solid black; } .bloc_relatif { position:relative; width:300px; margin-top:20px; margin-left:30px; border:1px solid black; } Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css css css Bloc A Top – 20px Left – 30px Nous sommes dans le bloc conteneur où l’on a placé un contenu texte pour illustrer les boîtes relatives. On y ajoute le bloc A appelé bloc relatif qui par défaut se place en haut à gauche comme dans le flux normal. La seule différence c’est que pour positionner cette boîte on va définir des propriétés de décalages avec margin-top et left. Dès que le décalage est effectué, le contenu suivant (ici du texte) ne sera pas chevauché par le bloc car il est décalé également vers le bas pour laisser l’espace au bloc. Voyons tout de suite la différence avec le flux absolu Bloc conteneur

Le Flux absolu Bloc A Bloc conteneur Top – 20px Left – 30px <BODY> <div class="conteneur"> <div class="bloc_absolu"> Bloc A </div> css css css css css... </div> </BODY> .conteneur { width:800px; border:1px solid black; } .bloc_absolu { position:absolute; width:300px; margin-top:20px; margin-left:30px; border:1px solid black; } Css css css css css css css css Css css css css css css css css Css css css css css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Bloc A Top – 20px Left – 30px On travaille toujours dans le même bloc conteneur avec du texte aussi. Le bloc A appelé bloc absolu se positionne en haut à gauche. Le principe de l’absolu est le même que pour le relatif, on place le bloc en décalant par rapport aux limites du bloc conteneur. Mais inévitablement, le bloc en position absolu recouvre le paragraphe et cette fois-ci il n’y a pas de décalage relatif par rapport au bloc. Maintenant que nous avons manipulé ces différentes méthodes, je vais vous montrer un exemple concret issu de mon site web. Bloc conteneur

Le Flux absolu <div class="bloc_absolu"> Bloc A </div> <BODY> <div class="conteneur"> css css css css css... <div class="bloc_absolu"> Bloc A </div> ddddddd…..dddd </div> </BODY> .conteneur { width:800px; border:1px solid black; } .bloc_absolu { position:absolute; width:300px; margin-top:20px; margin-left:30px; border:1px solid black; } On travaille toujours dans le même bloc conteneur avec du texte aussi. Le bloc A appelé bloc absolu se positionne en haut à gauche. Le principe de l’absolu est le même que pour le relatif, on place le bloc en décalant par rapport aux limites du bloc conteneur. Mais inévitablement, le bloc en position absolu recouvre le paragraphe et cette fois-ci il n’y a pas de décalage relatif par rapport au bloc. Maintenant que nous avons manipulé ces différentes méthodes, je vais vous montrer un exemple concret issu de mon site web.

Création d'un site Voici la page d’accueil d’un site. A priori tous semble homogène, la présentation est fluide. Elle est composée d’un en-tête en haut, d’un menu à gauche et le contenu se situe à droite. Mais en fait ce site utilise les méthodes de position css pour sa mise en page. Je vais détaillez rapidement comment elle est construite.

Bloc Header – flux normal Exemple complet Bloc conteneur Bloc Header – flux normal Tout le site est centré grâce à un bloc conteneur. Le bloc formant l’en tête est en position normal reglé pour occuper toute la largeur du conteneur.

Exemple complet Header_gauche - float left Header_droit – float left Pour placer une image à gauche et le titre du site à droite, j’ai imbriquer dans l’en tête, deux nouveaux bloc flottants gauche. Les largeurs sont spécifiées pour que les 2 blocs restent sur une même ligne.

Exemple complet Header_gauche - float left Header_droit – float left Bloc Menu Header – flux normal Un troisième bloc est imbriqué dans le bloc header spécifier en flux normal, il occupe tout l’espace disponible en dessous car sa largeur est spécifiée également.

Exemple complet Header_gauche - float left Header_droit – float left Bloc Menu Header – flux normal Bloc Menu - Float left Ensuite, le menu est en fait un bloc positionné en flottant gauche, donc il se place dans le coin le plus à gauche disponible juste en dessous du bloc header.

Exemple complet Header_gauche - float left Header_droit – float left Bloc Menu Header – flux normal Bloc Menu - Float left Bloc contenu – float right Enfin, le bloc contenu est défini en float right, il va logiquement occuper tout l’espace disponible à partir du point le plus à droite. Ce site montre concrètement le résultat d’un travail de positionnement sur le flux à travers toutes les méthodes que je vous ai montré.

Conclusion et Ouverture Liberté dans la mise en page des sites web. La présentation est beaucoup simple. Nombreux problèmes de compatibilité. Pour conclure, le positionnement en css a révolutionné la mise en forme des sites Internet en permettant une présentation beaucoup plus simple. Mais il reste encore des risques d’erreur de comptabilité entre les navigateurs car il n’interprète pas de la même manière. Je pense que le css a encore beaucoup d’avenir dans le développement web, l’arrivée du css2 a accélérée son élan qui va continuer avec le css3 et l’évolution du langage XML.