Div et hauteur, result diff. sur IE et Mozilla [XHTML et CSS]

Div et hauteur, result diff. sur IE et Mozilla [XHTML et CSS] - HTML/CSS - Programmation

Marsh Posté le 04-02-2003 à 20:07:02    

Voila,
 
Je suis en train de faire un site.
Je découvre XHTML, alors j'ai essayé de séparer contenu et mise en forme.
 
Mais il y à un endroit qui ne rend pas pareil sur IE6 et Mozilla.
Le reste de la page passe bien pour l'instant (Menu déroulant, etc...)
 
le mieux est encore une image :
http://jiff23.free.fr/hfr/IE6vsMozilla.png
 
avec ce code :

Code :
  1. <div id="menugauche" class="ca-menugauche">
  2.   <div class="menugauche-texte1">S'inscrire à la Newsletter :</div>
  4.   <div class="menugauche-texte1"><form name="newsletter" method="post" action=""><input name="textfield" type="text" class="btextenews"  value="Entrez votre mail." size="22" /><input type="submit" class="bouton-sondage" name="news" value="Ok" />
  5.     </form></div>
  6.    <div class="menugauche-lignevide"> </div>
  7.   <div class="menugauche-separ"> </div>
  8.   <div class="menugauche-texte1"> télécharger le fond d'écran
  9.     du mois.</div>
  11.   <div class="centre"><img src="images/sanguinaires.jpg" height="101" /></div>
  12.     <div class="menugauche-lignevide"> </div>
  13.     <div class="menugauche-separ"> </div>
  14.     <div class="menugauche-texte1">Sondage :</div>
  15. <div class="menugauche-texte1"><form name="sondage" method="post" action="">
  16. <div class="texte-sondage"> <input type="radio" name="radiobutton" value="radiobutton" />num 1</div>
  17.   <div class="texte-sondage"><input type="radio" name="radiobutton" value="radiobutton" />num 2</div>
  18.   <div class="texte-sondage"><input type="radio" name="radiobutton" value="radiobutton" />num 3</div>
  19.   <div><input type="submit" class="bouton-sondage" name="Submit" value="Envoyer" /></div>
  20. </form>
  21. </div>


 
CSS :  

Code :
  1. .ca-menugauche {
  2. position: absolute;
  3. height: auto;
  4. width: 145px;
  5. left: 50%;
  6. top: 130px;
  7. margin-left: -387px;
  8. background-color: #EFEEE4;
  9. padding-top: 10px;
  11. }
  13. .menugauche-separ {
  14. width: 100%;
  15. border-top-style: solid;
  16. border-top-color: #FF6600;
  17. height: 10px;
  18. border-top-width: 1px;
  19. font-size: 10px;
  20. line-height: 10px;
  22. }
  23. .menugauche-texte1 {
  24. font-family: Verdana, Arial, Helvetica, sans-serif;
  25. font-size: 10px;
  26. font-weight: bold;
  27. color: #FF6600;
  28. line-height: 17px;
  29. padding-left: 5px;
  30. vertical-align: middle;
  31. height: 15px;
  34. }
  35. .btextenews {
  36. font-family: Arial, Helvetica, sans-serif;
  37. font-size: 10px;
  38. color: #FF6600;
  39. background-color: #FFFFFF;
  40. border: 1px solid #FF6600;
  41. }
  42. .menugauche-lignevide {
  43. height: 10px;
  44. width: 100%;
  45. font-size: 10px;
  46. line-height: 10px;
  48. }
  49. .bouton-sondage {
  50. font-family: Verdana, Arial, Helvetica, sans-serif;
  51. color: #FFFFFF;
  52. background-color: #FF9900;
  53. border: 1px solid #FF6600;
  54. font-size: 10px;
  55. font-weight: bold;
  56. text-align: center;
  58. }
  59. .texte-sondage {
  60. font-family: Verdana, Arial, Helvetica, sans-serif;
  61. font-size: 10px;
  62. font-weight: bold;
  63. color: #FF6600;
  64. text-decoration: none;
  65. }


 
Bref, on dirait que sur Mozilla, le height:auto du cadre pricipal (en gris) ne tient pas compte des 2 ème ligne et du form du sondage.
 
