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 disposition

Objectif

Notre tâche consiste à créer une mise en page à trois colonnes à partir de CSS. Cette disposition peut servir de base à un site d'information avec un "chapeau", à droite également les colonnes de gauche pour le menu d'informations supplémentaires, avec le bloc central de texte également un "sous-sol" pour les droits d'auteur, contacts, entre autres. Typique pour la mise en page du projet de contenu.

Sans aucun doute, cette mise en page ne peut pas être appelée un miracle d'une pensée de conception, mais vous pouvez toujours apporter ce modèle à l'apparence divine en sélectionnant les bonnes polices, leur taille, en ajoutant le parfait aussi le logo correct. Il ne sera pas difficile d'auto-compliquer la mise en page, en ajoutant de nouveaux blocs CSS.

Mise en page complète du site dans trois colonnes entièrement en CSS

Les technologies utilisées prennent également en charge les navigateurs

La mise en page du site sera entièrement réalisée en CSS, l'utilisation "occasionnelle" de XHTML sera également JavaScript.

La mise en page CSS utilisée est supportée par Internet Explorer 6, les versions actuelles de Mozilla sont également Opera. La route de quelques réglages, la mise en page fonctionnera également dans Internet Explorer 5. Cela devrait suffire. Notre CSS est également forcé de faire appel aux navigateurs de texte aussi à d'autres appareils exotiques.

L'efficacité du code dans IE 4, Netscape 4 et les anciens navigateurs n'a pas été vérifiée, mais je suis sûr qu'il y aura des problèmes. Cependant, ce n'est pas critique, regardez les statistiques de la popularité des navigateurs de hotlog, spylog aussi liveintenet.

Les avantages sont aussi des inconvénients de la méthode de mise en page du site CSS considérée.

La disposition a des avantages sérieux et des lacunes assez graves. Il est nécessaire de décider ce qui est le plus important pour votre site et ses visiteurs.

Inconvénients

  • Ne fonctionne pas dans Internet Explorer 4, Netscape Navigator 4 également les navigateurs plus anciens.
  • La mise en page CSS (la création de blocs et leur positionnement) n'est en aucun cas supportée par les navigateurs modernes. La page doit donc être testée dans tous les navigateurs de votre chambre, pour des différences mineures mais désagréables dans l'affichage de la page.
  • La farine avec positionnement vertical détermine également la hauteur des éléments dans CSS. Ce n'est pas si fier, à moins que vous ne soyez pas fan de l'ajustement de tous les éléments avec une précision allant jusqu'à un 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 avec un design vertical. Si les pages sont écrites manuellement (et non générées par des scripts), la pièce peut être terminée avec des sauts de ligne.
  • Il est difficile de se recycler à partir d'une disposition de table. Au début, de margin'ov aussi padding'ov deviendra malade :)

