Souci d'affichage sous FireFox (et autres...)

[Jiem]

J'ai récemment créé un petit site XHTML/CSS pour le ciné dans lequel je bosse. Je suis plutôt novice en programmation, ce qui fait que lorsque j'ai voulu le passer aux différents validators dispos sur le Web, ils m'ont indiqué des erreurs que je n'arrive pas à corriger, et j'ai pourtant essayé de résoudre les problèmes grâce à différents articles de ce site... voyez par vous-même, l'adresse temporaire du site est http://ji.em.free.fr/temp/ et le fichier de format .css se trouve dans le répertoire http://ji.em.free.fr/temp/format/.

Je suis pour ainsi dire... un peu bloqué par mon niveau...

Désolé si les erreurs vous paraissent flagrantes, et merci d'avance pour l'aide que vous pourrez m'apporter.

(et tant que j'y suis, j'ai copié-collé un javascript permettant d'afficher ou cacher des DIV en page 'prog.htm' mais il semblerait que celui-ci me provoque aussi des bugs d'affichanges... c'est un peu la galère pour moi...)

[golog]

Il y a plusieurs problèmes:

# dans ta déclaration de Doctype, tu as oublié de refermer les guillemets à la fin

# ton instruction meta doit être contenue dans l'en-tête (dans la balise head donc), et puisque c'est du XHTML, elle doit être "fermée" avec un "/", comme ceci:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Ceci corrigé, tu verras qu'il y a d'autres erreurs dans ta page, mais mieux vaut peut-être que tu vois d'abord par toi-même et que tu redemandes si tu ne comprends pas.

Pour la CSS maintenant, le problème est juste au niveau de l'élément scroll-bar, qui n'existe que pour Internet Explorer...

Modifié 13 Juin 2005 par golog

[Jiem]

Merci pour l'info !

J'ai passé mon aprem sur le code de ma page d'accueil 'index.htm' (les autres ne sont pas encore retouchées, je le ferai plus tard) et corrigé quasiment tout... à part 2 erreurs xhtml qui subsistent... mais l'affichage est toujours aussi mauvais sous firefox.

[golog]

Un premier problème : tu utilises les float sur pas mal de blocs (d'ailleurs inutile sur actuhaut1 et 2, puisque ils sont déjà contenus dans un bloc "floaté"), et tu ne spécifies pas au navigateur qu'à partir de tel endroit, il ne faut plus que les éléments suivent cette règle. Tu devrais mettre en place un élément au contenu fictif "cassant" ce comportement, du genre:

div.clearer {clear: both; line-height: 0; height: 0;}

que tu mets après tes éléments "floatés" dans ton code XHTML. Pour plus d'infos, tu peux aller voir ces articles:

http://www.openweb.eu.org/articles/initiation_float/

http://www.complexspiral.com/publications/containing-floats/

Tu peux déjà essayer cela, mais il restera certainement pas mal de problèmes! Je te conseille d'aller voir les nombreux articles présents sur ces 2 sites:

http://openweb.eu.org/

http://pompage.net/

Cela devrait déjà t'aider à y voir plus clair

[Jiem]

Merci ! je vais essayer... mais je ne sais pas si j'y arriverai...

Je poste si je bloque vraiment.

[Jiem]

J'ai (je pense ) résolu les plus gros problèmes de marges et placement sous firefox, mais j'ai toujours ce bug au niveau de la couleur de fond...

[golog]

Dans ta CSS, il faut que tu places le code ci-dessous (je ne le vois nulle part!):

.clearer {cear: both; line-height: 0; height: 0;}

Ensuite, dans ton code XHTML, tu dois placer ton div clearer après tous les éléments "floatés", mais dans le bloc qui les contient, c'est-à-dire:

<div class="contenu">

  <div class="dhcontenu">
  </div>

  <div class="agauche">
  
 	 [...]
 	 
  </div>
  
  <div class="actu">
  
 	 [...]
 	 
  </div>

                <div class="clearer"></div>
  
</div>

Toutefois, ton code n'est "pas propre" et beaucoup de classes y sont inutiles. Pour commencer, supprime les float sur actuhaut1 et 2. Ensuite, ton dhcontenu est inutile, tu peux aussi le supprimer et intégrer ton arrière-plan (le coin droit) au bloc contenu, comme ceci:

.contenu { 
margin: 0;
width: 760px;
background: #fff url(../images/gcoindh.gif) no-repeat 100% 0;
}

Pour la propriété background, tu peux aller voir cet article pour plus d'infos:

http://openweb.eu.org/articles/background_css/

(le heigh auto est inutile, inutile aussi de préciser les unités pour une valeur de 0, par contre j'ai vu que tu ne précisais pas l'unité pour les tailles de polices alors que c'est obligatoire!)

Il y aura beaucoup d'autres choses à revoir, mais tu peux déjà essayer cela.

[Domallia]

Bonjour

J'ai regardé ta page quelques seconde et je vois dans le code des balises qui n'ont pas leur place dans le code mais qui devrait ce trouver dans la feuille css :

<p style="font-size: 18;"><i>Prochaine réunion de </i>L'Ecran Réolais<i> :</i></p>

<p style="font size: 16;"><b>LUNDI 4 JUILLET 2005<br />21h<br />Mairie de La Réole</b></p>

<p style="text-align: center; font size: 16;"><b><i>L'Aurore</i></b> de F. W. Murnau (1927)<br />accompagné par le <i>Sunrise 7tet</i></p>

    <p style="text-align: justify;"><i>Evènement au REX !</i> Sur deux projections, 7 musiciens amateurs de la région, réunis pour l'occasion dans le <i>Sunrise 7tet</i>, ont fait le pari d'accompagner <i>L'Aurore</i>, le chef-d'oeuvre muet de Friedrich Willem Murnau, premier Oscar de l'histoire du Cinéma en 1927.<br />Le but de cet évènement n'est pas de refaire une partition au film, mais de proposer une interprétation musicale personnelle, inspirée du Jazz et des musiques classique et contemporaine, sur les images du film, pendant sa projection.</p>

    <p style="text-align: justify;">Le groupe travaille actuellement à l'élaboration et la mise en place de ce spectacle vivant unissant la musique et le cinéma.</p>

    <p style="text-align: justify; color: #808080;"><i>[ Composition du groupe : Carole Lacoste (flûte traversière) // Anne Lacoste (clarinette) // Jérôme Mascotto (saxophone alto, clavier) // Etienne Cantegrel (trompette, clavier) // Georges Lhoste (guitare) // Alain Saint-Laurent (basse) // Max Pavis (batterie, percussions) ]</i></p>

D'autant que ton doctype est en xhtml strict.

A plus, bon courage

[Jiem]

Oups désolé golog, j'avais fait ce que tu me décris là mais j'ai oublié de le balancer sur ftp...

Merci pour les autres infos je verrai ça de plus près ce week-end.

Dom à propos de ces balises dans le code, j'ai placé ça ici car ça m'embêtait de créer un div pour chaque style de paragraphe... mais en me renseignant de plus près je trouverai peut-être une autre solution.

Je m'y remettrai dans quelques jours, _AT_bientôt.

[Jiem]

J'ai un peu laissé tomber les corrections, et en faisant quelques mises à jour, quelques problèmes ont été résolus (pas tous )... mais un nouveau bug est apparu : en page "Programme" http://www.cinerex.free.fr/prog.htm les horaires des séances en rouge (dans div class="seancesgauche" et "seancesdroite" float right pour chaque film) ne s'affichent plus sous IE... encore une fois help... (y'a quelques autres syntaxes approximatives je m'en doute - la CSS est à http://www.cinerex.free.fr/format/)

Modifié 8 Juillet 2005 par Jiem