Se connecter avec
S'enregistrer | Connectez-vous

Problème CSS et Fiefox

Dernière réponse : dans Programmation

Bonjour,

Je suis en train de ddévelopper mon site en xhtml 1.1, css2 et js1.2 et je tombe sur un problème d'affichage sous Mozilla Firefox (ca passe sans trop de souci sou MSIE et Opéra).

Alors, je vais tenter de m'expliquer : en bas de la page, il y a le pied de page et une zone nommée commande. Ces deux div sont intégrée dans une grande div principale qui fait toute la page.

voici par exemple le code css qui définit la div pied :
  1. #pied {
    

  2.   border: 1px dotted #CCDDFF;
    

  3.   background-color: #FFFFAA;
    

  4.   color: #FF5500;
    

  5.   position: absolute;
    

  6.   bottom: -27px;
    

  7.   height: 20px;
    

  8.   left: 0px;
    

  9.   right: 240px;
    

  10.   height: 15px;
    

  11.   float: left;
    

  12.   clear: left;
    

  13.   margin: 0px;
    

  14.   padding: 0px;
    

  15.   padding-left : 10px;
    

  16.   padding-right : 10px;
    

  17.   margin-top: 8px;
    

  18.   margin-bottom: 5px;
    

  19.   font-size: 10px;
    

  20.   overflow: hidden;
    

  21. }


Bon, le placement au tout début est correct. Le problème surgit si l'on augmente la taille du contenu de façon a dépasser la hauteur de l'écran (de façon à faire apparaitre une barre de scrolling verticale). Le pied et les commandes se placent alors bien. Mais si on rediminue le contenu, ces deux div restent à la même place, c'est à dire tout en bas. Un clicque du bouton du milieu de la souris permet de les replacer en haut !

Bon, je ne suis peut-être pas très clair donc je vais vous montrer l'exemple concret : http://mc.alsimon.net
Pour tester, il vous suffit de sélectionner 25 sur le nombre de lettres (ca diminuera le contenu et donc la taille de la page. Regarder sous Firefox, le pied de page est en bas ! Cliquez du bouton du milieu, il revient la où j'aimerais qu'il soit.
Ce problème n'apparait pas sous IE ni sous Opéra (qui a d'autres légers problèmes tout de même).

Si quelqu'un a une idée de comment ca se fait et de comment je puis le résoudre...

PS : je puis vous fournir plus de code sur la css utilisée si vous me précisez quelle partie.

Merci d'avance.

Autres pages sur : probleme css fiefox

Lassé par la pub ? Créez un compte

Merci de ton aide, Anubis.
Mais je n'y arrive pas:
J'ai essayé comme tu ma conseillé de placer mes deux div (commandes et pied) dan un conteneur (div) positionné en relatif.
Il faut que je garde leur position absolue pour les placer horizontalement.
Si je les mets par rapport au top (si je veux les placer par rapport au haut de la div précédente), il me les places tout en haut, à la hauteur du menu !
Si je les place par rapport à bottom, le problème reste le même (avec quelques autres problèmes pour ajuster la hauteur, mais ca c'est résolvable).

Ais-je bien compris ton idée, qu'en penses-tu?

Citation :
PS, ca m'a permis de voir aussi que j'avais fait du travail baclé dans ma css
Je la corrige, peut-être est-ce que ca me permettra de voir l'erreur plus facilement ;) 


voici une illustration de ce dont je te parlais
pas de problème de calque qui ne veut pas se repositionner

note que je n'utilise à aucun endroit l'attribut css 'position'
  1. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
    

  2. 	<head>
    

  3. 		<title></title>
    

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

  5. 		<style type="text/css">
    

  6. /* <![CDATA[ */
    

  7. div {
    

  8. 	border: 1px dashed black;
    

  9. }
    

  10. #tete {
    

  11. 	background-color: yellow;
    

  12. 	width: 100%;
    

  13. 	height: 75px;
    

  14. }
    

  15. #corps {
    

  16. 	width: 100%;
    

  17. 	height: 500px;
    

  18. 	background-color: aqua;
    

  19. }
    

  20. #pied {
    

  21. 	width: 100%;
    

  22. 	height: 40px;
    

  23. }
    

  24. #commandes {
    

  25. 	border-top: none;
    

  26. 	width: 200px;
    

  27. 	background-color: aqua;
    

  28. 	margin-top: -2px;
    

  29. 	margin-right: 10px;
    

  30. 	float: right;
    

  31. 	height: 50px;
    

  32. }
    

  33. #infos {
    

  34. 	margin-right: 300px;
    

  35. 	background-color: green;
    

  36. }
    

  37. /* ]]> */
    

  38. 		</style>
    

  39. 	</head>
    

  40. 	<body>
    

  41. 		<div id="tete">
    

  42. 			<a onclick="document.getElementById('corps').style.height = '500px'">Cliquer ici pour agrandir le corps</a><br/>
    

  43. 			<a onclick="document.getElementById('corps').style.height = '100px'">Cliquer ici pour rétrécir le corps</a>
    

  44. 		</div>
    

  45. 		<div id="corps"></div>
    

  46. 		<div id="pied">
    

  47. 			<div id="commandes">commandes</div>
    

  48. 			<div id="infos">informations</div>
    

  49. 		</div>
    

  50. 	</body>
    

  51. </html>

