1. L'auteur : Olivier Legrand
1.1. Formateur du Web
1.2. Olivier Legrand - Concepteur pédagogique multimédia
2. Le positionnement en CSS
2.1. Menu flottant
2.1.1. Dans la CSS
2.1.2. nav
2.1.3. Section
2.2. Transfomation
2.2.1. Block Vs Inline
2.2.1.1. display: block;
2.2.2. Inline Vs Block
2.2.2.1. display: inline;
2.2.3. Supprimer une balise
2.2.3.1. display: none;
2.2.4. Exemple
2.3. Menu flottant
2.3.1. section
2.4. Les inline-block
2.4.1. 2 blocks cote à cote
2.4.2. Nav
2.4.3. Section
2.5. Absolue
2.5.1. Position: absolute;
2.5.2. Exemple
3. Créer les blocks
3.1. Menu flottant
3.1.1. Dans la CSS
3.1.2. nav
3.1.3. Section
3.2. Transfomation
3.2.1. Block Vs Inline
3.2.1.1. display: block;
3.2.2. Inline Vs Block
3.2.2.1. display: inline;
3.2.3. Supprimer une balise
3.2.3.1. display: none;
3.2.4. Exemple
3.3. Menu flottant
3.3.1. nav
3.3.2. section
3.4. Les inline-block
3.4.1. 2 blocks cote à cote
3.4.2. Section
3.5. Absolue
3.5.1. Position: absolute;
3.5.2. Exemple
4. Structurer sa page
4.1. <header> </header>
4.1.1. Entoure une section d'entête
4.2. <nav> </nav>
4.2.1. Englobe un menu de navigation
4.3. <section> </section>
4.3.1. Englobe une portion de la page
4.3.1.1. <article> </article>
4.3.1.2. <aside> </aside>
4.4. <article> </article>
4.4.1. Représente une portion de texte
4.5. <aside> </aside>
4.5.1. Donne des infos sur le texte à coté
4.6. <footer> </footer>
4.6.1. Le pied de page du site
4.7. Exemple
4.8. Important :
4.8.1. Les balises ne positionnent pas les éléments
4.8.2. C'est le CSS qui positionne les éléments
4.8.3. Ces balises ne sont pas reconnues version < IE9
4.8.4. Un code java script permet de les rendre compatibles < IE9
5. Les modèles des blocs
5.1. 2 types de balises
5.1.1. BLOC
5.1.1.1. Exemple
5.1.1.1.1. <h1>, <p>, <aside>, <article> <section> <div> <table>
5.1.1.2. Représente un bloc de contenu
5.1.1.3. Ils s'écrivent à la suite des autres
5.1.2. INLINE
5.1.2.1. Les balises Inline
5.1.2.1.1. Sont à l'intérieur d'un block
5.1.2.1.2. Elles suivent le flux du texte
5.1.2.2. Exemple
5.1.2.2.1. <a>, <em>, <strong> <span> <b> <img>
5.2. Taille du Bloc
5.2.1. Largeur
5.2.1.1. width: 50%;
5.2.1.2. min-width: 300px;
5.2.1.3. max-width: 600px;
5.2.2. Hauteur
5.2.2.1. height: 50%;
5.2.3. Exemple
5.3. Les marges
5.3.1. Extérieur
5.3.1.1. Marge extérieur de l'élément boîte
5.3.1.2. margin:
5.3.1.2.1. auto
5.3.1.3. margin-top
5.3.1.3.1. supérieure
5.3.1.4. margin-right
5.3.1.4.1. droite
5.3.1.5. margin-left
5.3.1.5.1. gauche
5.3.1.6. margin-bottom
5.3.1.6.1. bas
5.3.2. Intérieure
5.3.2.1. Marge intérieure de l'élément boîte
5.3.2.2. padding:
5.3.2.2.1. auto
5.3.2.3. padding-top
5.3.2.3.1. supérieure
5.3.2.4. padding-right
5.3.2.4.1. droite
5.3.2.5. padding-left
5.3.2.5.1. gauche
5.3.2.6. padding-bottom
5.3.2.6.1. bas
5.3.3. Exemple
5.4. Centrer un block
5.4.1. margin: auto;
5.4.2. Il faut dans la CSS cette balise
5.4.2.1. width: 400px;
5.5. Gestion du texte
5.5.1. overflow: hidden;
5.5.1.1. masque le texte qui dépasse dans le block
5.5.2. overflow: auto;
5.5.2.1. ajoute un scroller pour naviguer dans le block