Mise en page est le processus de développement de la structure d'un document HTML, dont le résultat est une page Web. La structure d'une page Web est déterminée par les balises HTML correspondantes. Les balises - blocs conteneurs rectangulaires pour le contenu - n'apparaissent pas dans la fenêtre du navigateur. Ils indiquent au navigateur le type de contenu et le navigateur, sur la base de ces informations, affiche leur contenu - fichiers texte ou multimédia.

Comment créer une structure de page à l'aide de blocs (mise en page par blocs)

1. Comment diviser votre mise en page en sections

Pour créer une mise en page, vous devez sélectionner les sections principales (sections) du document. Vous pouvez en savoir plus sur les éléments sectionnels dans l'article.

Une page Web standard contient les sections suivantes :

Riz. 1. Sections principales de la page

Nous n'utiliserons pas l'élément car il n'est pas pris en charge par tous les navigateurs.

Éléments,

et sont basés sur des blocs, ils occuperont donc toute la largeur de leur élément de bloc conteneur. Une page avec cette mise en page aura fière allure sur les petits écrans, mais sur les appareils haute résolution, le texte de ces pages sera difficile à lire. Par conséquent, il est nécessaire d'ajouter une balise conteneur pour le contenu - le contenu de chaque section :

Riz. 2. Sections principales de la page avec une balise conteneur

et définissez pour cela la largeur maximale, le remplissage interne, qui séparera le contenu des bords de l'écran des appareils à basse résolution, ainsi que le remplissage externe, qui vous permettra d'aligner le conteneur au milieu du bloc parent :

Conteneur (largeur : 100 % ; largeur maximale : 1 024 px ; /*la largeur maximale peut avoir une valeur différente*/ padding : 0 15px ; marge : 0 auto ; )

Ainsi, nous avons reçu un cadre pour notre page (la hauteur des sections dans ce cas est virtuelle, puisque sans contenu les sections ont une hauteur nulle).

2. Disposition de l'en-tête du site et positionnement de ses éléments

Commençons par baliser la première section, ce qu'on appelle l'en-tête de la page Web. L'élément est conçu pour regrouper des informations introductives et des aides à la navigation sur une page/un site. Ajoutons le logo du site et les liens de navigation à l'intérieur de la balise :

Riz. 3. En-tête du site Web avec logo et liens ajoutés

Logo ( float: left; ) nav ( float: right; ) nav ul ( margin: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; /*une façon de placer des éléments dans un doubler */ )

Il existe plusieurs façons de placer des éléments de bloc dans une rangée. Tous sont donnés dans la leçon.

Riz. 4. L'effet de l'effondrement du bloc de conteneurs

Notez qu'après avoir appliqué le wrap, l'en-tête a disparu. Cela s'est produit parce que les éléments flottants (ceux qui ont la propriété float définie) sont supprimés du flux normal et que le conteneur parent ne voit plus leur hauteur, de sorte que l'élément et l'élément à l'intérieur avec la classe .container se sont effondrés. Pour résoudre cette situation, utilisons le nettoyage de flux pour un élément avec la classe .container :

