Créez un en-tête monochromatique, instructions CSS étape par étape. En-tête de page. En-tête de page En-tête HTML réactif

La 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 ( width : 100 % ; max-width : 1024px; /*la largeur maximale peut avoir une valeur différente*/ padding : 0 15px; margin : 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.

et 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 d'écrans 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.

Utilisez le format PNG-24 tout en conservant la transparence.

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 de navigation afin qu'ils puissent être placés les uns à côté des 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 de navigation, il y aura une dépendance à 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 :

Utilisons l'astuce du pseudo-élément sur header :

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, bien entendu, la valeur doit être différente, conformément aux exigences. Pour prendre en charge Internet Explorer 8, vous devez utiliser « : » au lieu de « :: » pour les pseudo-éléments.

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 est de savoir 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. Dieu merci, vous pouvez réparer l'en-tête du site (et pas seulement l'en-tête, mais tout autre élément) à « peu de frais » :)

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.

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; )

Riz. 6.4. Aligner l'image 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

Optimisation de l'en-tête

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

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

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.

Utilisez le format PNG-24 tout en conservant la transparence.

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.

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 ? corps ( marge : 0 ; ) en-tête ( affichage : bloc ; arrière-plan : #00b0d8 url(images/header-gradient.png) répétition-x ; /* Dégradé */ ) .header-bg ( arrière-plan : url(images/en-tête- animal.png) répéter-x centre en bas ; /* Animaux */ hauteur : 405px ; /* Hauteur de l'en-tête */ text-align : centre ; /* Alignement au centre */ ) .header-bg img ( position : relative ; / * Positionnement relatif */ top : 40px; /* Déplacer l'image vers le bas */ )

Tout d’abord, rédigeons les spécifications techniques. Nous devons créer un en-tête de site qui aura un bloc de liens, contiendra plusieurs éléments graphiques d'un sujet donné et, par conséquent, aura une certaine partie de texte qui sera utilisée pour un slogan ou autre chose, je mettrai également en œuvre cette création dans une version en caoutchouc afin que les dimensions de cet en-tête changent en même temps que la taille de la fenêtre du navigateur.

Voici donc ce que nous obtiendrons à la fin de la leçon :

J’ai choisi le thème de la pêche parce que c’est très proche de moi et, par conséquent, c’est bien de faire quelque chose. Naturellement, j'ai préparé les graphiques à l'avance dans Photoshop, tout assemblé et découpé, comment je l'ai fait, je ne vous l'expliquerai pas, car il s'agit d'un sujet à part, et dans cette leçon je vais vous montrer comment tout est implémenté directement dans le code, alors revenons au point.

Voici une image générale de ce à quoi ressemble cet en-tête en HTML :

Pêche

ActualitésHameçonsCannes à pêcheLigne à pêcheÀ propos du projet

#entête (
largeur : 100 % ;
hauteur : 157px ;
arrière-plan : url(bg.jpg) ;
}
#liens (
largeur : 100 % ;
hauteur : 33px ;
arrière-plan:url(linkbg.jpg);
taille de police : 14 px ;
poids de la police : gras ;
couleur :#FFFFFF ;
}
#liens div (
remplissage : 5 px ;
texte-align:centre;
largeur : 150 px ;
flotteur : gauche ;

}
.texte(
couleur : #FFFFFF ;
remplissage : 10 px ;
taille de police : 24 px ;
flotteur : gauche ;
}
h1 (
marge : 0px ;
remplissage : 0px ;

taille de police : 50 px ;
poids de la police : gras ;
couleur : #FFFFFF ;
}

Comme vous l'avez peut-être remarqué, le code est assez court et en même temps très efficace, je vais tout analyser dans l'ordre et commenter chaque étape en conséquence :

Balise body du document, ici nous remettons immédiatement à zéro toutes les marges possibles depuis les bords de la fenêtre du navigateur et à l'intérieur de la balise body elle-même, avec les paramètres correspondants margin:0px ; remplissage : 0px ; Nous en avons besoin pour qu'il n'y ait pas d'espaces blancs sur les bords de la fenêtre du navigateur, et en principe, cela est toujours utilisé pour toute mise en page normale d'un site Web.

C'est le début de l'en-tête ; nous créons un conteneur avec les paramètres donnés :

#entête (
largeur : 100 % ;
hauteur : 157px ;
arrière-plan : url(bg.jpg) ;
}

à savoir, tout d'abord, nous définissons la largeur de l'en-tête en pourcentage de largeur : 100 % ; ce qui nous donne la possibilité de créer une disposition dite en caoutchouc, puis height height : 157px ; et, par conséquent, l'image d'arrière-plan background: url(bg.jpg); qui se trouve dans le même dossier que le fichier d'en-tête. La prochaine chose que nous devons faire est de créer trois conteneurs à l'intérieur de celui-ci afin d'y placer des images et du texte :

Pêche
Pêchez avec nous et vous attraperez...

Nous définissons l'alignement sur le côté gauche du premier conteneur pour qu'il soit à gauche, pour cela nous utilisons le paramètre de positionnement float: left; et insérez-y simplement notre image, la taille du conteneur sera déterminée par la taille de l'image. Nous alignons également le conteneur suivant à l'aide du paramètre float afin qu'il soit sur la même ligne et ne passe pas à la ligne suivante. Ici, nous utilisons class="text":

Texte (
couleur : #FFFFFF ;
remplissage : 10 px ;
taille de police : 24 px ;
flotteur : gauche ;
}

Tout d'abord, nous définissons la couleur de la police : #FFFFFF ; remplissage à partir du texte à l'intérieur du conteneur padding : 10px ; taille de la police taille de la police : 24 px ; et alignement à gauche. Ce conteneur contient également une balise pour laquelle les paramètres sont également spécifiés séparément :

h1 (
marge : 0px ;
remplissage : 0px ;
famille de polices : Verdana, Arial, Helvetica, sans-serif ;
taille de police : 50 px ;
poids de la police : gras ;
couleur : #FFFFFF ;
}

Tout d’abord, nous avons supprimé toutes les marges possibles margin: 0px; remplissage : 0px ; puis définissez la famille de polices : Verdana, Arial, Helvetica, sans-serif ; taille de la police taille de la police : 50 px ; poids de la police poids de la police : gras ; et couleur couleur : #FFFFFF ; c'est tout. Il reste la dernière troisième case, que nous alignons à droite, en utilisant le paramètre float pour que, comme la dernière fois, elle soit sur la même ligne et insérons la deuxième image. Si vous rencontrez des difficultés pour comprendre les propriétés du paramètre float, je vous conseille de lire la leçon « Bases du positionnement CSS » et tout deviendra clair pour vous. Ceci complète notre top, il ne reste plus qu'un bloc de liens :

ActualitésHameçonsCannes à pêcheLigne à pêcheÀ propos du projet

Alors, créons une bande avec un fond :

#liens div (
remplissage : 5 px ;
texte-align:centre;
largeur : 150 px ;
flotteur : gauche ;
bordure droite : 1px solide #000 ;
}

Pour la beauté de l'affichage, nous effectuons des retraits de 5 pixels sur tous les côtés : 5px ; puis alignez le contenu des conteneurs sur le centre text-align:center; définissez la largeur largeur : 150 px ; on aligne les conteneurs eux-mêmes sur le bord gauche, et il ne reste plus qu'à séparer nos liens d'un simple trait des bords du conteneur de droite, à savoir border-right : 1px solid #000 ; Nous définissons le trait de bordure à droite, une bande de 1 pixel de large, de style uni et de couleur noire.

C'est tout, c'est ainsi que s'est avéré l'en-tête du site avec une mise en page en caoutchouc, c'est très pratique et pratique, et comme j'espère que vous l'avez remarqué, très peu de code html a été utilisé lors de la mise en page puisque la charge principale incombe au CSS, ce qui permet vous de créer des sites plus optimisés qui intéresseront davantage les moteurs de recherche.

Bien sûr, ce n'est pas la seule option pour implémenter un en-tête de site, et à l'avenir, j'essaierai certainement d'écrire quelques leçons supplémentaires sur ce sujet.

Date de publication :2011-10-11

Dans le dernier article, nous avons réalisé un squelette de notre modèle HTML, prêt à être rempli et conçu. Aujourd'hui, je vais vous expliquer comment créer joliment un en-tête de site Web (partie supérieure) et un menu simple. Aujourd'hui, nous allons également apporter quelques modifications aux styles d'autres blocs.

Alors qu’avons-nous maintenant ? Nous avons maintenant ces styles :