Un site avec des tutos de CSS, notemment des mises en pages : AlsaCreations >> http://css.alsacreations.com/

Sinon, il y a toujours le classique :
>> http://openweb.eu.org/

Par contre, tu devrais déplacer tout ton code JavaScript dans un fichier externe.. Ca fait assez moche dans le validateur XHTML1.1 dont tu présente le logo et le lien en excellente place sur ta page ...... -> "This page is not Valid XHTML 1.1!"

Et, puisque nous sommes en France et à l'heure de l'Euro, passer en 'charset=iso-8859-15'..

:jap: 

merci pour les liens, je vais plancher sur ca.
pour le javascript, le mettre dans un fichier externe, je suis en traind e m'en occupé (c'est parce que je voulais développé le tout en même temps, donc j'avais tout rassemblé).

Pour la norme, je ne savais pas qu'il y en avait des plus appropriées, merci du renseignement, je penserais à l'intégrée.

Merci beaucoup...

Citation :
Pour la norme, je ne savais pas qu'il y en avait des plus appropriées, merci du renseignement, je penserais à l'intégrée.

En fait, le jeu ce caractères iso-8859-1, aussi connu sous le nom de Latin1, est l'ancien jeu de caractères multi-langues de l'europe de l'ouest. Depuis l'arrivée de l'Euro, pour l'intégration du symbole "€" on est passé en iso-8859-15 ou Latin9..

En même temps, pour la français, ils ont enfin pensé à ajouter le "œ" et son dérivé majuscule "Œ", ces deux qui avaient été oubliés lors de l'établissement du jeu de caractères.. Pour la petite histoire, celui qui avait transmis le jeu de caractère à l'ISO n'avait pas inclu le "o-e-dans-l'o", pourtant bien connu dans les mots "œuf" et "cœur" (par exemple), simplement parceque son imprimante ne les possédait pas..

Histoire des normes ISO_8859-1 et ISO_8859-15 ici :
>> http://fr.wikipedia.org/wiki/ISO_8859-1
>> http://fr.wikipedia.org/wiki/ISO_8859-15

Voili..

Ca y est, pour la feuille de style, c'est corrigé ! Merci beaucoup Anubis, grâce à ton exemple, j'ai pu largement amélioré ce que j'avais fait.
J'ai également changé de norme, merci a toi Johan et Pirlouit, ton dernier lien m'a beaucoup intéréssé.
Il me reste encore une question sur le css (je n'ai pas trouvé la réponse dans tes tutoriels) :
Est-il possible imbriqué en css?
(du style :

  1. #cmd {
    

  2.   float: right;
    

  3.   height: 20px;
    

  4.   width: 200px;
    

  5.   border: 1px solid #ccc;
    

  6.   border-top: none;
    

  7.   margin: 0px;
    

  8.   margin-left: 5px;
    

  9.   padding: 5px;
    

  10.   background-color: #CCDDFF;
    

  11. }
    

  12.  
  13. #cmd li {
    

  14.   list-style-type: none;
    

  15.   margin: 0px;
    

  16.   margin-left: 5px;
    

  17.   margin-right: 0px;
    

  18.   padding: 0;
    

  19.   float: left;
    

  20. }


devient quelque chose du genre :

  1. #cmd {
    

  2.   float: right;
    

  3.   height: 20px;
    

  4.   width: 200px;
    

  5.   border: 1px solid #ccc;
    

  6.   border-top: none;
    

  7.   margin: 0px;
    

  8.   margin-left: 5px;
    

  9.   padding: 5px;
    

  10.   background-color: #CCDDFF;
    

  11.   li {
    

  12.     list-style-type: none;
    

  13.     margin: 0px;
    

  14.     margin-left: 5px;
    

  15.     margin-right: 0px;
    

  16.     padding: 0;
    

  17.     float: left;
    

  18. }


(C'est une question juste par curiosité).

Sinon, si vous avez d'autres remarques a me faire, je prends tout, tant que ca me fait avancer.

Je suis au courant pour des propriétés de styles qui sont dans le code html et qui sont à déplacer dans la feuille de style, le javascript a mettre en fichier externe (je suis dessus) et les quelques modifications pour mon site au normes xhtml 1.1 du w3c (il n'y a pas grand choze, juste enlever quelques onLoad du code HTML...)

Si vous avez d'autres commentaires...

Merci à vous deux et bonne nuit

PS : J'allais oublier, le site modifié (la nouvelle version avec les feuilles de styles) a été mis en ligne, donc toujours à l'adresse : http://mc.alsimon.net

PS2: J'ai testé le site pour les arpenteurs suivants:
Mozilla 1.0.6
MSIE 6.0
Netscape 7
Netscape 6.2 (Il y a des problèmes d'affichage sur ce dernier, en cours de résolution).
Aussi, si vous pouviez testé si le site passe correctement sur d'autres arpenteurs auquels je n'ai pas accès (Konkeror...). Merci d'avance ;) 

Citation :
Ca y est, pour la feuille de style, c'est corrigé ! Merci beaucoup Anubis, grâce à ton exemple, j'ai pu largement amélioré ce que j'avais fait.
J'ai également changé de norme, merci a toi Johan et Pirlouit, ton dernier lien m'a beaucoup intéréssé.
Il me reste encore une question sur le css (je n'ai pas trouvé la réponse dans tes tutoriels) :
Est-il possible imbriqué en css?
(du style :

  1. #cmd {
    

  2.     (...)
    

  3. }
    

  4.  
  5. #cmd li {
    

  6.     (...)
    

  7. }


devient quelque chose du genre :

  1. #cmd {
    

  2.     (...)
    

  3.   li {
    

  4.       (...)
    

  5.   }
    

  6. }



c'est possible mais ce n'est pas la bonne syntaxe

il faudrait écrire :
  1. #cmd {
    

  2.     (...)
    

  3. }
    

  4.  
  5. #cmd > li {
    

  6. /* s'applique à tous les éléments 'li', enfants de l'élément d'id 'cmd' */
    

  7.     (...)
    

  8. }
    

  9.  
  10. #cmd li {
    

  11. /* s'applique à tous les éléments 'li', descendants de l'élément d'id 'cmd' (enfants, petits-enfants, etc.) */
    

  12.     (...)
    

  13. }

un peu d'aide en français :
http://www.yoyodesign.org/doc/w3c/css2/selector.html
http://www.startyourdev.com/css/css-selecteurs.html


voila bon courage

PS: vraiment pas mal ton appli
Lassé par la pub ? Créez un compte

Créer un nouveau sujet