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  - Création site  - créer 1  - créer 2  - créer 3  - créer 4  - créer 5  - créer 6  - créer 7  - créer 8  - créer 9 
 Menu création site 2  - float  - menu  - corps  - pied 



La Création d'un site web.
Cours 2 : les fichiers (suite).



 © LigneWeb  ... /création site: float-menu-corps-pied.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Place des blocs
dans une page web



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


... sur la figure 1 ... nous pouvons voir que le menu et le corps sont sur une ... même ligne ...
... ils sont aussi ... l'un à côté ... de l'autre et séparé par un espace ...
... ils sont tous les deux sous l'en-tête à une même distance (hauteur) ...

... nous savons également que le menu est décrit juste après l'en-tête ...
... comment arriver à ce qu'il soit à gauche, ... et à une certaine distance du bord gauche ? ...
... c'est dans la feuille de style que nous allons le préciser ...


... mais avant de préciser les éléments permettant de répondre à cette question ...
... nous allons compléter le fichier ... test.html ... en ajoutant les balises ... menu ... et ... corps ...


... le voila complété …

... pour préciser que le ... menu ... se trouve à gauche ...
... nous allons utiliser l'attribut ... float ... et préciser à gauche ...
...  float: left;  ...

... style.css …

... nous avons donc une page qui a :
  • ... 500px de largeur,
  • ... 700px de hauteur,
... dans laquelle il y a un en-tête de :
  • ... 494px de largeur,
  • ... 100px de hauteur,
... suivi du bloc menu avec :
  • ...  float: left 
  • ... avec margin-left: 5px,
  • ... 100px de largeur,
... et le corps à droite du menu avec :
  • ... auto en largeur,
  • ...  margin-left: 120px, 
... et le pied en dessous prenant toute la largeur :
  • ... auto en largeur,
  • ... 50px en hauteur.


... la largeur ... auto ... (automatique), permet toujours au corps de s'adapter exactement à la largeur totale de la page ...
... nous avons ... margin-left ... qui est de 120px du bord gauche de la page ( le menu étant flottant) ...
... 120px parce qu'il faut laissé la place au menu, ... aux marges du menu, ... à la bordure de 1px de part et d'autres du menu ... et à la bordure du corps lui-même ...

... pour mettre le menu à droite, ... il faut définir ... margin-right ... en premier ... suivi du corps ...


... une marge de sécurité est nécessaire, car les navigateurs ne calculent pas tous de la même manière la largeur et la bordure !! ... (Explorer 6, par exemple) ...





La place du pied


... pour le ... pied ... il s'adapte aussi à la page ... en étant en largeur automatique ...
... mais lui va prendre toute la largeur de la page ...

... il ne faut donc pas que le ... menu ... soit plus long (hauteur) que le ... corps ...
... car sinon ils s'imbriquent l'un dans l'autre ...

... il est parfois nécessaire d'utiliser le ... saut à la ligne ... <br /> ...
... en nombre important pour remettre à des niveaux corrects des blocs ... qui sinon se dérangeraient ...

... dès que l'on change les éléments (texte ou image, etc) dans un bloc, il y a répercution immédiate sur le tout ...
... (sur d'autres blocs avec un déplacement de certains, ... ou bien le texte qui dépasse le cadre ) ...


... pouvoir aller dans le code pour réparer les perturbations créées, ... c'est acquérir de l'autonomie ...
... ce que nous vous proposons ici ...


....autre regard ...



... nous découvrons ici le 3D au travers de la persienne ...
... réalisée en CSS 3 dans du CSS 2 car ...
... il existe des sélecteurs qui facilitent cette intégration ...
... qui restent toujours nécessaires en HTML 5 ...
... voir le cours :  Des sélecteurs pour navigateurs  ...



... design 3 D ...

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





 MENU  - Création site  - créer 1  - créer 2  - créer 3  - créer 4  - créer 5  - créer 6  - créer 7  - créer 8  - créer 9 
  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