28172 sujets

CSS et mise en forme, CSS3

[Résolue] Affichage déficient

Bonjour à toutes et à tous,

Affichage déficient

Je commence la création d'un site web. J'ai la surprise de constaer qu'un bandeau, bandeau2, ne s'affiche pas. Je n'arrive pas à corriger ce problème.

Fichier index

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<title>Accueil</title>
</head>
<body>
<div id="bandeau1">
<h1>Titre</h1>
</div>
<div id="bandeau2">
<div id="contenu">Ceci est le contenu</div>
<div id="pied_page">Ceci est le pied de page</div>
</div>
</body>
</html>


fichier styles

div {
  text-align: center;
margin-right:auto;
margin-left:auto
}
div#bandeau1 {
  clear: both;
  width: 995px;
  height: 50px;
  background-color: #00ccff;
}
div#bandeau2 {
  clear: both;
  width: 995px;
  height: 50px;
  background-color: #33ffff;
}

div#contenu {
  width: 995px;
  height: 645px;
  background-color: #ffcc00;
}
div#pied_page {
  clear: both;
  width: 995px;
  height: 50px;
  background-color: #33ff99;
}


Avec mes remerciements
Cordialement
Papy
Modifié par Jean Sympa (16 Feb 2011 - 17:34)
Bonjour, vous avez mis #contenu et #pied_page à l'intérieur de #bandeau2.

Dans vos css, #bandeau2 a une hauteur de 50px, #contenu une hauteur de 645px et #pied_page une hauteur de 50px. Cela ne peut pas fonctionner.

De plus, clear: both est inutile.
Bonjour,

Quelques remarques:
- La page ne semble pas avoir de Doctype. C'est un oubli? Utiliser un Doctype en bonne et due forme (dans une page HTML valide) est indispensable.
- #contenu et #pied_page sont à l'intérieur de #bandeau2, c'est voulu?
- J'éviterais d'appliquer des styles à tous les éléments DIV de la page. Mieux vaut utiliser un sélecteur CSS plus précis.
- Effectivement les clear:both qui clairsèment le code sont inutiles.
- Travailler avec un conteneur global (soit un DIV créé pour ça, soit directement l'élément BODY) permettrait de donner une largeur à l'ensemble de la page et de centrer le tout en une fois, sans avoir à appliquer ces styles sur chaque partie de la page.
- Les hauteurs fixes (height: ...px) c'est le mal. Smiley decu
- Le UTF-8 c'est bon, mangez-en. Les pages enregistrées et déclarées en ISO-8859-1, c'est un peu vieillot. Smiley smile
Merci fvsch,

La page a le Doctype. J'utilise KompoZer. Cet utilitaire place automatiquement le Doctype aux fichiers html. En revanche quand on copie le code, le Doctype n'est pas copié.
J'ai corrigé mes erreurs, j'obtiens le résultat attendu.

La notion de conteneur global m'intéresse. En plaçant un div, en tête de la feuille de style,
je pensais qu'il s'agissait d'un div global. Si ce n'est pas le cas, comment faut-il le créer?

Conseilles-tu de remplacer dans « content="text/html; charset=iso-8859-1">,
iso-8859-1 par UTF-8 ?

Cordialement
Papy
Jean Sympa a écrit :
Merci fvsch


Bonjour Papy, même si ma réponse était moins complète que celle de Florent, j'ai pris le temps de regarder et de répondre à la question... Smiley cligne
Jean Sympa a écrit :
La notion de conteneur global m'intéresse. En plaçant un div, en tête de la feuille de style, je pensais qu'il s'agissait d'un div global. Si ce n'est pas le cas, comment faut-il le créer?

Il faut bien distinguer la structure HTML et les styles CSS. Les styles CSS s'appliquent à des éléments HTML. Les sélecteurs CSS permettent d'indiquer à quels éléments de la page les styles doivent s'appliquer. Par exemple le sélecteur div#contenu signifie «tout élément DIV ayant un attribut id avec pour valeur "contenu"»; et le sélecteur div signifie «tout élément DIV quel qu'il soit».

Si tu veux rajouter un conteneur global, il faut rajouter un élément (à priori DIV) dans ton code HTML d'abord, et ensuite lui appliquer des styles CSS.

Voici une structure HTML possible (et corrigée en ce qui concerne #bandeau2):
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" 
content="text/html; charset=iso-8859-1">
  <title>Accueil</title>
  <link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="global">
    <div id="bandeau1"> 
      <h1>Titre</h1> 
    </div><!--#bandeau1-->
    <div id="bandeau2">
      ...
    </div><!--#bandeau2-->
    <div id="contenu">
      Ceci est le contenu
    </div><!--#contenu--> 
    <div id="pied_page">
      Ceci est le pied de page
    </div><!--#pied_page-->
  </div><!--#global-->
</body>
</html>

(Les commentaires tels que <!--#contenu--> ne sont pas obligatoires, c'est une simple convention d'écriture pour éviter de se retrouver avec des </div></div> </div></div> difficiles à déchiffrer.)

Jean Sympa a écrit :
Conseilles-tu de remplacer dans « content=&quot;text/html; charset=iso-8859-1">, iso-8859-1 par UTF-8 ?

Dans l'idéal, oui, mais en prenant soin également de bien enregistrer la page en UTF-8. Ça peut sans doute se changer dans les préférences du document ou de l'éditeur utilisé.
Maintenant, si c'est pour un site en français uniquement et que ça marche bien (les caractères s'affichent correctement) dans l'état actuel, ça n'est pas indispensable.
Merci à tous les deux,

A l'attention de Mabelle,

Tu as pris le temps de regarder et de répondre à la question. Ta réponse était pertinente.
Le problème était résolu.

A l'attention de fvsch,

Tu as bien fait d'élargir la question. Tes remarques sont instructives.

Cordialement
Papy
Sujet clos
Aller à