Je me doute bien, que ca doit surement etre de ma faute et pas celle de Mozilla :whistle:
 
enfin, si une âme charitable lis ca jusqu'au bout et y voit une erreur :jap:

Reply

Marsh Posté le 04-02-2003 à 20:07:02   

Reply

Marsh Posté le 04-02-2003 à 20:28:09    

HotShot a écrit :

<limite hs>
Houlala ca me semble bien compliqué tout ça, y a des <div> de partout, m'est avis qu'il doit y en avoir une bonne part de superflu... [:marc]  
</limite hs>
 
Tu as ça en ligne sur un site ? J'arrive à réfléchir que quand j'ai le code et la page sous les noeuils


 
Et, non, je n'ai pas ca en ligne.
 
Je veux bien croire qu'il y ait du superflu, et encore, la c'est juste un bout du menu de gauche :p
 
En fait, la page est constitué de plusieurs div organisant la structure de la page (Bandeau, menu-gauche, menu-deroulant, principal, )
Avec dans chaque, des trucs de ce type...
 
Alors on peut surement faire beaucoup plus leger en effet, mais je débute avec les div+css ;)

Reply

Marsh Posté le 04-02-2003 à 21:39:36    

Alors :
 
- vertical-align: ne s'applique pas pour les DIV (c'est bête mais c'est comme ça)
- L'élément FORM a des marges haut et bas qui sont non nulles sous IE.
- Il y a clairement des DIV en trop. Au lieu de faire un DIV de 10 pixels de haut pourquoi tu ne donnes pas au DIV précédent ou suivant une marge de 10 pixels ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-02-2003 à 09:25:31    

Merci, pour vos réponse...
 
J'ai essayé de suivre vos conseils, et en effet, on peut faire plus simple :D
 
Bon j'ai supprimé le div avec la classe : "ligne vide" qui ne servait juste de marge.
Pour faire une marge, j'avais essayé Padding-top, mais ca ne donnait pas ce que je voulait et en cherchant un peu:  margin-top:10px;
Il ne me reste plus qu'une ligne avec marge avant et apres:

Code :
  1. <div class="menugauche-separ"> </div>

au lieu de 2 :

Code :
  1. <div class="menugauche-lignevide"> </div>
  2. <div class="menugauche-separ"> </div>


=> plusieurs ligne en moins.
 
J'ai appliqué la classe directement sur l'image et non pas sur un div englobant.
 
Mais j'ai toujours ce problême de supperposition sous Mozilla.
 
Pour les form, il faudrait donc définir ses marges ??
 
edit > et donc, en appliquant la classe directement dans le form, on peut se passer des div ?


Message édité par Jiff le 05-02-2003 à 09:28:36
Reply

Marsh Posté le 05-02-2003 à 09:31:04    

HotShot a écrit :

form{margin:0px} comme ça tu mets tous les browsers d'accord.  


 
quel temps de réaction ;)
c'est pas possible, tu es un bot :D  
 
merci beaucoup, je vais essayer ça
enfin, surement ce soir, là il faut que je justifie mon salaire :whistle:

Reply

Marsh Posté le 05-02-2003 à 10:30:20    

Pour l'image des sanguinaires : http://forum.hardware.fr/forum2.ph [...] t=#t202093
 
Il y en a d'autres dans le même topic ;) et la partie d'apres (edit > http://forum.hardware.fr/forum2.ph [...] #t206545).
 
Une petite question : j'ai passé le code au validateur XHTML 1.0 et j'ai une erreur (pleins en fait, mais c'est la même)
 
Pour faire un affichage de résultats sur 2 colones, j'ai utilisé l'exemple de la FAQ, ce qui m'a donné :

Code :
  1. div#gauche {
  2. float: left;
  3. width: 65%;
  4. text-align: left;
  5. text-indent:10px;
  6. }
  8. div#droite {
  9. float: right;
  10. width: 35%;
  11. text-align: right;
  12. }


Code :
  1. <div id="gauche" class="adresse result"> Chemin de l'exemple 20167 AFA</div>
  2.       <div id="droite" class="tel result"> Tél : 06 10 00 00 00</div>
  3.      <div id="gauche" class="adresse result"> Chemin de l'exemple 20167 AFA</div>
  4.       <div id="droite" class="tel result"> Tél : 06 10 00 00 00</div>
  5.       <div class="spacer separ">  </div>


 
En fait j'utilise l'Id droite ou gauche a chaque fois que je veux placer mon texte en colone.
 
Evidement, il ne faut pas :D apparement, l'Id doit etre unique.
 
Alors est ce que je peux remplacer mon div#gauche par une classe .gauche à attribuer ?? ou que lest le moyen pour ne pas avoir à utiliser des Id identiques ??


Message édité par Jiff le 05-02-2003 à 10:49:00
Reply

Marsh Posté le 05-02-2003 à 11:21:59    

Bon concernant les Id gauche et droite, j'ai résolu le problême en passant par des classes au lieu d'Id.
 
Ca m'aprendra a betement recopier un exemple :D
 
Comme quoi, le meilleur moyen de trouver c'est de chercher ;)
 
Par contre pour l'instant toujours ce prob de superposition :/
 
edit >
 
http://www.w3.org/Icons/valid-xhtml10.gif
 
c'est mon premier [:yaisse2] :sweat:
 
Bon c'est pas encore du code optimisé, mais au moins c'est au normes :D


Message édité par Jiff le 05-02-2003 à 11:27:54
Reply

Marsh Posté le 05-02-2003 à 11:38:10    

HotShot a écrit :

Je te dis, colle le fichier en ligne, que chacun puisse bidouiller. Je pense qu'y a des padding/margin/width/height qui se baladent en vrac...


 
Non ! sinon, on va m'envoyer au bucher :cry:
 
:D  
 
Serieusement, je peux pas du boulot(pas acces au FTP) je verrai ce soir si je peux (match de l'ACAjaccio :D )
 
Bon, maintenant, je vais essayer de nettoyer un peu ce code (j'ai dit un peu  :whistle:)

Reply

Marsh Posté le 05-02-2003 à 12:02:14    

Essaye de faire apparaître les bordures des différents DIV. Tu pourras mieux visualiser les bloc qui posent problème.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-02-2003 à 12:03:49    

j'ai jamais compri les div?
 
ca marche comme un tableau c'est ca?

Reply

Marsh Posté le 05-02-2003 à 12:03:49   

Reply

Marsh Posté le 05-02-2003 à 12:04:26    

chacal_one333 a écrit :

ca marche comme un tableau c'est ca?


Non, justement.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-02-2003 à 10:44:03    

HotShot a écrit :

Je te dis, colle le fichier en ligne, que chacun puisse bidouiller. Je pense qu'y a des padding/margin/width/height qui se baladent en vrac...


 
Bon, je voulais juste vous remercier.
En fait, par exemple pour le texte "télécharger le fond d'écran du mois", que l'image venait masquer sur mozilla, c'était la classe appliquée qui n'allait pas :

Code :
  1. .menugauche-texte1 {
  2. font-family: Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 10px;
  4. font-weight: bold;
  5. color: #FF6600;
  6. line-height: 17px;
  7. padding-left: 5px;
  8. vertical-align: middle;
  9. height: 15px;
  10. }


J'avais mis en effet, un peu partout, des Height, etc... inutiles
 
Donc en appliquant une classe correcte ça marche.

Code :
  1. .menugauche-texte1 {
  2. font-family: Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 10px;
  4. font-weight: bold;
  5. color: #FF6600;
  6. padding-left: 5px;
  7. }


 
Plus de height, et plus de vertical-align qui ne marche pas ;)
 
Enfin, j'ai nettoyé un peu le code (il reste des choses à enlever, mais c'est déja mieux :D )
 
Et j'obtiens pratiquement le même résultat sur IE5+ et Mozilla (les seuls testés).
 
Il me reste juste encore un problême : j'essaye de placer un "cadre" composé de 4 images qui va entourer la page, mais je n'arrive pas a faire un cadre qui s'ajuste à la longueur du contenue (avec les 2 images des cotées qui s'étirent).
Je crois donc, que je vais faire une longueur fixe...
 
encore merci :jap:  
 

Reply

Sujets relatifs:

Leave a Replay

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