Conteneur:après ( contenu : " ; affichage : tableau ; effacer : les deux ; )

Nous y ajouterons également un remplissage vertical, séparant les éléments à l'intérieur des bords de l'en-tête. En conséquence, les styles ressembleront à ceci :

Conteneur (largeur : 100 % ; largeur maximale : 1 024 px ; remplissage : 15 px ; marge : 0 auto ; )

Riz. 5. Nettoyage des flux

Considérons une situation dans laquelle une image sert de logo. Il peut être ajouté directement à l’intérieur de la balise ou comme image d’arrière-plan. L'image aura sa propre hauteur, qui peut être très différente de la hauteur du menu de navigation, nous serons donc confrontés au problème de l'alignement vertical des éléments d'en-tête.

Riz. 6. Image du logo

Dans notre exemple, la hauteur du logo est de 38 pixels, donc pour aligner les liens de menu au milieu de l'en-tête, vous devez les définir sur la hauteur de ligne appropriée :

Nav a (texte-décoration : aucun ; hauteur de ligne : 38px ; ) Fig. 7. Alignement des liens du menu d'en-tête

3. Créez une grille pour la partie principale de la page

La partie principale de la page est le plus souvent une grille de blocs de différentes largeurs. Le positionnement de ces blocs se fait également à l’aide de la propriété float. Nous allons envelopper chaque ligne de blocs avec un bloc supplémentaire avec la classe .row :

Riz. 7. Grille de la partie principale de la page.col-1-2 ( width: 50%; float: left; ) .col-1-3 ( width: 33.3333333333%; float: left; ) .col-1-4 ( largeur : 25 % ; float : gauche ; ) .col-2-3 ( largeur : 66,6666666667 % ; float : gauche ; )

Pour un élément de classe .row, nous appliquons également le nettoyage de flux :

Conteneur : après, .row : après ( contenu : " ; affichage : tableau ; clair : les deux ; )

Pour séparer les lignes les unes des autres, vous pouvez ajouter une marge inférieure :

Ligne (marge inférieure : 15 px ; )

La hauteur des blocs de grille est déterminée par la hauteur de leur contenu, elle peut donc être différente :

Riz. 8. Différentes hauteurs d'éléments de grille

La hauteur des blocs peut être fixée en la spécifiant explicitement, par exemple, .row div (height: 100px) . Mais dans ce cas, vous devez vous assurer que lors de l'ajout d'adaptabilité à la mise en page, le contenu des blocs ne s'étendra pas au-delà du bord du bloc.

Si vous devez définir la couleur d'arrière-plan des blocs d'une ligne, cela peut être fait comme suit : pour un élément avec la classe .row, ajoutez une nouvelle classe qui vous permettra de styliser uniquement cette ligne (il s'avère . rangée rangée-un), spécifiez pour cela la couleur d'arrière-plan d'un bloc plus petit en hauteur , et pour le bloc haut, nous définirons sa propre couleur, c'est-à-dire que nous créerons ainsi un arrière-plan d'arrière-plan.

Lorem ipsum dolor sit amet.

Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.

Première rangée (arrière-plan : bleu clair ; ) .col-2-3 (largeur : 66,6666666667 % ; flotteur : gauche ; arrière-plan : coquillage ; )

Riz. 9. Fond mat

Si la section principale de la page ne contient que deux blocs, la ligne wrapper supplémentaire ne peut pas être ajoutée :

4. Disposition du pied de page

Le pied de page, ou pied de page, contient généralement des informations sur les droits d'auteur, des liens supplémentaires, etc. Toutes ces informations sont également placées dans des colonnes, qui peuvent avoir des largeurs identiques ou différentes.

Je pense que beaucoup d'entre vous ont déjà remarqué que la tendance inclut désormais de plus en plus d'éléments de conception collants qui restent visibles lorsque l'utilisateur fait défiler la page. À mon avis, c'est très pratique, surtout s'il s'agit de navigation sur un site. C’est exactement l’exemple que nous ferons aujourd’hui. Nous apprendrons comment créer un en-tête de site Web animé en utilisant JQuery et CSS3 avec animation.

Comme d'habitude, cela s'avère se faire en un minimum de lignes de code et c'est très simple, et en même temps très efficace. Eh bien, commençons maintenant la leçon.

Mais je voudrais d’abord dire un immense merci à http://www.webdesignerdepot.com et maintenant commençons.

Ι

HTML

Le code HTML est très, très simple, il suffit de définir les balises, puis d'écrire le contenu du site entre elles :

En-tête du site joint

Puisqu'il s'agit de l'exemple le plus simple, nous avons simplement ajouté ici du texte entre les balises h1, mais vous pouvez également utiliser des images ou, par exemple, la navigation sur le site.

Code jQuery

CSS est aujourd’hui le meilleur moyen d’implémenter des animations et des transitions. Nous utiliserons donc un minimum de scripts, et uniquement afin de définir le déclenchement de l'animation lors du défilement de la page.

Lorsque la valeur de la position de défilement de la page est supérieure à 1, cela signifie que l'utilisateur a fait défiler la page et que vous devez ajouter une classe « collante » à la balise d'en-tête du site. C'est ainsi que l'en-tête du site est déclenché et corrigé.

Et voici le code lui-même :

$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("collant"); ) ));

