Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 MENU CSS 2  - info css  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8 
 Menu cours 4 CSS 2  - styles des blocs  - padding  - margin  / alignement de blocs 
 ➽ ➽ ➽   place du menu horizontal 
 ... un menu horizontal ... le menu du cours et de cette page ... entre l'en-tête et le menu vertical ... à voir ... ⇧ 



Cours 4 CSS 2.0 : style des blocs



 © LigneWeb  ... blocs(div): border,margin,padding
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Style des blocs en XHTML


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Description :


... le texte va être aligné dans les paragraphes et dans les blocs de texte ...
... ceci se définit dans les CSS en tant qu'attribut ou propriété dans les ... p ... et les ... div ...
... et la manière de l'exprimer se fait par ... text-align: ...
... mais, où va commencer le texte à l'intérieur du bloc ? ...
... et se terminer à quelle distance du bord droit, si la phrase est suffisamment longue ...
... considérons un bloc rectangulaire, ... dans lequel il y a un texte ...
... une ligne (border) de 1 pixel (border=1px) ... délimite ce bloc ...
... à l'intérieur, ... la distance entre la ligne et le texte s'appelle ... padding ...
... à l'extérieur, ... la distance entre la ligne et le reste des éléments externes s'appelle ... margin ...



Padding :

Padding unique :

... nous avons donc un bloc, avec une couleur de fond, une bordure ...
... il ne faut pas tenir compte des arrondis et de l'ombrage ...
... mettons un texte ( de remplissage ) dedans ... avec un ... padding: 10px ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

... un espace existe entre le texte et la bordure ...
... cet espace est nommé ... padding ... et je vais augmenter celui-ci ...
... avec une valeur : ... padding: 20px ... et voyons ce que cela donne : ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

... nous voyons tout de suite la différence entre les deux blocs ...
... et il y a quatre padding ... à gauche, à droite, au dessus et en dessous ...

Padding différents :

... reprenons notre bloc de texte et mettons des padding différents pour chaque côté ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

... on remarque tout de suite la différence ...
... il y a l'espace à gauche: ... padding-left: 40px; ...
... il y a l'espace au dessus: ... padding-top: 20px; ...
... il y a l'espace à droite: ... padding-right: 10px; ...
... il y a l'espace en dessous: ... padding-bottom: 5px; ...



Margin

Margin unique :

... si nous continuons à regarder le même bloc vu précédemment, on peut voir qu'il y a un espace qui l'entoure ...

... cet espace est appelé ... margin ... représentant une marge, tout autour ...
... reprenons notre bloc ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

... le trait pointillé représente la marge du bloc texte ...
... la marge tout autour est de 20px ...
... quand la marge est identique sur les quatres côtés, on dit ... margin: 20px; ...
... pour ce bloc de texte nous avons : ... padding: 20px; margin: 20px; ...

Margin différents :


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

... nous voyons ici des marges différentes pour les différents côtés ...
... il y a une marge à gauche : ... margin-left: 20px; ...
... il y a une marge au dessus : ... margin-top: 10px; ...
... il y a une marge à droite : ... margin-right: 10px; ...
... il y a une marge au dessous : ... margin-bottom: 5px; ...
... c'est la même manière d'écrire que pour padding ...

... fenêtre sur l'univers ...          © design : LigneWeb


... une traduction pour être sûr de leurs significations : ...
... left : ... à gauche ...
... top : ... le haut ...
... right : ... à droite ...
... bottom : ... le bas ...
... il faut respecter l'ordre en suivant le sens des aiguilles d'une montre ...
... il faut absolument commencer par ... left ...
... ou par le général suivi éventuellement par left ... etc. ...



Structure :

... maintenant mettons tout cela ensemble et cela va donner :
... le nom du fichier sera par exemple : ... style.css ...



Alignement de blocs.

Alignement vertical :

... comment peut-on réaliser l'alignement de deux ou plus de blocs se trouvant ...
...  l'un en dessous de l'autre  ...

... c'est soit par leur marge à gauche ...
... soit par leur position dans un bloc plus important ...
... soit par ces deux réalités ensembles, ... car chaque bloc a ces marges ...

