Problèmes d'affichage avec FF

Problèmes d'affichage avec FF - HTML/CSS - Programmation

Marsh Posté le 02-03-2005 à 11:04:13    

Bonjour !  
 
Quelques problèmes d'affichage avec Firefox 1.0.1 et 1.0:

  • Les <hr> ne s'affichent pas: FF laisse l'espace mais n'affiche pas le trait, tandis que sous IE ça passe très bien...
  • Sur une page j'ai un div conteneur, dans lequel j'ai un div texte, précédé d'un div pres (qui est un FIR). Pour ce dernier j'ai mis clear: right, pour éviter que mon texte ne s'affiche à le droite de celui-ci si la fenêtre est trop large. Sous IE ça passe impec, tandis que sous FF mon image se retrouve en dehors des div texte et conteneur :heink:


Mon code CSS:


.conteneur{
 width:100%;
 margin:0px;
}
 
.centre{
 padding:10px 10px 20px 10px;
 text-decoration:none;
 border:1px solid #FFCC66;
 margin:3px 210px 5px 1px;
 text-align:justify;
}
 
.pres{
 display:block;
 float:left;
 background:transparent url('pres.gif') no-repeat;
 background-position:0px 25px;
 width:100%;
 height:150px;
 clear:right;
}


 
Merci d'avance de vos idées !


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 02-03-2005 à 11:04:13   

Reply

Marsh Posté le 02-03-2005 à 11:06:46    

Envoi aussi un bout d'HTML

Reply

Marsh Posté le 02-03-2005 à 11:10:44    


- <hr/> fonctionne très bien sous Firefox, la vérité est ailleurs...
 
- c'est pas très claire ton explication, tu parle soudainement d'une image mais de quoi parle tu ? pres.gif ?
 
tu veux pas mettre un bout de code html en plus ?

Reply

Marsh Posté le 02-03-2005 à 11:11:54    

Hello :D

Code :
  1. <body>
  2. <div class="header"></div>
  3. <div id="navcontainer">
  4. <!-- Un beau menu -->
  6. <div class="newsdroit">
  7. <div class="news">
  9. <div class="newshead"></div>
  11. <div class="barrenews"></div>
  12. <div class="titrenews">Mardi 1 mars 2005</div>
  13. <!-- Les quelques news... -->
  14. </div>
  15. </div>
  17. <div class="conteneur">
  18. <div class="centre">
  19. <img src="afrique.jpg" width="192px" height="192px" style="float:left; margin:10px 10px 10px 10px;" alt="Le Tchad au coeur de l'Afrique Saharienne !">
  20. <div class="pres"><span>Bienvenue</span></div>
  22. <p align="justify"><em> Bla bla bla...</em></p>
  24. <p style="font-style:italic ">Bla bla bla... </p>
  26. <p align="justify"><em>Bla bla bla...</em></p>
  28. <h2 align="right" style="font-size:16px;">Eglantine</h2>
  29. <div class="horizontalrule"></div>
  30. </div>
  31. </div>


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 02-03-2005 à 11:13:52    

Y'a pas de <hr> dans ton code :??:

Reply

Marsh Posté le 02-03-2005 à 11:16:28    

rompi a écrit :

- <hr/> fonctionne très bien sous Firefox, la vérité est ailleurs...
 
- c'est pas très claire ton explication, tu parle soudainement d'une image mais de quoi parle tu ? pres.gif ?
 
tu veux pas mettre un bout de code html en plus ?


  • Concernant le <hr> j'ai essayé en remplaçant par <hr/>, même résultat :/
  • Pour l'image il s'agit d'une image de fond (contenant le texte que je veux afficher, mais en plus beau :o) de mon div pres, au-dessus duquel j'écris en span display:none. Du FIR, en somme :)


Le code HTML est ci-dessus.


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 02-03-2005 à 11:17:27    

FlorentG a écrit :

Y'a pas de <hr> dans ton code :??:


C'est sur une autre page mais je t'assure que le résultat est le même ;)
 
Ce code-ci est pour le second point (clear: right).


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 02-03-2005 à 12:08:18    