Plus:

  • Après avoir maîtrisé la mise en page CSS, il est facile de comprendre le code, de changer les styles. Avec un arrangement réfléchi de blocs CSS, les modifications de conception mineures ne sont pas susceptibles d'être difficiles - il suffit d'éditer le fichier avec CSS.
  • Les navigateurs de texte, ainsi que d'autres dispositifs limités pour capturer des informations, doivent aimer notre mise en page - sans styles, il s'agit d'un texte simple dans une colonne avec un nombre minimal d'éléments de conception XHTML.
  • Sans styles CSS (c'est-à-dire, XHTML pur), la mise en page est également le titre de la page tout en haut, suivi de l'en-tête de texte principal. "Teduha" (liens, copyrights, navigation, news - tout ça, sans raison l'internaute est arrivé sur la page) attend son heure tout en bas. Une telle disposition de l'information aura un effet bénéfique sur l'attitude du site de dispositifs simples pour conclure l'information, l'essence même des robots de recherche - ils aiment l'heure à laquelle la page a du texte, mais pas les éternelles étiquettes de table.
  • Affichage rapide par les navigateurs. Dans le cas de pages impressionnantes ou d'une connexion lente, le visiteur peut commencer à prononcer le texte principal, tandis que les menus côte-à-côte sont également chargés.
  • Disposition "en caoutchouc" - la largeur des blocs de la mise en page dépend de la taille de la fenêtre du navigateur, il n'y a donc pas d'espace écran utile inutile.
  • Mise en œuvre facile pour cette version de mise en page CSS de la page à imprimer.
  • Le code XHTML pur est aussi un design au moyen de CSS, mais pas de tables - c'est "cool" c'est aussi très à la mode :) .

Peut-être, les avantages l'emportent. Donc, si votre site n'est pas dédié à Windows 3.11 de la salle correspondante, si vous êtes prêt à maîtriser le modèle de bloc, CSS n'a pas non plus l'intention d'ajouter des éléments compliqués à la mise en page, vous pouvez en dire plus.

Un peu de la théorie de la mise en page du site CSS (création de blocs CSS de positionnement)

Il n'y a aucun désir ou possibilité d'exposer la théorie en détail. Ce sujet difficile est également vaste. Je vais essayer de "se débarrasser" des liens aussi brièvement indiquer ce qui sera directement utilisé dans la mise en page.

Donc, les liens:

Maintenant un peu seul. Un bloc est un élément rectangulaire d'une page Web, qui est spécifié en utilisant des éléments block (par exemple, <div> ou <p>) (dans bassurmanski, tags) de XHTML. Le bloc prend de l'espace et se termine par une translation de la ligne, la paire d'éléments <div> se trouvera sur la page l'une en dessous de l'autre, car ce sont des éléments de bloc. La paire de l'élément <i> ne sera en aucune façon, car ce sont des éléments en ligne.

En utilisant CSS, vous pouvez définir des paramètres de bloc - marge, bordure, remplissage interne et largeur réelle du contenu. Le contenu du bloc CSS peut afficher du texte, des images, des blocs imbriqués et des objets ... La propriété background-color définit la peinture d'arrière-plan (remplissage) du bloc, tandis que le champ de marge est toujours transparent. La description de ces propriétés est également la création d'un bloc CSS.

Sur le site www.ilovejackdaniels.com il y a un mémo utile sur CSS, d'où nous nous sommes permis d'éliminer le schéma de bloc CSS, ne pas violer le droit d'auteur pour quoi que ce soit, mais pour plus de commodité. Et bien sûr pardonnez-moi ilovejackdaniels.com, qui possède également tous les avantages imaginables imaginables à cette image:

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

La hauteur du bloc CSS dans la pratique ne peut en aucun cas être définie (il s'agit de la disposition "en caoutchouc"), bien sûr, nous n'en avons pas non plus besoin. Mais la largeur du bloc est notre tout, elle est composée de la largeur: marge-gauche + bordure-gauche + remplissage-gauche + largeur + remplissage-droite + frontière-droite + marge-droite. Dans la mise en page il n'y aura pas de bordure, tout sera fait en y ajoutant aussi de la largeur - donc c'est plus facile et plus rapide.

La mise en page du site CSS est "en caoutchouc", c'est-à-dire que sa largeur dépend de l'espace disponible (taille de la fenêtre du navigateur), donc la largeur est également complétée en pourcentage. Les pourcentages spécifient la largeur par rapport à l'élément parent. L'élément parent est soit une fenêtre de navigateur (en fait, une balise <body>) ou tout élément de bloc dans lequel l'élément est imbriqué (dans la mise en page plusieurs <div> seront imbriqués dans un parent <div> -block).

Des blocs sont créés, avec l'aide de CSS leurs propriétés (padding, largeur) sont définies. Il est nécessaire de les organiser correctement sur la page. Cela a également un positionnement CSS. Si vous ne décrivez pas l'emplacement des blocs sur la page, ils seront affichés par le navigateur l'un au-dessous de l'autre, selon l'ordre de leur description dans le code XHTML de la page. Cet arrangement est appelé un flux normal.

Il y a plusieurs façons de faire de la technologie. Nous utiliserons également la position: propriété absolue (positionnement CSS absolu): position: relative (positionnement relatif). Ensuite, vous devez déterminer le décalage (en pixels pour une mise en page précise du site ou en pourcentage pour le bloc "caoutchouc") sur la page à partir du point de référence supérieur ou inférieur, gauche ou droit. Quel est ce repère?

Pour la position: relative, le point de référence est l'emplacement du bloc dans le flux normal. E. - position: relative; en haut: 10%; à gauche: 10%; - le bloc se déplace également de 10% vers le bas, également vers la droite par rapport à son emplacement normal. Si vous définissez le positionnement relatif en aucun cas pour définir le décalage, alors le bloc sera situé dans le flux normal.

Pour la position: absolue, le point de référence est l'élément connu avec précision; le flux normal et l'emplacement des autres éléments ne jouent pas de rôle. Ce point peut être une fenêtre de navigateur ou un bloc parent, complet ou relativement positionné. Le décalage est également déterminé par les pixels ou le pourcentage de propriétés en haut, à gauche, en bas et à droite.

Essayons d'extraire de ces règles apparemment incompatibles avec la vie de l'étincelle raisonnable - cependant, c'est le code de disposition du site de trois colonnes.

XHTML aussi le code de mise en page CSS

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

Ici aussi d'autres "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,15700168,15700186,15700201&amp;amp;usg=ALkJrhj4YTbJSN1QJ_KUALsFu6DfihceoQ#&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,15700168,15700186,15700201&amp;amp;usg=ALkJrhj4YTbJSN1QJ_KUALsFu6DfihceoQ#&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,15700168,15700186,15700201&amp;amp;usg=ALkJrhj4YTbJSN1QJ_KUALsFu6DfihceoQ#&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,15700168,15700186,15700201&amp;amp;usg=ALkJrhj4YTbJSN1QJ_KUALsFu6DfihceoQ#&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,15700168,15700186,15700201&amp;amp;usg=ALkJrhj4YTbJSN1QJ_KUALsFu6DfihceoQ#&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,15700168,15700186,15700201&amp;amp;usg=ALkJrhj4YTbJSN1QJ_KUALsFu6DfihceoQ#&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,15700168,15700186,15700201&amp;amp;usg=ALkJrhj4YTbJSN1QJ_KUALsFu6DfihceoQ#&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,15700168,15700186,15700201&amp;amp;usg=ALkJrhhiX45XdIjuBms4TOrS3EV4LMCYoQ&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 étape consiste à déclarer le type d'acte, sinon la mise en page deviendra incorrecte (dans le style d'Internet Explorer 5) affichée dans IE 6 également Opera. Avec un DOCTYPE sans erreur, il n'y a pas de problème.

La balise <link> charge les styles CSS des fichiers externes vers la page. Le style général de style.css se trouve à la racine du site (comme la position, ce dossier / public_html) est également destiné aux navigateurs informatiques (media = "screen"). Le style print.css sera utilisé pour l'impression, à ce sujet juste en dessous. Ensuite, en utilisant JavaScript, nous définissons le navigateur de l'utilisateur, s'il s'agit d'Internet Explorer 5, il reçoit un style CSS du fichier ie5.css.

Le premier est l'en-tête du bloc div, destiné au titre de la page. Il n'y a pas de texte dans le bloc de service principal, mais il contient 4 blocs: contenu pour le texte principal de la page, leftmenu est également rightmenu pour le gauche et le menu droit, respectivement, également un bloc de pied de page pour le "sous-sol".

Tous les blocs sont seulement définis en code XHTML, pour leurs propriétés aussi l'emplacement donne la réponse à CSS.

Style CSS général

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

La première étape consiste à définir le style du <body> (c'est-à-dire, la fenêtre du navigateur) - supprimez les externes et ajoutez 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 retraits externes (margin: 0px;) sont supprimés, le remplissage orange est également la largeur de 100% de l'élément parent (c'est <body>). 100% est constitué de 98% du contenu du bloc et 1% pour le rembourrage-gauche, également rembourrage-droit. Rembourrage raccourci: 1%; Spécifie un retrait des quatre côtés (haut, gauche, bas, droite).

L'unité sera située dans un flux normal, ce dont nous sommes satisfaits jusqu'à présent, il n'y a donc pas besoin de positionnement.

#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 avec le contenu. Il n'a pas de frontières aussi, mais largeur: 100% - par conséquent, la largeur de main est égale à la largeur de la fenêtre du navigateur. Dans le bloc il n'y a pas de texte, mais c'est très important pour notre mise en page. Tout d'abord, pour positionner complètement les blocs CSS de droite, également le menu de gauche, et deuxièmement, pour créer un arrière-plan de menu gris (#ccc) sur toute la hauteur de la page.

Comme mentionné, la position: relative désigne le déplacement du bloc par rapport à son emplacement dans le flux normal. Mais une fois que la taille du déplacement n'est pas définie, le bloc sera situé de manière similaire au flux CSS normal. Position de l'annonce: relative; Il est nécessaire de positionner complètement les blocs de menu latéraux. Comme vous vous en souvenez, le positionnement complet dans CSS est compté à partir de la fenêtre du navigateur ou du bloc parent, qui est complet ou relativement positionné.

L'arrière-plan principal est gris. Ceci est fait pour la peinture terminée des blocs de menu latéraux. En CSS, à en juger par tout, vous ne pouvez pas définir la hauteur du bloc comme un pourcentage de la fenêtre du navigateur, de sorte que 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 le réglage de l'arrière-plan n'aura aucun sens. Par conséquent, nous remplissons l'arrière-plan avec principal. Ensuite, remplissez l'autre couleur avec le bloc de contenu, également le "sous-sol" de la mise en page, mais les colonnes avec un fond transparent auront visuellement la même hauteur. Bon marché est également en colère.

Propriété de dépassement de capacité: masquée il est nécessaire de supprimer le bug trivial IE6. Internet Explorer 6 exécutant Windows XP avec un thème d'écran XP (dans le cas du thème Windows classique tout va bien) pense que la page ne rentre pas complètement dans la fenêtre du navigateur et ajoute également une barre de défilement horizontale. Scrolls seulement 1-2 pixels, apparemment XP-thème augmente la largeur des éléments de l'interface du navigateur, mais il (le navigateur) ne le réalise en aucune façon ...

Quoi qu'il en soit, débordement: caché; indique que le contenu qui s'étend au-delà des bords du conteneur (l'exemple de vie est une expression très longue dans un bloc CSS étroit) est tronqué, et l'utilisateur n'a pas la possibilité (barres de défilement, par exemple) de voir ce contenu. Dans notre cas, le conteneur est le bloc principal, 100% de largeur dans la fenêtre du navigateur, mais les contenus sont des 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; }

Les blocs CSS du contenu principal sont également "sous-sol". Fond gris clair pour une lecture facile - le fond blanc comme la neige est aussi une police noire extrêmement contrastée peut également être fatigué de l'œil. Le pied de page utilise l'orange. Sinon, la description CSS des blocs est la même.

Les deux occupent toute la largeur de la page. La largeur du contenu est de 58%. Indentation externe (l'abréviation est utilisée dans le format - marge: en haut à gauche en bas à droite;) 20% à gauche et 20% à droite. De plus, le remplissage interne du contenu de la trame du bloc dans 1% de haut, de la gauche, de la droite aussi d'en bas. 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 à son tour prend 100% du corps. Nuance - la marge de marge est de 20% de chaque côté, l'indentation extérieure du bloc est transparente, c'est-à-dire que la couleur n'est pas coulée. Blocs de contenu CSS également le pied de page occupent toute la largeur de la fenêtre, et jusqu'à présent, il n'est pas tout à fait clair dans quel endroit pour prendre la place pour les menus latéraux.

#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 n'est également pas affecté par d'autres blocs CSS. Une granularité de comptage est requise, la taille de déplacement vertical est également horizontale et la largeur du bloc. Le point de départ peut être une fenêtre de navigateur, un bloc CSS parent complet ou relativement positionné. Maintenant, il est clair pourquoi pour le bloc principal, nous avons utilisé la position: relative également zéro décalage.

Le bloc gauche du menu (barre de navigation de gauche) est positionné à partir du CSS du bloc principal, le décalage supérieur est également à gauche - 0 pixel. Pour rightmenu le même décalage, mais d'en haut aussi à droite. La largeur des deux blocs est de 20% (1% de remplissage à gauche + 18% de largeur + 1% de remplissage à droite) à partir du parent principal. En fait, le menu de gauche est également à droitemenu superposé sur les blocs de contenu aussi le pied de page - plus précisément, sur leurs bords extérieurs transparents de la marge!

La hauteur des barres latérales dépend du contenu. Le menu n'a pas de couleur d'arrière-plan, donc l'arrière-plan pour eux est le remplissage gris du bloc principal. Les marges du contenu sont également transparentes. Pour cette raison, les menus latéraux visuels ont la même hauteur et sont grisés.

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

Touches finales. À l'intérieur des blocs, l'information est divisée en paragraphes par la balise <p>. <p> est un élément de bloc qui a ses propres champs externes. Internet Explorer 6 combine la marge et le remplissage de nos blocs CSS. Opera aussi Mozilla les résume, résultant en un "découpage" extrêmement impressionnant du texte du haut et du bas des limites du bloc. Ce code supprime les indentations verticales extérieures pour les éléments imbriqués dans les blocs de mise en forme CSS.

Style CSS pour Internet Explorer 5

Notre mise en page est facilement affichée dans Internet Explorer 6 également dans les dernières versions de Mozilla aussi Opera. Mais Internet Explorer 5 a son propre regard sur CSS:

Finition erronée de notre codage CSS avec Internet Explorer 5

Selon les "compteurs" les plus populaires de Runet - spylog, hotlog est aussi liveintenet - Internet Explorer 5 tourne autour de 18% des utilisateurs, donc vous ne pouvez pas refuser de supporter ce navigateur, malheureusement.

La solution est évidente - pour le mauvais navigateur, nous faisons le mauvais CSS, et nous nous connectons de cette manière seulement 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, si c'est IE5, nous entrons dans le lien vers le fichier CSS ie5.css dans le code de la page (en utilisant le 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 occupé par le bloc CSS est calculé horizontalement par la formule: marge-gauche-bordure-gauche-remplissage-gauche-largeur-remplissage-droite-frontière-droite-marge-droite. La largeur du contenu (texte, images, objets flash ...) est spécifiée par le paramètre width.

IE5 suppose que la largeur spécifie la largeur de tout l'élément visible du bloc (la partie visible est tout en plus de la marge), mais le résultat de la soustraction des valeurs de remplissage de la bordure reste également sur le contenu du bloc. Donc, vous devez spécifier la mauvaise largeur pour tous les blocs par la formule - l'espace occupé moins la marge - gauche moins marge - droite.

Un autre bug - le texte du menu latéral "coller" à la périphérie du bloc. On peut voir qu'il y a un remplissage depuis le bord du bloc jusqu'au contenu (verticalement), mais horizontalement - non. Il n'est inhérent que dans le menu latéral (la raison, très probablement, dans le positionnement complet de ces blocs CSS), seulement pour le remplissage horizontal est également seulement si elles sont spécifiées en pourcentage. Réglez le rembourrage à gauche aussi à droite pour le menu latéral en pixels, dix devraient suffire.

Aussi dans la capture d'écran, vous pouvez voir que le gauche est également empilé l'un sur l'autre. IE5 ne gère en aucun cas la propriété de droite CSS, avec laquelle nous plaçons horizontalement le bloc rightmenu. Il faut lui prescrire le déplacement déjà à gauche de 80% (60 + 20 - pourquoi tellement, je pense, est aussi très clair).

CSS pour imprimer des pages

Mise en page CSS pour l'impression

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


style.css pour les navigateurs (media = "screen"), mais print.css pour les imprimantes (media = "print"). En conséquence, les données CSS styles buddy avec un ami ne sont pas liées, elles décrivent également la page chacune à sa manière. Le style pour print.css deviendra complètement simpliste:

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

Nous définissons l'arrière-plan blanc comme neige pour les blocs, les éléments de texte sont rendus noirs. Les hyperliens (<a>) sont similaires au noir. D'accord, pour la conclusion d'imprimer c'est raisonnable.

en utilisant l'affichage: none directive; menu latéral complètement enlevé. De toute évidence, la page sera imprimée pour le texte principal, le titre est similaire en aucune façon empêche. "Cellar" reste lors de l'impression, si nécessaire, vous pouvez toujours toujours le supprimer.

Conclusion

Nous avons obtenu une mise en page en 3 colonnes, cette mise en page est complètement décrite au moyen de CSS, et le XHTML est aussi légèrement "dilué" avec JavaScript. Les avantages sont aussi des inconvénients de cette méthode: les mises en page CSS sont décrites ci-dessus (à la fin de l'article, vous pouvez également l'oublier - cela ne s'est pas produit très rapidement, je suis d'accord).

Il reste à choisir la police et la couleur "goûter", attacher à la disposition "caoutchouc" ne pas moins "caoutchouc" taille de la police, de penser à la conception des rubriques, obtiendra également un design normal du site d'information, entièrement mis en œuvre en CSS. Ce qui était également nécessaire pour prouver :)