... la plus évidente est la position par rapport à un bloc plus important ...
... tel que le corps ou le menu ...
... il sera à gauche ... (left) ... avec sa marge gauche ...
... il sera centré ... avec sa largeur identique : ... margin: auto; ... par exemple ...
... il sera à droite ... (right) ... avec sa marge droite ...

Alignement horizontal :

... comment peut-on réaliser l'alignement de deux ou plus de blocs se trouvant ...
...  l'un à côté de l'autre  ..

... c'est soit par leur marge supérieure ...
... soit par leur position dans un bloc plus important avec un padding de ce dernier ...
... soit par ces deux réalités ensembles, ... car chaque bloc a ces marges intérieures et extérieures ...

... si l'on prend le bloc menu et le bloc corps ... nous comprenons ...
... qu'il y a trois dimensions à respecter ... :

• 1 ... la notion de floating entre deux blocs ... ( voir le cours ...  création 2  ... pour float )
• 2 ... le margin supérieur identique pour les deux blocs ... par rapport à un bloc supérieur ...
• 3 ... et parce que la construction d'une page se fait de ... haut ... en ... bas ...
... c'est le bloc .. en-tête ... qui définit la position horizontale des blocs ...
... menu ... et ... corps ... se trouvant en dessous ...
...  même s'ils s'écrivent l'un en dessous de l'autre  ...

Logique de construction du menu et du corps :

... la ...  construction d'une page web  ... se réalise de ...  haut en bas  ... pour définir les blocs ...
... et de ...  gauche à droite  ...

... c'est avec le ...  style en CSS 2.0 dans un fichier externe  ...
... que nous pourrons définir la place de chacun d'eux ...
... ( voir le cours sur  la création d'un site web  et les pages suivantes ) ...

... pour toute aide complémentaire, n'ayez pas peur de contacter le ...
...  webmaster 
...

... de ... gauche à droite sauf ... pour ... l'élément flottant ...
... qui sera toujours placé en premier, ... qu'il soit à gauche ou à droite ...
... un exemple qui est ...  l'image flottante à droite  ... placée en premier …
… avec le titre … “Style des blocs en XHTML.“
... sur la même ligne ...




Place du menu horizontal.

... la place du menu horizontal se situe directement sous le bloc en-tête ...
... il est lui-même constitué de boutons ... qui sont de petits blocs ...
... la place de chacun d'eux doit se définir au préalable ... pour pouvoir les placer les uns à la suite des autres ...
... ils peuvent être : ...

• 1 ... à gauche, ... le premier bouton sera ... float: left; ...
• 2 ... au centre ... comme pour le texte centré avec ... align: center; ...
• 3 ... à droite ... le premier bouton sera ... float: right; ...
... le corps sera donc définit par la place du menu horizontal ...
... il se mettra naturellement à la suite du bloc menu ...
... nous pouvons  voir ci-dessous le bloc menu  ... qui prend toute la largeur du site ...
... j'enlève sa couleur de fond ... en mettant la couleur de fond de body ...
... et je lui mets  une bordure de 1px  ... pour montrer sa place ...
... nous voyons les petits blocs centrés ...
... si je n'en mets qu'un seul, il sera centré ...
... ce menu est sous le corps et avant le pieds de page ...
... il en va de même pour le menu horizontal sous l'en-tête ... évidemment ...
... le HTML5 ... va apporter une clarification pour la lecture de ces balises : ...

... en utilisant une première balise ...  <menu>  ... pour le menu vertical de cette page ...
... et en se réservant une autre balise spécifique ...  <nav>  ... pour le menu horizontal ...
... les moteurs de recherche auront une plus grande facilité de lecture ... et de compréhension ...
... pour le référencement ... sachant qu'un robot ... (une machine) ...
... travaillant à une grande vitesse ... ne peut pas résoudre ces problèmes facilement pour le moment ...
... nous voyons ces balises à la page ...  d'information sur le HTML5  ...

... voir également le ...  menu horizontal  ...

... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 MENU CSS 2  - info css  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours  CSS 2  - Création site  - Info HTML 5  - Info CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 
  un autre menu horizontal ... celui des pages du cours et du site ... entre le corps et le pied de page  

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies