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 -


 •   Plan du site 
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 8 CSS 2  - place des blocs div  - body / en-tête  - menu / corps  - pied-de page  / place du site 



Cours 8 CSS 2.0 : place de div -
place du site web.



 © LigneWeb  ... /place des blocs et du site.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

La place des blocs div


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 




La place de tout bloc div en général.

... sur mon site web, je montre pratiquement tous les blocs ...
... ce qui permet d'apprendre par l'exemple ...
... dans la réalité, tous les différents blocs nécessaires ne se montrent pas ...
... ce qui ne veut pas dire qu'ils ne sont pas là ...
... la place du div, sa grandeur etc sont importants pour définir la place d'un texte, d'une image ...
... si j'enlève la couleur de fond, que je mette la bordure nulle, le bloc div disparait ...
... mais il a d'autres valeurs qui font qu'il est bien présent ...

... faisons l'essais en reproduisant le bloc précédant avec ses nouvelles données ...

... sur mon site web, je montre pratiquement tous les blocs ...
... ce qui permet d'apprendre par l'exemple ...
... dans la réalité, tous les différents blocs nécessaires ne se montrent pas ...
... ce qui ne veut pas dire qu'ils ne sont pas là ...
... la place du div, sa grandeur etc sont importants pour définir la place d'un texte, d'une image ...
... si j'enlève la couleur de fond, que je mette la bordure nulle, le bloc div disparait ...
... mais il a d'autres valeurs qui font qu'il est bien présent ...

... la seule chose que j'ai laissé, est l'ombrage ...
... et la couleur de fond est changée en "transparent" ...
... nous avons exactement la même disposition du texte ...

le code html :
C'est par l'ajout du style dans la balise que je change l'apparence.

Logique de construction des blocs :

... 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 ...

... il faut aussi aller voir ...  l'alignement des blocs  ... au cours 4 en css 2.0 ...
... avec l'alignement horizontal et vertical ...




La place de body :

... comme nous le savons, la balise body encadre toute la partie visible d'une page web ...
... il faut donc construire le style dans le fichier .css ...



... prenons l'exemple body de notre site :
... le nom du fichier sera par exemple : ... style.css ...
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .


... la place de body définit toute la page
• 1 La largeur width de 1024px.
• 2 Une marge externe nommée margin avec comme valeur auto permettant de la placer au centre de la fenêtre du navigateur.
     Si nous mettons un nombre 20px, le body sera éloigné de 20px du bord gauche de la fenêtre du navigateur.
     En d'autre terme, le site sera placé à gauche dans notre fenêtre.
• 3 Une marge interne nommée padding.
• 4 La bordure est nulle dans ce cas et ne se voit donc pas.
... nous ne mettons pas de hauteur pour garder la souplesse de la page ...
... chaque page pourra avoir le même gabarit, ce qui facilite la lecture ...
... lecture qui se fait par le navigateur, par les moteurs de recherche, mais aussi par l'internaute ...
... nous définissons par ces valeurs l'espace dans lequel vont se placer tous les autres blocs ...

La place de l'en-tête :

... la place de l'en-tête va donc se simplifier puisqu'elle se met au début dans body ...
... on pourait placer avant l'en-tête, un menu horizontal qui serait suivi par l'en-tête ...

... la largeur sera ... auto ... ce qui la place au centre de body ...
... la hauteur sera définie en général si cet en-tête est reproduite sur chaque page du site web ...



La place du menu :

... nous pouvons avoir deux sortes de menu : horizontal ou vertical ...

... horizontal :
... nous venons de le voir, il peut être mis avant l'en-tête ou après l'en-tête ...
... pour la deuxième solution, c'est la marge ... margin-bottom ... qui définira l'espace entre l'en-tête et le menu

... vertical :
... pour le vertical, il faut préciser la place : à gauche ou à droite ...
• à gauche : ... ce sera ... float-left ... qui sera utilisé ...
• à droite : ... ce sera ... float-right ... qui sera utilisé ...
... voir le cours 6 ...  création site : le menu  ...
... la largeur du menu est défini : ... width: 220px ...
... rappelons que l'élément flotant doit toujous être placé en premier ...
... par rapport à celui qui lui est associé en horizontal ...
... pas de hauteur à définir pour la souplesse ...
... mais une largeur doit être définie impérativement pour le menu vertical ...

La place du corps :

... nous pouvons avoir deux corps possibles : ...
... soit en partage avec un menu vertical ... soit tout seul ...

... en partage avec un menu vertical :
... comme le menu est définit en largeur, nous disons width: auto ...
... et avec margin-left: 250px qui se compte à partir du bord gauche de body ...
... avec une hauteur non définie... pour la souplesse ...
... il sera toujours écrit en seconde position ...
... l'élément flotant du menu vertical définit la place du corps dans ce cas ...

... le corps seul :
... il prendra les même valeurs que pour l'en-tête ... sans hauteur définie ...

Un dessin :


le schéma avec les mesures du gabarit d'un site web




La place du pied

... comme son nom l'indique il est le dernier élément de la partie visible ...
... il prendra toute la largeur disponible comme l'en-tête ...
... il prendra donc les valeurs essentielles de l'en-tête ...
... il s'écrit en dernier lieu pour la partie visible



La place du site.

Nous pouvons choisir la place de notre site web dans la fenêtre du navigateur ...

Nous pouvons également penser à la manière dont il apparaîtra sur une tablette grande ou petite ...

Nous devons également voir comment il apparaît sur tous les navigateurs existants ...

et sur tous les systèmes ... avec en tête l'idée de son adaptabilité dans le temps ...

Avec l'évolution permanente ... la souplesse est toujours payante ...

... design 3 D ...

... à + ... ☺☀☁☃☂☺❄❦∛∞✐☏✉ …☺ ...

(... traduction du code : ... tout va bien ... malgré ... etc. ...)

... plein de courage donc pour votre site web ... :)
...     © 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 

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