Webmaster Hub > Souci d'affichage sous FireFox (et autres...)

Version complète: sur le forum Webmaster Hub : Souci d'affichage sous FireFox (et autres...)

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Jiem

lundi 13 juin 2005 à 17:06

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

lundi 13 juin 2005 à 19:03

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:

CODE

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...

Jiem

mardi 14 juin 2005 à 15:47

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

mardi 14 juin 2005 à 16:37

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:

CODE

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

mardi 14 juin 2005 à 17:47

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

Je poste si je bloque vraiment.

Jiem

mercredi 15 juin 2005 à 09:52

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

mercredi 15 juin 2005 à 10:47

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

CODE

.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:

CODE

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:

CODE

.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

mercredi 15 juin 2005 à 13:13

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 :

CITATION

<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

jeudi 16 juin 2005 à 08:31

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

vendredi 8 juillet 2005 à 11:30

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.