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 6 CSS 2  - coupures du menu  / coupures du corps 



Cours 6 CSS 2.0 : des coupures



 © LigneWeb  ... coupures menu et corps.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Coupures du menu et du corps
... 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 






... il est intéressant de voir comment réaliser ces séparations ...
... en gardant la cohérence ... le menu restant à gauche ... et le corps à droite ...

Coupures du menu.

... on va d'abord s'occuper de préciser la place du menu à gauche ...
... il se place naturellement sous l'en-tête ... ceci est fonction de la logique que nous rappelons ci-dessous ...

... 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 … “Coupures du menu et du corps en XHTML.“
... sur la même ligne ...


... et l'élément principal qui permet de le mettre à droite est ... float: right; ...
... comme nous venons de le voir ... left : à gauche ... right : à droite ...
... ceci est important pour la compréhension de la suite ...



Une coupure dans ce menu

⇐    ... nous voyons ... à gauche ... la coupure du menu ... que nous décriptons maintenant ...

①. ... nous clotûrons le menu par la balise sortante ... comme s'il était terminé ...
②. ... on ouvre à nouveau le menu ... ce qui pose un problème ...

... comme le menu est flotant ... il faut lui donner sa nouvelle place ...
... car sinon, il se placerait à côté du premier et jamais sous le premier ...

③. ... on lui met ... : ... margin-top:1600px; ...
④. ... mais comme il ne se place pas sous le premier menu ...
... il faut le ramené près du bord gauche avec ... : ... margin-left:-190px; ...
.... et si on met une bordure de 1px, ... il faut ajouter 2px à cette valeur ...
... ce qui nous donnera dans ce cas ... -192 px .... pour ... margin-left ....

Structure

... la double coupure du menu avec le contenu ...



Les autres menus :

... la même méthode sera utilisée pour les différents menus qui se placerais sous ce deuxième ...

... il est donc possible de couper le menu en plusieurs parties ...

... mais cette coupure coupe totalement les deux menus ...
... ce qui permet à une image de fond sortant du body de se montrer entre ces deux menus ...

... nous pouvons créer du volume ... ce qui crée un effet ...  trois D  ...
... grâce à l'ombrage réalisé pour le bloc menu ...

... nous utilisons les nouvelles propriétés du ... CSS 3 ... (voir ...   l'introduction au css 3   ...)
... avec l'aide des nouveaux sélecteurs ... mais cela nous enlève la conformité du ... W3C ...
... en n'oubliant pas de travailler avec le ... XHTML transitionnel ...




Coupures du corps.

... le corps est invisible dans notre exemple ... ces attributs sont bien réels ...
... les valeurs sont cachées ... mais sont identiques au premier bloc [bloc] ...
... quand je parle de coupure de corps, c'est ce que je vois ...
... la balise prenant la place de la balise corps est la balise bloc ...

... on va d'abord s'occuper de préciser la place du corps à droite ...
... dans lequel seront placés les différents [blocs] les uns en dessous des autres ...

... un petit rappel pour commencer : ...

... 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 … “Coupures du menu et du corps en XHTML.“
... sur la même ligne ...


... et l'élément principal qui permet de le mettre à droite est ... margin-left: 209px; ...
... ce qui va placer le corps à droite du menu ...





... la coupure du corps [bloc] ... que nous décriptons maintenant ...


... nous voyons cette coupure du corps [bloc] ci-dessus ...    ⇧


①. ... nous clotûrons le corps [bloc] par la balise sortante [bloc] ... comme s'il était terminé ...
②. ... on ouvre à nouveau le corps [bloc] ... ce qui pose un problème ...

... comme le menu est flottant ... et que le corps [bloc] est placé à droite du menu ...
... on respecte sa place en gardant ... : ... margin-left:209px; ...

③. ... on lui met ... : ... margin-top:70px; ...
... pour mettre un espace avec le premier corps [bloc] ...
④. ... le corps [bloc] ne doit recevoir aucun rectificatif pour sa place ...
... car il est toujours définit comme flottant ...


... la double coupure du corps [bloc] avec le contenu ...

Le fichier css correspondant est :

... les deux balises permettant cette astuce : ...
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .



... on voit que le corps est en largeur ... auto ... avec un padding de zéro ...
... on remarque que le margin-left est de ... 219px; ... comme le bloc ...
... et surtout le corps n'a pas de bordure, ni de couleur (transparent) ... contrairement au bloc ...
... ce qui permet d'avoir une coupure du corps sans les inconvénients ...
... et de réaliser un ... effet 3D ...





Les autres corps [bloc] :

... la même méthode sera utilisée pour les différents corps [bloc] qui se placerais sous ce deuxième ...

... il est donc possible de couper le corps [bloc] en plusieurs parties ...

... mais cette coupure coupe totalement les deux corps [bloc] en apparence ...
... ce qui permet à une image de fond sortant du body de se montrer ...
... et de créer l'effet 3D entre ces deux corps [bloc] ...

... nous pouvons créer du volume ... ce qui crée un effet ...  trois D  ...
... grâce à l'ombrage réalisé pour le bloc corps [bloc] ...


... nous utilisons les nouvelles propriétés du ... CSS 3 ... (voir ...   l'introduction au css 3   ...)
... avec l'aide des nouveaux sélecteurs ... mais cela nous enlève la conformité du ... W3C ...
... en n'oubliant pas de travailler avec le ... XHTML transitionnel ...



... 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  - Cours HTML 5  - Cours 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