Il est important de noter que l'utiliser dans cet exemple n'est pas une très bonne idée, car si l'utilisation de scripts est désactivée dans le navigateur, alors l'en-tête du site sera simplement corrigé et c'est tout.

CSS

Le code CSS sera composé de 2 parties. Le premier code sera responsable de l'en-tête standard du site, qui est dans la position par défaut. Le deuxième code se chargera d'afficher l'en-tête lorsque l'utilisateur fait défiler la page. Voyons à quoi ressemble le code par défaut :

En-tête (position : fixe ; largeur : 100 % ; alignement du texte : centre ; taille de la police : 72 px ; hauteur de la ligne : 108 px ; hauteur : 108 px ; arrière-plan : #335C7D ; couleur : #fff ; famille de polices : "PT Sans ", sans empattement ; )

Maintenant la partie intéressante : lorsque l'utilisateur fait défiler la page, alors la classe .sticky sera appliquée, à laquelle on pourra donner un affichage complètement différent dont seul CSS est capable. Nous définirons également une position fixe afin que l'en-tête de notre site soit toujours visible.

En utilisant ces règles CSS ci-dessous, nous souhaitons réduire la zone de l'en-tête lui-même lors du défilement, changer la couleur et bien sûr réduire la taille de la police. Voici le code lui-même :

Header.sticky ( taille de police : 24 px ; hauteur de ligne : 48 px ; hauteur : 48 px ; arrière-plan : #efc47D ; alignement du texte : à gauche ; remplissage à gauche : 20 px ; )

C'est l'exemple le plus simple avec lequel vous devez comprendre l'essence du travail. Tout dépend de la conception de votre site.

Eh bien, ajoutons maintenant une animation à notre transition en utilisant. Voici le code :

Transition : toutes les 0,4 s sont faciles ;

Ι

Conclusion

J'espère que cette méthode résoudra de nombreuses questions concernant la mise en œuvre d'une navigation pratique et simple pour le site. De plus, cette implémentation est très simple et compréhensible.

La principale difficulté d’une mise en page fluide est d’assurer un affichage correct à différentes résolutions, de haute à basse. Puisque nous avons limité la largeur du contenu à 760 pixels, l'image d'en-tête doit être placée de manière à ce que la partie la plus importante de l'image tienne dans cette taille. En figue. 6.3 montre comment procéder. La partie centrale d'une largeur de 760px est mise en évidence en couleur sombre ; la lettre A désigne les fragments restants d'égale largeur.

Riz. 6.3. Largeur du bonnet

L'ajout proprement dit d'une image dans l'en-tête se fait via une image de fond, qui doit être alignée au centre de l'élément.

En-tête ( display: block; /* Pour les anciens navigateurs */ height: 405px; /* Hauteur de l'en-tête */ background: url(images/header-bg.png) no-repeat center bottom; )

Idéalement, l'image devrait avoir une grande largeur de 2 000 pixels, puis, à presque toutes les résolutions du moniteur, l'image montrera la partie centrale, coupant tout ce qui ne rentre pas dans la fenêtre. Mais le problème est qu'au départ, l'image n'est pas si large et vous ne voulez pas dessiner des rayures noires qui s'étendent sans fin sur les côtés. Une solution consiste à activer la répétition horizontale de l’arrière-plan. Ceux qui ont une résolution de 1280 pixels de largeur ou moins verront une seule image, tandis que les propriétaires de moniteurs larges pourront admirer plusieurs animaux et le soleil couchant en même temps. Ici, il est important de modifier le dessin afin qu'il s'adapte horizontalement à lui-même sans joints (Fig. 6.4). Le dégradé est masqué pour plus de clarté.

Riz. 6.4. Aligner l'image horizontalement

Sur cette figure, l'emplacement du joint est indiqué par une flèche et un espace afin que le joint soit visible. Si vous modifiez correctement les parties droite et gauche de l'image d'arrière-plan, elle sera répétée horizontalement sans joints visibles, comme un motif continu. Il ne reste plus qu'à corriger légèrement le style en remplaçant la valeur no-repeat (pas de répétition) par repeat-x (répéter horizontalement).

En-tête (affichage : bloc ; hauteur : 405 px ; arrière-plan : url(images/header-bg.png) répéter-x au centre en bas ; )

Riz. 6.5. Image d'arrière-plan pour l'en-tête

Au format PNG-24, un fichier avec une taille d'arrière-plan de 1325 x 405 pixels prend environ 32 Ko, et au format PNG-8 avec une palette de 256 couleurs, où la qualité du dégradé est légèrement moins bonne - environ 15 Ko. Vous pouvez diviser l'arrière-plan en deux composants - un dégradé et une image et enregistrer chaque image dans son propre format, ce qui devrait entraîner une augmentation de la qualité de l'affichage du dégradé. Cependant, 32 Ko pour une image aussi grande, ce n’est pas beaucoup et certains envisageront une optimisation supplémentaire « économie sur les correspondances ». Cependant, certaines personnes peuvent trouver utile cette approche alternative pour créer un en-tête de site Web, et vous pouvez l’ignorer si vous le souhaitez.

Optimisation de l'en-tête

Étant donné que le dégradé dans l’en-tête se répète horizontalement, il peut être découpé de la mise en page et défini comme image d’arrière-plan. En figue. La figure 6.6 montre un gradient élevé de 405 pixels préparé à cet effet. Le format PNG-24 ne déforme pas l'image et compresse bien les dégradés (le volume final est de 402 octets), donc dans ce cas, vous devez absolument l'utiliser. Un cadre autour de l'image est ajouté pour plus de clarté.

Riz. 6.6. Dessin en dégradé (header-gradient.png)

Une image avec des silhouettes d'animaux est réalisée sur un fond transparent et d'une hauteur de 198 pixels, cela ne sert à rien de la faire sur toute la hauteur de l'en-tête, puisqu'elle n'en occupe qu'une partie. Un fragment de l'image est présenté sur la Fig. 6.7. Le damier signifie la transparence.

Riz. 6.7. Image de fond avec transparence (header-animal.png)

Cette image étant enregistrée au format PNG-8, qui ne possède qu'un seul niveau de transparence, contrairement aux 256 niveaux du format PNG-24, il est important d'assurer une superposition correcte sur le fond dégradé. Pour ce faire, lors de l'enregistrement dans Photoshop, vous devez préciser la couleur des bords (Mat) proches de la partie médiane du dégradé, là où la silhouette est superposée. Il s'agit approximativement de la couleur #9de1f0. Dans ce cas, il n'y aura pas de contours sales autour des arbres et des animaux, et l'image, superposée au dégradé, sera perçue comme un tout.

Deux images pour l'arrière-plan de l'en-tête sont préparées, nous écrivons le code HTML.

Et le style de l’élément et du calque header-bg.

En-tête (arrière-plan : #00b0d8 url(images/header-gradient.png) répétition-x ; ) .header-bg (arrière-plan : url(images/header-animal.png) répétition-x centre en bas ; hauteur : 405 px ; )

En conséquence, la taille du fichier s'est avérée être de 12,5 Ko, ce qui est encore moins que prévu.

Nom du site

Le titre est écrit sur un nuage aux bords arrondis, ce qui devrait rendre difficile son application sur le dégradé. Il existe deux manières de les contourner.

1. Utilisez le format PNG-24 tout en conservant la transparence.
2. Enregistrez l'image au format GIF ou PNG-8 avec un fragment du dégradé, puis superposez l'image sur le dégradé afin que la correspondance soit précise au pixel près.

Évidemment, la deuxième méthode présente un certain nombre d'inconvénients - l'image ne peut pas être déplacée même de quelques pixels, elle est liée au dégradé, et si son dégradé est modifié, l'image devra être modifiée. Nous sauvegardons donc l'en-tête au format PNG-24. Le code HTML restera le même, mais les styles seront étendus.

En-tête (arrière-plan : #00b0d8 url(images/header-gradient.png) répétition-x ; ) .header-bg (arrière-plan : url(images/header-animal.png) répétition-x centre en bas ; hauteur : 405 px ; /* Hauteur de l'en-tête */ text-align: center; /* Alignement au centre */ ) .header-bg img ( position: relative; /* Positionnement relatif */ top: 40px; /* Déplacer l'image vers le bas */ )

L'alignement central se fait via la propriété text-align ajoutée au parent de la balise , et descendez via la propriété supérieure. Pour que cette propriété fonctionne, vous devez définir le positionnement relatif de l'image à l'aide de la propriété position avec la valeur relative .

Sur la page principale du site, l'image avec le titre est affichée comme d'habitude, sur d'autres pages elle sert de lien vers la page principale. Pour ce faire, il suffit de modifier légèrement le code :

La valeur /y de l'attribut href pointe vers la page d'accueil et ne fonctionne que sur le serveur Web, pas localement.

Le code final de l'en-tête est présenté dans l'exemple 6.14.

Exemple 6.14. En-tête du site

HTML5 CSS 2.1 IE Cr Op Sa Fx

Comment attraper un lion dans le désert ?

Souvent, des tâches de mise en page apparemment simples nécessitent une structure de balisage HTML complexe et l'utilisation d'astuces CSS. Centrer des éléments ou aligner du contenu peut être très fastidieux. L'une de ces tâches consiste à aligner les éléments en haut du site de manière à ce que le logo soit à gauche et les éléments de menu à droite. Vous pouvez utiliser float et position:absolute, et pour l'alignement vertical, vous pouvez ajouter une marge et un remplissage à différents éléments. Cela ne semble rien de compliqué. Mais si le site doit s’afficher correctement sur les appareils mobiles, de nombreux problèmes surviennent.

Vous trouverez ci-dessous une manière concise de résoudre ce problème.

Le balisage HTML est aussi simple que possible :

Super mal

Premier lien Deuxième lien Troisième lien

La hauteur du linteau est fixe, ajoutez text-align : justifier, pour les éléments enfants :

En-tête (alignement du texte : justifier ; espacement des lettres : 1px ; hauteur : 8em ; remplissage : 2em 10 % ; arrière-plan : #2c3e50 ; couleur : #fff ; )

Ajouter affichage : bloc en ligne pour tous les éléments navigation afin que vous puissiez les disposer les uns après les autres :

En-tête h1, en-tête nav ( display: inline-block; )

Attribuer text-align : justifier a fonctionné comme nous le souhaitons, nous devons utiliser une petite astuce avec des pseudo-éléments, qui a été trouvée dans l'article Technique de grille CSS parfaitement justifiée utilisant inline-block , de Jelmer de Maat :

En-tête :: après ( contenu : " " ; affichage : bloc en ligne ; largeur : 100 % ; )

Le résultat était un alignement horizontal, sans utiliser flotter Et position : absolue. Vous devez maintenant aligner les éléments verticalement. En utilisant aligner verticalement pour les éléments navigation il y aura une dépendance sur la hauteur du bloc parent - l'en-tête. Et ce n'est pas très correct. Exemples d'utilisation de vertical-align : top et vertical-align : middle sur jsbin. Vous trouverez ci-dessous peut-être la méthode la plus pratique pour l'alignement vertical.

Utilisons à nouveau des pseudo-éléments. en utilisant un exemple tiré de l'article Centering in the Unknown, mentionné par Michał Czernow :

En-tête h1 (hauteur : 100 % ; ) en-tête h1::avant ( contenu : " ; affichage : bloc en ligne ; alignement vertical : milieu ; hauteur : 100 % ; )
Le résultat est ce dont vous avez besoin :

Il reste deux problèmes à résoudre : l'affichage correct lorsqu'il y a une grande quantité de texte dans l'en-tête et l'adaptabilité. Si le titre du site est trop long, la mise en page commencera à glisser :

Utiliser l'astuce du pseudo-élément sur entête:

Code CSS

en-tête (alignement du texte : justifier ; hauteur : 15em ; remplissage : 2em 5 % ; arrière-plan : #2c3e50 ; couleur : #fff; ) header::after ( contenu : "" ; affichage : bloc en ligne ; largeur : 100 % ; ) en-tête > div, en-tête de navigation, en-tête div h1 ( affichage : bloc en ligne ; alignement vertical : milieu ; ) en-tête > div ( largeur : 50 % ; hauteur : 100 % ; alignement du texte : gauche ; ) en-tête > div : :avant ( contenu : " " ; affichage : bloc en ligne ; alignement vertical : milieu ; hauteur : 100 % ; )

C'est beaucoup mieux :

Passons maintenant à l'adaptabilité. Il existe plusieurs façons de résoudre ce problème : vous ne pouvez tout simplement pas régler la hauteur du linteau et tous les éléments internes s'adapteront à la hauteur. Cela ne nécessitera pas la deuxième astuce avec les pseudo-éléments, exemple en direct sur jsbin.

Code CSS

en-tête ( alignement du texte : justifier ; remplissage : 2em 5 % ; arrière-plan : #2c3e50 ; couleur : #fff ; ) en-tête ::après ( contenu : " ; affichage : bloc en ligne ; largeur : 100 % ; ) en-tête h1, en-tête de navigation ( affichage : bloc en ligne ; alignement vertical : milieu ; ) en-tête h1 ( largeur : 50 % ; alignement du texte : à gauche ; remplissage en haut : 0,5 em ; ) en-tête de navigation ( rembourrage en haut : 1 em ; )

Si vous devez définir la hauteur de l'en-tête, vous devrez alors utiliser la deuxième astuce avec des pseudo-éléments et ajouter une requête multimédia pour des écrans de différentes tailles :

Écran @media et (largeur maximale : 820 px) (en-tête (hauteur : auto ; ) en-tête > div, en-tête >

Le résultat est adaptatif et ressemble à ceci sur les appareils mobiles :

Dans l'exemple, 820px est utilisé pour plus de clarté ; sur un site en direct, la valeur doit bien entendu être différente, conformément aux exigences. Pour prendre en charge Internet Explorer 8, vous devez utiliser « : » pour les pseudo-éléments au lieu de « :: ».

Code CSS final

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic) ; * ( padding : 0 ; margin : 0 ; ) body ( background : #1abc9c ; font-family : "Lato", sans-serif ; text-transform : majuscules ; espacement des lettres : 1px ;) en-tête ( text-align : justifier ; hauteur : 8em ; remplissage : 2em 5% ; arrière-plan : #2c3e50 ; couleur : #fff ; ) header::after ( contenu : " » ; affichage : bloc en ligne ; largeur : 100% ; ) en-tête > div, en-tête > div::before, en-tête de navigation, en-tête > div h1 ( affichage : bloc en ligne ; alignement vertical : milieu ; alignement du texte : gauche ; ) en-tête > div ( hauteur : 100 % ; ) en-tête > div :: avant ( contenu : "" ; hauteur : 100 % ; ) en-tête > div h1 ( taille de police : 3em ; style de police : italique ; ) navigation d'en-tête a ( remplissage : 0 0,6em ; espace blanc : nowrap ; ) navigation d'en-tête a:last -child ( padding-right : 0 ; ) @media screen et (max-width : 720px)( en-tête (hauteur : auto ; ) en-tête > div, en-tête > div h1, en-tête de navigation ( hauteur : auto ; largeur : auto ; affichage : bloquer; texte-aligner: centre; ) )

Résultat:

Salut tout le monde. Aujourd'hui, j'ai examiné les statistiques des requêtes de recherche par lesquelles les gens accèdent au blog et j'ai découvert qu'il y en a plusieurs qui ne sont pas du tout pertinentes. Non, pas le blog, mais les articles.

L'un d'eux comment réparer l'en-tête du site? J'ai immédiatement décidé de corriger la situation et d'écrire un article, car le sujet est pertinent et il y a des questions dans ce domaine.

En général, il existe plusieurs façons de faire défiler une page. Vous pouvez utiliser javascript, mais je ne suis pas très fort dans ce sujet et je suis juste en train de l'apprendre. Par conséquent, pour l’instant, nous nous contenterons de CSS. Que Dieu bénisse, corriger l'en-tête du site(et pas seulement un chapeau, mais tout autre élément), vous pouvez le faire avec "un peu de sang" :)

En fait, la méthode de correction d'un élément lors du défilement d'une page est très simple, et vous serez surpris de la facilité avec laquelle ce problème est résolu.

Correction de l'en-tête lors du défilement de la page

Afin de réparer l'en-tête, vous devrez créer deux blocs. Un - pour pouvoir centrer le capuchon. Et il y a un enfant dedans, qui sera enregistré. Commençons...

C'est une structure HTML si simple ! Ajoutons maintenant des styles !

#headerMain ( largeur:920px; hauteur: 195px; marge:0px auto; z-index:0; ) #header ( largeur:920px; hauteur: 195px; arrière-plan: url(../img/bg-header.jpg) non -répéter ; position : fixe ; z-index : 9999 ; )

Désormais, l'en-tête sera fixé en haut de l'écran et ne bougera pas lors du défilement.

Dans cet article, nous verrons comment créer un en-tête de site et y placer le titre et la description du site.

Tout d’abord, vous avez besoin d’une image pour l’en-tête du site. Il est préférable de le faire dans Photoshop.

Et pour ceux qui ne possèdent pas cet éditeur, je propose le moyen le plus simple, dans Paint, disponible par défaut sur tous les Windows.

Faisons en sorte que la largeur de l'image soit de 900 px, la largeur du site et la hauteur de 200 px. Bien entendu, vous pouvez avoir vos propres dimensions, du moment que la largeur de l'image correspond à la largeur du site (wrapper), la hauteur est à votre discrétion

Dès que l'image est prête et placée dans le dossier images, prenez celle créée sur la page précédente et procédez à l'installation de l'en-tête sur le site.

Dans le sélecteur #header, supprimez la hauteur spécifiée et spécifiez la largeur et la hauteur de l'image prise.

#entête (
largeur : 900 px ; - largeur
hauteur : 200px ; - hauteur
couleur d'arrière-plan : #25B33f ; - arrière-plan
marge inférieure : 10 px ; - retrait inférieur
}

Ensuite, nous insérons l'image elle-même.

#entête (
largeur : 900 px ;
hauteur : 200px ;
couleur d'arrière-plan : #25B33f ;
marge inférieure : 10 px ;
image d'arrière-plan : url(images/i8.png) - image
}

La propriété background-color est indiquée au cas où l’image ne s’afficherait soudainement, dans le navigateur d’un visiteur.

Si l'image est placée avec un décalage et que vous devez la corriger, la propriété est ajoutée ici

Place maintenant au titre et à la description du site. Pour ce faire, nous écrivons un bloc div avec l'identifiant id="header" dans la balise body, et il y a deux en-têtes h1 et h3, dans lesquels nous insérons le nom du site et sa description

Voyons ce que nous pouvons faire.

Maintenant, examinons le titre et la description. Nous créons deux sélecteurs pour eux et spécifions les propriétés suivantes :

Pour h3, nous définirons la largeur à 200 pixels afin qu'elle ne s'étende pas sur toute l'image. Les retraits peuvent être manipulés en fonction de l'endroit où dans l'en-tête il sera plus pratique de placer le texte.

Voyons le résultat.

À mon avis, c'est très mignon.

Résumons le code de cette page.

Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок