This page has been robot translated, sorry for typos if any. Original content here.

Mise en page CSS du site: mise en page en trois colonnes

Notre mise en page

Tâche

Notre tâche est de créer une mise en page à partir de trois colonnes en utilisant CSS. Cette mise en page peut servir de base à un site d’information doté d’un “en-tête”, les colonnes de droite au menu ainsi que des informations complémentaires, le bloc de texte central constituant également le “sous-sol” des droits d’auteur, des contacts, etc. Disposition de projet de contenu typique.

Sans aucun doute, cette mise en page ne peut pas être qualifiée de miracle d'une conception, mais vous pouvez toujours intégrer ce modèle dans un «look divin», en choisissant les polices appropriées, leur taille et en ajoutant un magnifique logo. Il n'est pas difficile de compliquer indépendamment la mise en page, en ajoutant de nouveaux blocs CSS.

Mise en page du site en trois colonnes complètement sur CSS

Technologies utilisées et support du navigateur

La mise en page du site sera entièrement mise en œuvre en CSS, il est prévu d'utiliser "sporadiquement" l'utilisation de XHTML et de JavaScript.

La structure CSS utilisée est prise en charge par Internet Explorer 6, les versions actuelles de Mozilla sont également Opera. La mise en page de certains réglages, la mise en page fonctionnera également dans Internet Explorer 5. Cela devrait suffire. Notre CSS est également obligé d’aimer les navigateurs de texte ainsi que d’autres appareils exotiques.

Les performances du code dans IE 4, Netscape 4 et les navigateurs plus anciens n’ont pas été testés, mais je suis sûr qu’il y aura des problèmes. Cependant, cela n’est pas critique, regardez les statistiques de popularité des navigateurs de hotlog, spylog et liveintenet.

Les avantages et les inconvénients de la méthode considérée de mise en page de site CSS

La mise en page présente de sérieux avantages ainsi que de graves inconvénients. Vous devez décider de ce qui est le plus important pour votre site et ses visiteurs.

Inconvénients:

  • Ne fonctionne pas dans Internet Explorer 4, Netscape Navigator 4 est également un navigateur ancien.
  • La disposition CSS (la création de blocs et leur positionnement) n'est pas idéale pour les navigateurs modernes. Par conséquent, la page doit être testée dans tous les navigateurs utilisés par votre salle afin de détecter des différences minimes mais déplaisantes dans l'affichage de la page.
  • La farine à positionnement vertical définit également la hauteur des éléments en CSS. Ce n’est pas si fier, à moins que vous ne vouliez en aucun cas ajuster tous les éléments avec une précision de pixel.
  • Pour notre mise en page, il est nécessaire que la colonne avec le contenu principal ait une hauteur impressionnante par rapport aux colonnes latérales. Sinon, la page sera désordonnée. Pour être honnête, cette demande est typique de la plupart des sites à conception verticale. Si les pages sont écrites manuellement (et ne sont en aucun cas générées par des scripts), la salle peut être «finie» avec des sauts de ligne.
  • Il est difficile de réapprendre de la mise en page tabulaire. Au début, les rembourrages vont commencer à avoir un mal de tête des marges :)

Plus:

  • Maîtrisant la mise en page CSS, il est facile de comprendre le code, de changer de style. Avec un arrangement de blocs CSS bien pensé, les modifications de conception mineures n’auront guère de difficultés - il suffit d’éditer le fichier CSS.
  • Les navigateurs de texte sont également obligés d’aimer notre présentation par d’autres appareils limités pour entrer des informations - sans styles, c’est un texte simple dans une colonne avec un minimum d’éléments de conception XHTML.
  • Sans styles CSS (c'est-à-dire une mise en page XHTML soignée), il s'agit du titre de la page tout en haut, ainsi que du texte principal qui suit le titre. La «condition requise» (liens, droits d'auteur, navigation, actualités - tout ce qui n'est PAS la raison pour laquelle l'utilisateur est venu sur la page) ralentit tout en bas. Une telle disposition des informations aura un effet bénéfique sur l'attitude vis-à-vis du site de simples dispositifs permettant de saisir des informations, l'essence même des robots de recherche: ils aiment l'heure à laquelle le texte apparaît sur la page, mais pas les étiquettes tabulaires éternelles.
  • Navigation rapide. En cas de pages impressionnantes ou de connexion lente, le visiteur peut commencer à prononcer le texte principal pendant le chargement des menus latéraux, etc.
  • Disposition "Caoutchouc" - la largeur des blocs de disposition dépend de la taille de la fenêtre du navigateur. Ainsi, l'espace d'écran utile ne disparaîtra pas.
  • Mise en œuvre facile pour cette mise en page CSS de la version imprimable de la page.
  • Le code XHTML pur est également conçu à l’aide de CSS, mais pas de tableaux - c’est «cool» et très en vogue. :) .

Peut-être que les avantages l'emportent. Ainsi, si votre site n'est pas dédié à Windows 3.11 dans la pièce correspondante, si vous êtes prêt à maîtriser le modèle de bloc CSS, vous ne souhaitez pas non plus ajouter d'éléments complexes avec une présentation non standard à la présentation, vous pouvez en dire plus.

Un peu de théorie CSS de la mise en page de sites Web (création et positionnement de blocs CSS, par exemple)

Pour présenter la théorie en détail, il n'y a ni désir ni possibilité. Ce sujet complexe est également vaste. Je vais essayer de “supprimer” les liens et de décrire brièvement ce qui sera directement utilisé dans la mise en page.

Alors, liens:

Maintenant un peu plus loin. Un bloc est un élément rectangulaire d'une page Web, spécifié à l'aide d'un bloc (par exemple, <div> ou <p>), d'éléments XHTML (bazurmansky, tags). Le bloc prend de la place et se termine par une nouvelle ligne: une paire d'éléments <div> sera située sur la page l'un en dessous de l'autre, car il s'agit d'éléments de bloc. Une paire d'éléments <i> ne sera en aucun cas, puisqu'il s'agit d'éléments minuscules.

En utilisant CSS, vous pouvez déterminer les paramètres des blocs - bords extérieurs (marge), bordures (bordure), marges intérieures jusqu'au contenu (remplissage), en fait, la largeur du contenu (largeur). Le contenu d'un bloc CSS peut manifester du texte, des images, des blocs imbriqués ainsi que des objets ... La propriété background-color définit la peinture d'arrière-plan (remplissage) du bloc, tandis que le champ de la marge est toujours transparent. La description de ces propriétés est également une création de bloc CSS.

Le site Web www.ilovejackdaniels.com propose un didacticiel CSS, à partir duquel nous nous sommes permis de supprimer le système de blocs CSS, non pas pour violation du droit d'auteur, mais pour améliorer le confort d'utilisation. Et bien sûr, pardonnez-moi ilovejackdaniels.com, qui possède également tous les avantages imaginables et inconcevables de cette image:

Schéma de modèle de boîte CSS

La hauteur du bloc CSS dans la pratique ne peut en aucune manière être définie (nous parlons de disposition «en caoutchouc»), bien sûr, nous n’en avons pas besoin non plus. Mais la largeur du bloc est notre tout, elle est composée de la largeur: marge gauche + bordure gauche + padding gauche + largeur + padding droite + bordure droite / marge droite. Dans la mise en page, la bordure ne sera en aucun cas, nous allons tout faire par le rembourrage, ainsi que par la largeur - ce sera plus facile et plus rapide.

La mise en forme CSS du site est «rubber», c'est-à-dire que sa largeur dépend de l'espace disponible (taille de la fenêtre du navigateur). Par conséquent, la largeur et le remplissage sont définis sous forme de pourcentage. Les pourcentages définissent la largeur par rapport à l'élément parent. L'élément parent est soit une fenêtre de navigateur (en fait, la balise <body>), soit tout élément de bloc dans lequel l'élément défini est incorporé (dans la présentation, plusieurs <div> seront imbriqués dans un bloc parent <div>).

Les blocs sont créés en utilisant les propriétés définies par CSS (padding, width). Il est nécessaire de les organiser correctement sur la page. C'est aussi le positionnement CSS. S'il n'y a aucun moyen de décrire l'emplacement des blocs sur la page, ceux-ci seront affichés par le navigateur les uns en dessous des autres, conformément au calendrier de leur description dans le code XHTML de la page. Cet arrangement est appelé flux normal.

Il existe diverses techniques également disponibles. Nous allons utiliser les propriétés position: absolute (positionnement CSS absolu) et position: relative (positionnement relatif). Ensuite, vous devez déterminer le bloc de décalage de la page (en pixels pour une mise en page matérielle du site ou en pourcentage pour "en caoutchouc") à partir des points de référence supérieur, inférieur, gauche ou droit. Quel est ce point de référence?

Pour position: relative, le point de départ est l'emplacement du bloc dans le flux normal. Ie - position: relative; en haut: 10%; à gauche: 10%; - l'unité se déplacera également de 10% vers la droite également par rapport à son emplacement normal. Si vous enregistrez le positionnement relatif ne définit pas non plus le décalage, le bloc sera situé dans le flux normal.

Pour position: absolute, le point de référence est un élément parfaitement connu; le flux normal et la localisation des autres éléments ne jouent aucun rôle. Ce point peut être une fenêtre de navigateur ou un bloc parent, qui est complètement ou relativement positionné. De même, le décalage est déterminé par les pixels ou par les pourcentages des propriétés haut, gauche, bas, droite.

Essayons d'extraire de celles-ci apparemment incompatibles avec les règles de vie d'une étincelle raisonnable - il s'agit toutefois du code de présentation du site à partir de trois colonnes.

XHTML aussi la disposition du code CSS

Mise en page CSS du site: mise en page en trois colonnes - une capture d'écran avec explications

Ici, plus loin, des «morceaux» du code sont aussi des explications pour eux. .

Code xhtml



<code>&lt;html xmlns=http://www.w3.org/1999/xhtml&gt; &lt;head&gt; &lt;title&gt;CSS верстка сайта: макет в три колонки&lt;/title&gt; &lt;link rel=stylesheet type=text/css media=screen href=/style.css /&gt; &lt;link rel=stylesheet type=text/css media=print href=/print.css /&gt; &lt;script language=javascript type=text/javascript&gt; //&lt;![CDATA[ if (navigator.userAgent.indexOf('IE 5')!=-1) document.write('&lt;link rel="stylesheet" type="text/css" media="screen" href="/ie5.css" /&gt;'); //]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=header&gt;&lt;p align=justify&gt;CSS верстка сайта: макет в три колонки&lt;/p&gt;&lt;/code&gt; &lt;div id=main&gt; &lt;div id=content&gt; &lt;p align=justify&gt;Информация, как принято вычислять, транспонирует из ряда вон выходящий вселенная...&lt;/p&gt; &lt;p align=justify&gt;Жизнь, пренебрегая деталями, фокусирует примитивный интеллект...&lt;/p&gt; &lt;p align=justify&gt;Напряжение, поэтому, непредсказуемо...&lt;/p&gt; &lt;p align=justify&gt;Представление нетривиально. Созерцание решительно фокусирует постсовременный постмодернизм...&lt;/p&gt; &lt;p align=justify&gt;Представление амбивалентно. Современная ситуация рефлектирует себя чрез принцип восприятия...&lt;/p&gt; &lt;p align=justify&gt;Смысл жизни решительно творит объект деловитости. Жизнь натурально означает вселенная...&lt;/p&gt; &lt;/div&gt; &lt;div id=leftmenu&gt; &lt;p align=justify&gt;&lt;strong&gt;Навигация&lt;/strong&gt;&lt;/p&gt; &lt;p align=justify&gt;&lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=fr&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=25657,15700021,15700124,15700149,15700186,15700191,15700201,15700214&amp;amp;usg=ALkJrhi--VoSC3kVe8q7K9GwAhpP5cikAA#&gt;Раздел 1&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=fr&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=25657,15700021,15700124,15700149,15700186,15700191,15700201,15700214&amp;amp;usg=ALkJrhi--VoSC3kVe8q7K9GwAhpP5cikAA#&gt;Раздел 2&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=fr&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=25657,15700021,15700124,15700149,15700186,15700191,15700201,15700214&amp;amp;usg=ALkJrhi--VoSC3kVe8q7K9GwAhpP5cikAA#&gt;Раздел 3&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=fr&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=25657,15700021,15700124,15700149,15700186,15700191,15700201,15700214&amp;amp;usg=ALkJrhi--VoSC3kVe8q7K9GwAhpP5cikAA#&gt;Раздел 4&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=fr&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=25657,15700021,15700124,15700149,15700186,15700191,15700201,15700214&amp;amp;usg=ALkJrhi--VoSC3kVe8q7K9GwAhpP5cikAA#&gt;Раздел 5&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=fr&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=25657,15700021,15700124,15700149,15700186,15700191,15700201,15700214&amp;amp;usg=ALkJrhi--VoSC3kVe8q7K9GwAhpP5cikAA#&gt;Раздел 6&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=fr&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=25657,15700021,15700124,15700149,15700186,15700191,15700201,15700214&amp;amp;usg=ALkJrhi--VoSC3kVe8q7K9GwAhpP5cikAA#&gt;Раздел 7&lt;/a&gt;&lt;/p&gt; &lt;p align=justify&gt;Реальность представляет принцип восприятия. Интеллект не так уж очевиден...&lt;/p&gt; &lt;/div&gt; &lt;div id=rightmenu&gt; &lt;p align=justify&gt;&lt;strong&gt;Наши новости&lt;/strong&gt;&lt;/p&gt; &lt;p align=justify&gt;Боль методологически фокусирует закон внешнего вселенной...&lt;/p&gt; &lt;p align=justify&gt;Согласно взгляду известных философов современная ситуация...&lt;/p&gt; &lt;/div&gt; &lt;div id=footer&gt;&lt;p align=justify&gt;© 2005 Все тексты любезно предоставлены Яндексом®: &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=fr&amp;amp;u=http://www.shram.kiev.ua/click%3Fhttp://yandex.ru/vesna.html&amp;amp;xid=25657,15700021,15700124,15700149,15700186,15700191,15700201,15700214&amp;amp;usg=ALkJrhhZOutPrc4m-nALm1h_b_5G7wpbEg&gt;http://yandex.ru/vesna.html&lt;/a&gt;. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;</code>

La première leçon consiste à déclarer le type d'acte, sinon la mise en page deviendra incorrecte (à la manière d'Internet Explorer 5) affichée dans Internet Explorer 6 également par Opera. Avec DOCTYPE sans erreur, pas de problème.

La balise <link> vers la page charge les styles CSS à partir de fichiers externes. Le style universal style.css se trouve à la racine du site (en tant que position, il s'agit du dossier / public_html) est également destiné aux navigateurs informatiques (media = "screen"). Style print.css sera utilisé pour l’impression, voir ci-dessous. Ensuite, en utilisant JavaScript, nous définissons le navigateur de l'utilisateur. S'il s'agit d'Internet Explorer 5, le style CSS du fichier ie5.css lui est attribué.

Le premier est l'en-tête div pour l'en-tête de page. Il n'y a pas de texte dans le bloc de service principal, mais 4 blocs y sont enfermés: le contenu du texte principal de la page, le menu de gauche également le menu de droite pour le menu de gauche et celui de droite, ainsi qu'un bloc de pied de page pour la présentation «sous-sol».

Tous les blocs sont uniquement définis dans le code XHTML. CSS fournit également l'emplacement de leurs propriétés.

Style CSS général

body { margin: 0px; padding: 0px; background-color: #f0f0f0; }

Dans la première leçon, nous définirons le style <body> (c'est-à-dire les fenêtres du navigateur). Nous supprimons également les retraits extérieurs et ajoutons de la peinture de fond (# f0f0f0 - gris clair).

#header { width: 98%; margin: 0px; padding: 1%; background-color: orange; }

Pour le bloc d'en-tête, les marges extérieures ont été supprimées (margin: 0px;), un remplissage orange a été sélectionné et la largeur correspond à 100% de l'élément parent (il s'agit de <body>). 100% comprend 98% de la largeur du contenu du bloc, 1% également pour padding-left et padding-right. Remplissage d'écriture abrégé: 1%; définit le retrait des quatre côtés (haut, gauche, bas, droite).

Le bloc sera situé dans le flux normal, ce qui nous satisfait jusqu’à présent, donc le positionnement n’est pas nécessaire.

#main { position: relative; width: 100%; margin: 0px; padding: 0px; background-color: #ccc; overflow: hidden;

Le bloc de service principal est le conteneur des blocs restants contenant du contenu. De plus, il n'a pas de bordure d'indentation, mais width: 100% - la largeur principale est donc égale à la largeur de la fenêtre du navigateur. Il n'y aura pas de texte dans le bloc, mais c'est très important pour notre mise en page. Premièrement, pour le positionnement complet des blocs CSS des menus droit et gauche, deuxièmement, pour créer un arrière-plan de menu gris (#ccc) pour toute la hauteur de la page.

Comme mentionné, position: relative signifie le décalage du bloc par rapport à son emplacement dans le flux normal. Mais une fois que la taille de l'offset n'est pas spécifiée, le bloc sera situé de manière similaire au flux CSS normal. Position de déclaration: relative; nécessaire pour le positionnement complet des blocs de menu latéral. Comme vous vous en souvenez, le positionnement complet en CSS est calculé à partir d'une fenêtre du navigateur ou d'un bloc parent, plein ou relativement positionné.

Un fond gris est défini pour principal. Ceci est fait pour la peinture remplie des blocs de menu latéraux. En CSS, apparemment, vous ne pouvez pas définir la hauteur (hauteur) du bloc sous forme de pourcentage de la fenêtre du navigateur. Par conséquent, la hauteur est déterminée en fonction de la capacité du contenu. C'est-à-dire que les colonnes latérales du menu auront des hauteurs différentes et que leur arrière-plan ne leur appartient pas. Par conséquent, nous remplissons le fond principal. Ensuite, nous allons remplir le bloc de contenu avec une autre couleur en tant que «pied de page» de la mise en page. Toutefois, les colonnes avec un arrière-plan transparent auront visuellement la même hauteur. Bon marché aussi en colère.

La propriété de débordement: hidden; Il est nécessaire de supprimer le bogue mineur IE6. Internet Explorer 6 sous Windows XP avec le thème d'écran XP (dans le cas du thème Windows classique, tout va bien) estime que la page ne rentre pas complètement dans la fenêtre du navigateur et qu'une barre de défilement horizontale est également ajoutée. Il ne défile que 1 à 2 pixels. Apparemment, le thème XP augmente la largeur des éléments d'interface du navigateur, mais celui-ci (le navigateur) n'en est nullement conscient ...

De toute façon, débordement: caché; indique que le contenu qui dépasse les contours du conteneur (un exemple vital est une très longue expression dans un bloc CSS étroit) est également coupé et que l'utilisateur ne dispose d'aucune possibilité (barres de défilement, par exemple) pour afficher ce contenu. Dans notre cas, le conteneur est le bloc principal, 100% large dans la fenêtre du navigateur, mais le contenu est constitué de blocs imbriqués.

#content { width: 58%; margin: 0px 20% 0px 20%; padding: 1%; background-color: #f0f0f0; } #footer { width: 58%; margin: 0px 20% 0px 20%; padding: 1%; background-color: orange; }

CSS bloque le contenu principal est aussi un "pied de page". Un fond gris clair pour la lisibilité - un fond blanc comme neige et une police noire sont extrêmement contrastés et peuvent également ennuyer. Orange est utilisé pour le pied de page. Le reste de la description du bloc CSS est identique.

Les deux occupent toute la largeur de la page. Largeur du contenu 58%. Retraits externes (notation abrégée dans le format - marge: haut gauche bas droite;) 20% à gauche et 20% à droite. De plus, le blocage interne du contenu de la trame du bloc est effectué à 1% en haut, à gauche, à droite et en bas. Nous considérons la taille horizontale du bloc CSS de gauche à droite: 20% + 1% + 58% + 1% + 20% = 100% .

Ainsi, la largeur du pied de page contient également 100% du bloc principal parent, qui occupe à son tour 100% du corps. La nuance est que les marges extérieures de la marge sont de 20% de chaque côté, les marges extérieures du bloc sont transparentes, c’est-à-dire qu’elles ne sont pas colorées. Les blocs de contenu CSS occupent également toute la largeur de la fenêtre, et jusqu’à présent, le choix de la place pour les menus latéraux n’est pas clairement défini.

#leftmenu { position: absolute; top: 0px; left: 0px; width: 18%; margin: 0px; padding: 1%; } #rightmenu { position: absolute; top: 0px; right: 0px; width: 18%; margin: 0px; padding: 1%; }

La réponse est en position: absolue. Pour un positionnement complet, le flux normal et les autres blocs CSS n’ont aucune importance. Un point de référence est nécessaire, la taille du décalage vertical est également la largeur du bloc. Le point de départ peut être une fenêtre de navigateur, un bloc CSS parent totalement ou relativement positionné. C’est pourquoi nous avons utilisé la position: relative pour le bloc principal ainsi que le décalage d'origine.

Le bloc de menu de gauche (panneau de navigation de gauche) est positionné à partir du bloc CSS principal. Le décalage du haut à gauche est également de 0 pixels. Pour le menu droit, le même décalage, mais en haut également sur la droite. La largeur des deux blocs est de 20% (1% padding-left + 18% width + 1% padding-right) par rapport au parent principal. En fait, les menus de gauche et de droite se superposent aux blocs de contenu et au pied de page - plus précisément, à leurs bords extérieurs transparents de la marge!

La hauteur du menu latéral dépend du contenu. Les menus n’ont pas de couleur d’arrière-plan; leur arrière-plan est donc le fond gris du bloc principal. Les marges du contenu sont également transparentes. Pour cette raison, visuellement, les menus latéraux ont la même hauteur et sont également remplis en gris.

#content p, #leftmenu p, #rightmenu p { margin-top: 0px; } #header p, #footer p { margin-top: 0px; margin-bottom: 0px; }

Les dernières retouches. À l'intérieur des blocs, les informations sont divisées en paragraphes par la balise <p>. <p> est un élément de bloc qui possède ses propres champs externes. Internet Explorer 6 combine la marge et le remplissage de nos blocs CSS. Et Opera et Mozilla les résument, le résultat est un «battement» extrêmement impressionnant du texte situé au-dessus et au-dessous des limites du bloc. Ce code supprime les retraits extérieurs verticaux des éléments imbriqués dans les blocs CSS de la présentation.

Style CSS pour Internet Explorer 5

Notre mise en page s’affiche facilement dans Internet Explorer 6, ainsi que dans les dernières versions de Mozilla et Opera. Mais Internet Explorer 5 a son propre regard sur CSS:

Mauvaise décoration de notre mise en page CSS avec Internet Explorer 5

Selon les "compteurs" les plus populaires de Runet - spylog, hotlog aussi liveintenet - Internet Explorer 5 est utilisé par environ 18% des utilisateurs; il est donc malheureusement impossible de refuser la prise en charge de ce navigateur.

La solution est évidente: pour le mauvais navigateur, ne pas utiliser le même CSS ne connecte ce style que pour la 5ème version du patient.

<script language="javascript" type="text/javascript"> //<![CDATA[ if (navigator.userAgent.indexOf('IE 5')!=-1) document.write('<link rel="stylesheet" type="text/css" media="screen" href="/ie5.css" />'); //]]> </script>

en utilisant JavaScript, nous définissons le navigateur de l'utilisateur. S'il s'agit d'IE5, entrez le lien vers le fichier CSS ie5.css dans le code de la page (à l'aide du même script).

#header { width: 100%; } #content, #footer { width: 60%; } #leftmenu, #rightmenu { width: 20%; padding-left: 10px; padding-right: 10px; } #rightmenu{ left: 80%; }

Selon la spécification, l'espace horizontal occupé par le bloc CSS est calculé par la formule suivante: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. Dans ce cas, la largeur du contenu (texte, images, objets flash ...) est spécifiée par le paramètre width.

IE5 considère que la largeur détermine la largeur de tous les éléments de bloc visibles (la partie visible est tout sauf la marge), mais le résultat de la soustraction de la marge de la largeur des valeurs de la marge est également la bordure. Vous devez donc spécifier la mauvaise largeur pour tous les blocs à l'aide de la formule: espace occupé moins marge-gauche moins marge-droite.

Un autre bug - le texte du menu latéral "colle" à la périphérie du bloc. On peut voir qu’en haut (verticalement) il y a une empreinte (remplissage) de la face du bloc vers le contenu, mais pas horizontalement. Ceci est inhérent uniquement au menu latéral (la raison la plus probable étant le positionnement complet de ces blocs CSS), mais également au remplissage horizontal, il ne l'est également que s'ils sont indiqués en pourcentage. Nous plaçons des retraits à gauche également à droite pour les menus latéraux en pixels, dix suffiront.

La capture d'écran montre également que les colonnes de gauche et de droite se superposent. IE5 ne gère en aucun cas la propriété right de CSS, avec laquelle nous positionnons le bloc rightmenu horizontalement. Il faut lui prescrire le décalage déjà à gauche de 80% (60 + 20 - pourquoi exactement, je pense, c'est aussi clair).

CSS pour imprimer des pages

Mise en page CSS pour l'impression

La mise en page montre une paire de styles pour différents périphériques d'affichage:


style.css pour les navigateurs (media = "screen"), mais print.css pour les périphériques d'impression (media = "print"). En conséquence, les styles de données CSS copain avec un ami ne sont pas connectés. Décrivez également la page, chacun à sa manière. Le style pour print.css sera extrêmement simple:

body, #header, #main, #content, #footer { color: #000; background-color: #fff; } a { color: #000; } #leftmenu, #rightmenu { display: none; }

Définissez le fond blanc comme neige pour les blocs, faites en noir les éléments de texte. Les hyperliens (<a>) seront similaires en noir. D'accord, pour la conclusion sur le sceau, c'est raisonnable.

avec l'affichage de la directive: aucun; menu latéral complètement supprimé. Évidemment, la page sera imprimée pour le texte principal, le titre de la même chose ne fait pas mal. Le «sous-sol» reste lors de l'impression, en cas de besoin, vous pouvez également le supprimer également.

Conclusion

Nous avons une mise en page en 3 colonnes, cette mise en page est complètement décrite par CSS et également légèrement «diluée» en XHTML et JavaScript. Les avantages et les inconvénients de cette méthode de mise en forme CSS sont décrits ci-dessus (à la fin de l’article, vous pouvez aussi l’oublier - cela n’a pas très bien fonctionné, je suis d’accord).

Reste à choisir la police ainsi que les couleurs “à goûter”, à fixer à la mise en page “en caoutchouc” pas moins que la taille de la police “en caoutchouc”, pensez à la conception des titres, vous obtenez également la conception normale d'un site d'information, entièrement implémenté en CSS. Ce qui était également nécessaire pour prouver :)