Html, corps ( hauteur : 100 % ; couleur : #000 ; arrière-plan : #FFFFFF ; retour à la ligne : mot de rupture ; taille de police : 12 px ; famille de polices : Verdana, Arial, Sans-Serif ; ) #wrapper (hauteur :auto !important; hauteur:100%; hauteur min:100%; ) #header ( hauteur:100px; ) #container ( largeur min:800px; ) #center ( margin:0px 200px 0px 200px; ) #left ( float:left; width:200px; ) #right ( float:right; width:200px; ) #footer ( hauteur:100px; margin-top:-100px; ) .clear ( clear:both; ) #space ( hauteur:100px ; )

Et voici le code du modèle lui-même :

Nom du site

Tout d’abord, apportons quelques modifications au style du bloc wrapper :

#wrapper ( hauteur:auto !important; hauteur:100%; hauteur min:100%; largeur: 1024px; marge: 0 auto; alignement du texte: gauche; )

J'ai défini une largeur fixe - la largeur du bloc, de 1024 pixels, j'ai aligné le bloc lui-même au centre et le texte qu'il contient à gauche en utilisant text-align: left. Nous pouvons aligner le bloc au centre en utilisant le style de marge, en définissant les marges supérieure et inférieure sur 0 et la largeur sur automatique. Malheureusement, cela ne fonctionne pas toujours dans Internet Explorer 6, j'ai donc ajouté dans le corps text-align: center; et c'est pourquoi j'ai dû aligner le texte dans le bloc d'habillage et le pied de page vers la gauche. J'ai également spécifié margin:0 dans le corps, définissant ainsi les marges des bords à 0 pixel. En conséquence, Body s’est retrouvé avec les styles suivants :

Html, corps (hauteur : 100 % ; couleur : #000 ; arrière-plan : #FFFFFF ; retour à la ligne : mot de rupture ; taille de police : 12 px ; famille de polices : Verdana, Arial, Sans-Serif ; marge : 0 ; texte -aligner : centre ; )

J'ai également apporté des modifications au sous-sol :

#pied de page (largeur : 1024 px ; marge : 0 auto ; alignement du texte : gauche ; hauteur : 100 px ; marge-haut : -100px ; arrière-plan : #4a90d9 ; )

Tout ici est similaire au bloc wrapper : définissez la largeur sur 1024px, alignez le bloc au centre et alignez le texte à gauche. J'ai également ajouté margin-top au conteneur : margin-top: 20px; et supprimé la largeur minimale, puisque nous avons une largeur enveloppante fixe.

Eh bien, nous avons préparé le modèle, il est temps de passer à l’en-tête du site. Les styles seront comme ceci :

#header ( hauteur : 140 px ; arrière-plan : #fff ; rembourrage supérieur : 40 px ; )

La hauteur du bloc est de 140 pixels, l'arrière-plan est blanc et la marge à partir du bord supérieur est de 40 pixels. Ce sont tous les changements apportés aux styles d’en-tête.
Quoi? C'est tout? Et il y a un article entier qui porte ce nom ?
Bien sûr que non. L'en-tête du site sera composé d'autres éléments : un logo et un menu, qui seront conçus séparément.

Écrivons la ligne suivante dans le code HTML du modèle à l'intérieur du bloc d'en-tête :
Il s'agit essentiellement d'un lien vers la page principale sans texte, mais un class="logo" lui est attribué. Vous devez maintenant le styler dans les styles CSS.

Logo ( display:block; hauteur: 104px; width: 390px; background: url("image/logo.png") no-repeat; )

J'ai créé le bloc d'éléments, lui ai donné la largeur et la hauteur, et j'ai également créé une image de logo comme arrière-plan, que j'ai mise dans le répertoire d'images. Toutes les images de modèles seront situées dans ce répertoire. La taille de l’image est de 388*100 pixels, alors pourquoi la taille du bloc est-elle légèrement différente ? J'ai fait une hauteur de 104 pixels pour qu'il y ait un espace entre l'image du logo en bas entre le futur menu et le logo, et j'ai pris la largeur de deux pixels de plus au cas où, car j'ai rencontré à plusieurs reprises que Mozilla avait mal déterminé le taille de l'image et l'ai recadrée un peu. Ça y est, nous en avons fini avec le logo. Menu dans

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.

et HTML

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

En-tête du site joint

Code jQuery

Et voici le code lui-même :

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

CSS

Site sur l'informatique

ARTICLES LIÉS