Slideshare.net (beta)

 
Post: 
Myspace Hi5 Friendster Xanga LiveJournal Facebook Blogger Tagged Typepad Freewebs BlackPlanet gigya icons



All comments

Add a comment on Slide 1

If you have a SlideShare account, login to comment; else you can comment as a guest


Showing 1-50 of 1 (more)

Atelier CSS ParisWeb 2007

From Mammouthland, 8 months ago

P.Lambert-Charreteur et R.Goetter se sont réunis pour proposer un more

673 views  |  0 comments  |  1 favorite  |  28 downloads
 

Groups/Events

Not added to any group/event

 
 

Privacy InfoNew!

This slideshow is Public

 
Embed in your blog
Embed (wordpress.com)
custom

Slideshow Statistics
Total Views: 673
on Slideshare: 673
from embeds: 0* * Views from embeds since 21 Aug, 07

Slideshow transcript

Slide 1: Atelier CSS Présentation Vos serviteurs.... Raphaël Goetter Sommaire AlsacréationS OpenWeb Le Flux Le positionnement absolu Le positionnement fixé Pascale Lambert- Le positionnement relatif Charreteur Le positionnement flottant CSS Débutant Ressources OpenWeb Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 1 contenu sous licence Creative Commons BY

Slide 2: Atelier CSS Positionnements CSS Le Flux Le Flux est le positionnement par défaut des éléments HTML. Sommaire Règle CSS : aucune  Le Flux L'ordre : celui du code html, c'est le Flux Courant  Le positionnement absolu Rendu  Le positionnement fixé en bloc (<p></p> ; <li></li> ; ...) ➔ « en-ligne » inline (<strong></strong> ; <em></em> ; ...) Le positionnement ➔ relatif Le positionnement flottant Ressources Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 2 contenu sous licence Creative Commons BY

Slide 3: Atelier CSS Positionnements CSS Positionner dans le Flux Gérer le positionnement dans le flux. Sommaire Notions de « Ancêtre », « Parent », « Enfant », « Frère »  Tout élément recevant la propriété « position: » est dit « positionné »  propriétés margin ; padding  Le Flux Élément parent Le positionnement Élément enfant absolu Le positionnement padding Lorem ipsum dolor sit fixé amet, consectetuer adipiscing elit, sed diam Le positionnement nonummy nibh euismod tincidunt ut laoreet dolore relatif magna aliquam erat volutpat. Ut wisi enim ad Le positionnement minim veniam, quis nostrud exerci tation flottant ullamcorper suscipit lobortis nisl ut aliquip ex Ressources ea commodo consequat. margin Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 3 contenu sous licence Creative Commons BY

Slide 4: Atelier CSS Positionnements CSS Le positionnement absolu Le positionnement absolu est une forme de positionnement hors du Flux. Sommaire Règle CSS : position : absolute;  Position dans le flux : sort du flux, mais positionné par rapport au   dernier « ancêtre » non positionné. Le Flux propriétés top, right, bottom et left.  Le positionnement Superposition possible  absolu Le positionnement fixé Le positionnement relatif Le positionnement flottant Ressources Crédit images : OpenWeb Group Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 4 contenu sous licence Creative Commons BY

Slide 5: Atelier CSS Positionnements CSS Le positionnement fixé Le positionnement fixé est une forme de positionnement hors du Flux. Sommaire Règle CSS : position : fixed;  Le Flux Le positionnement Position dans le flux : sort du flux  absolu Le positionnement fixé Spécificité : reste fixe à l'écran, sans scroll possible  Le positionnement relatif Implémentation MSIE : n'est implémenté qu'à partir que MSIE7  Le positionnement flottant Ressources Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 5 contenu sous licence Creative Commons BY

Slide 6: Atelier CSS Positionnements CSS Le positionnement relatif Le positionnement relatif est une forme de positionnement dans le Flux. Sommaire Règle CSS : position : relative;  Position dans le flux : reste dans le flux, mais peut être décalé.  Le Flux Le positionnement absolu Propriétés top, right, bottom et left.  Le positionnement fixé Interaction avec d'autres éléments  Le positionnement relatif Le positionnement flottant Ressources Crédit images : OpenWeb Group Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 6 contenu sous licence Creative Commons BY

Slide 7: Atelier CSS Positionnements CSS Positionnement flottant Le positionnement flottant est une forme de positionnement hybride. Sommaire Règle CSS : float : left; ou float : right; (pas de float: center !)  Position dans le flux :  Position par rapport à l'élément « parent » ➔ Le Flux « dépassement » du flux  ➔ Le positionnement Spécificités : hérite d'un rendu type « bloc », peut donc bénéficier de absolu  marges. Le positionnement fixé Le positionnement relatif Le positionnement flottant Ressources Crédit images : OpenWeb Group Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 7 contenu sous licence Creative Commons BY

Slide 8: Atelier CSS Quelques ressources utiles Sommaire Quelques ressources Le Flux Le positionnement utiles... absolu Le positionnement fixé Le positionnement relatif Le positionnement flottant Ressources Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 8 contenu sous licence Creative Commons BY

Slide 9: Atelier CSS Quelques ressources utiles Quelques ressources utiles Rubrique CSS officielle (W3C) : ➢ Sommaire http://www.w3.org/Style/CSS/ Traductions française des documents CSS du W3C : ➢ http://www.yoyodesign.org/doc/w3c/css2/cover.html Le Flux Initiation au positionnement CSS : 1.flux et position ➢ relative : Le positionnement absolu http://openweb.eu.org/articles/initiation_flux/ Le positionnement Initiation au positionnement CSS : 2.position float : ➢ fixé http://openweb.eu.org/articles/initiation_float/ Le positionnement Initiation au positionnement CSS : 3. position absolue et relatif ➢ fixe : Le positionnement http://openweb.eu.org/articles/initiation_absolue/ flottant Comment positionner les éléments en CSS ? Ressources ➢ http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 9 contenu sous licence Creative Commons BY