Le plus gros problème est que dans .pres tu met width à 100%,
ce qui fait que bienvenue passe à la ligne...
 Je ne suis pas très doué pour les float, mais voila un truc qui ressemble a ce que tu veux....
 
je te conseille de ne pas te servir du paramètre style dans les balise (sauf pour la compo de mail mais la ca n'est pas le cas je pense)  
 

Code :
  1. <html>
  2. <head>
  3. <style>
  5. .conteneur{
  6. width:100%;
  7. margin:0px;
  8. }
  11. .centre{
  12. padding:10px 10px 55px 10px;
  13. text-decoration:none;
  14. border:1px solid #FFCC66;
  15. margin:3px 210px 5px 1px;
  16. text-align:justify;
  17. }
  20. .pres {
  21. background:transparent url('pres.gif') no-repeat;
  22. background-position:0px 25px;
  23. height: 125px;
  24. }
  27. h2 {
  28. float: right;
  29. style:font-size:16px;
  30. }
  32. img {
  33. display: block;
  34. float: left;
  35. width: 192px;
  36. height: 192px;
  37. margin:10px;
  38. }
  40. </style>
  41. </head>
  42. <body>
  45. <div class="titrenews">Mardi 1 mars 2005</div>
  47. <div class="conteneur">
  48. <div class="centre">
  49.  <img src="afrique.jpg" alt="Le Tchad au coeur de l'Afrique Saharienne !" />
  50.  <div class="pres">
  51.   <span>Bienvenue</span>
  52.  </div>
  53.  <p><em> Bla bla bla...</em></p>
  54.  <p>Bla bla bla... </p>
  55.  <p><em>Bla bla bla...</em></p>
  56.  <h2>Eglantine</h2>
  57. </div>
  58. </div>
  59. </body>
  60. </html>

Reply

Marsh Posté le 02-03-2005 à 12:30:07    

rompi a écrit :

Le plus gros problème est que dans .pres tu met width à 100%,
ce qui fait que bienvenue passe à la ligne...
 Je ne suis pas très doué pour les float, mais voila un truc qui ressemble a ce que tu veux....
 
je te conseille de ne pas te servir du paramètre style dans les balise (sauf pour la compo de mail mais la ca n'est pas le cas je pense)  


J'ai procédé autrement, vu que la propriété clear:right ne passe pas bien sous FF (ils préviennent de ce problème sur http://www.w3schools.com/css/default.asp quand on combine clear et float pour un même div.
 
J'ai fixé la taille de pres et donné dans le html une margin-top de 150px pour le premier paragraphe :o


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 02-03-2005 à 13:33:41    

sanpellegrino a écrit :

(ils préviennent de ce problème sur http://www.w3schools.com/css/default.asp quand on combine clear et float pour un même div.


Où Ca ?
 
Je voulais te préciser que quand tu a des problème de ce genre,
tu peu ajouter une règle (temporaireà qui ajoute une border a tous les blos qui n'en n'ont pas.
 

Code :
  1. * {
  2. border: 1px solid gray;
  3. }


Reply

Marsh Posté le 02-03-2005 à 13:33:41   

Reply

Marsh Posté le 02-03-2005 à 13:44:39    

rompi a écrit :

Où Ca ?


Très précisément ici: http://www.w3schools.com/css/pr_class_clear.asp

Citation :

Note: This property does not always work as expected if it is used along with the "float" property.


rompi a écrit :


Je voulais te préciser que quand tu a des problème de ce genre,
tu peu ajouter une règle (temporaireà qui ajoute une border a tous les blos qui n'en n'ont pas.
 

Code :
  1. * {
  2. border: 1px solid gray;
  3. }



Je risque dans mon cas de me retrouver avec des borders partout alors que je n'en ai pas besoin, mais merci du conseil ;)


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Marsh Posté le 02-03-2005 à 14:32:02    

bonjour,
je découvre depuis peu le HTML ainsi que les CSS :)
En fait, je pense que rompi te proposait d'appliquer une bordure à tous les blocs pour que tu te rendes compte de l'emplacement de chaque bloc.
C'est une très bonne idée. Merci du conseil ;)


Message édité par juju2k le 02-03-2005 à 14:32:50
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed