[CSS] mise en page d'un menu vertical : pb sous FF

mise en page d'un menu vertical : pb sous FF [CSS] - HTML/CSS - Programmation

Marsh Posté le 07-09-2005 à 15:33:35    

Bonjour tout le monde,
 
Je viens de me remettre dans le bain du html et du css (meme si je n'ai jamais ete un expert). Comme ca faisait un bout de temps que je n'avais pas code et que je suis un gros faineant, j'ai commence a coder en verifiant la mise en page sous IE (pas taper, pas taper). Forcement, cet andouille d'IE a laisse passer la plupart de mes bourdes sans rien me dire et j'ai donc du partir a la chasse aux erreurs. J'ai fini par les trouver et les eliminer... toutes ? non car une bourde resiste encore et toujours a ma vue qui baisse !
Par soucis de clarte, je vous montre ce que donnent les menus sous IE et FF :
 
http://perso.wanadoo.fr/kaleikonos/images%20david/IE.gif                 http://perso.wanadoo.fr/kaleikonos/images%20david/FF.gif
 
 
Voici le code, fruit de mon esprit malade :
 
CSS:

Code :
  1. .nav{
  2. float:left;
  3. background-image:url(../images/nav.jpg);
  4. background-repeat:no-repeat;
  5. height:523px;
  6. width:252px;
  7. font-size:12pt;
  8. padding-top:50px;
  9. }
  10. html>body .nav{
  11. padding-top:50px;
  12. height:473px;
  13. }
  14. .nav ul{
  15. list-style-type:none;
  16. }
  17. .nav li{
  18. margin-left:28px;
  19. .summary{
  20. margin-top:15px;
  21. height:39px;
  22. width:195px;
  23. background-image:url(../images/boutons/button.jpg);
  24. text-align:center;
  25. color:#FFFFFF;
  26. font-size:16pt;
  27. font-weight:bolder;
  28. padding-top:8px;
  29. }
  30. html>body .summary{
  31. padding-top:8px;
  32. height:39px;
  33. }
  34. .button{
  35. height:20px;
  36. width:195px;
  37. text-align:center;
  38. text-decoration:none;
  39. color:#000000;
  40. font-weight:bold;
  41. }
  42. .button:hover{
  43. text-decoration:none;
  44. background-color:#7a94bd;
  45. color:#535353;
  46. }
  47. }


 
HTML:

Code :
  1. <div class='nav'>
  2. <ul>
  3.  <li><span class='summary'>Introduction</span></li>
  4.  <li><a class='button' href='./index.html'>Accueil</a></li>
  5.  <li><a class='button' href='./http/histoire.html'>Histoire</a></li>
  6.  <li><span class='summary'>Règles</span></li>
  7.  <li><a class='button' href='./http/races.html'>les Races</a></li>
  8.  <li><a class='button' href='./http/classes.html'>les Classes</a></li>
  9.  <li><a class='button' href='./http/combats.html'>les Combats</a></li>
  10.  <li><a class='button' href='./http/batailles.html'>les Batailles</a></li>
  11.  <li><span class='summary'>Communauté</span></li>
  12.  <li><a class='button' href='./http/forums.html'>Forums</a></li>
  13.  <li><a class='button' href='./http/galleries.html'>Galleries</a></li>
  14.  <li><a class='button' href='./https/admin.html'>Administrer</a></li>
  15. </ul>
  16. </div>


 
Quelqu'un pourrait-il me donner une piste pour que l'affichage FF ressemble a l'affichage IE ? s'il vous plait ? please ?
 
Merci d'avance.

Reply

Marsh Posté le 07-09-2005 à 15:33:35   

Reply

Marsh Posté le 07-09-2005 à 18:54:50    

A quoi sert "html>body .summary" alors que toutes les propriétés de cet élément à les même valeur que le ".summary" tout simple?
 

Code :
  1. .nav{
  2.     float:left;
  3.     background-image:url(../images/nav.jpg);
  4.     background-repeat:no-repeat;
  5.     height:523px;
  6.     width:252px;
  7.     font-size:12pt;
  8.     padding-top:50px;
  9. }
  10. html>body .nav{
  11.     padding-top:50px;
  12.     height:473px;
  13. }


Chouet, ton navigateur n'aura donc pas la même hauteur sous IE que sous le reste.
 
A quoi il sert le <div class='nav'> ? Tu pourrais mettre ta classe directement au niveau du ul vu qu'il n'y a rien d'autre dedans.
 
Pou ton probléme, a par que  

Code :
  1. background-repeat:no-repeat;

indique qu'on coupe l'image si elle est plus grande que le composant, je vois pas.

Reply

Marsh Posté le 07-09-2005 à 19:54:05    

Citation :

A quoi sert "html>body .summary" alors que toutes les propriétés de cet élément à les même valeur que le ".summary" tout simple?


 
 
bah en fait, celui-la ne change rien, mais c'etait pour rester coherent avec les autres padding (right et left), qui eux ont besoin d'etre redefinis pour ne pas faire merder la mise en page...
 

Citation :

Chouet, ton navigateur n'aura donc pas la même hauteur sous IE que sous le reste.


 
En fait ca change strictement rien, sur les navigateurs que j'ai teste ca a la meme hauteur partout :/
 

Citation :

A quoi il sert le <div class='nav'> ? Tu pourrais mettre ta classe directement au niveau du ul vu qu'il n'y a rien d'autre dedans.


hmm, en fait le div 'nav' est le div de la barre de navigation, j'aime bien programmer comme ca, ceci dit j'etudierais ta proposition quand j'aurais le temps.
 

Citation :

Pou ton probléme, a par que  

Code :
  1. background-repeat:no-repeat;

indique qu'on coupe l'image si elle est plus grande que le composant, je vois pas.


le background-repeat:no-repeat sert a ne pas repeter l'image si elle est plus petite que le composant selon ce que j'en sais. Peut etre fait-il aussi ce que tu dis, je vais voir ca.

Reply

Marsh Posté le 07-09-2005 à 20:15:52    

Tu peux mettre ta page en ligne ?
Parcequ'avec la Web Developer Toolbar, on a souvent vite fait de voir ce qui cloche dans une CSS (et je dis pas ça que pour toi) . En plus là on a pas les images, le contexte, etc.

Reply

Marsh Posté le 12-09-2005 à 13:10:26    

Bonjour tout le monde,  
 
J'ai finalement réussi à faire fonctionner normalement la mise en page de mon site (la fatigue aidant, je n'avais pas pensé à spécifier le doctype sur toutes les pages :/). Je tenais à remercier ceux qui m'ont répondu et en particulier kalex qui m'a fait installer la toolbar.
 
 
P.S. : pour les ceusses que ca intéresseraient voici le lien de ma page, comme demandé (je tiens a préciser que le contenu n'est pas réellement important, c'est un projet que j'avais commencé au lycée, il y a fort longtemps) :
http://perso.wanadoo.fr/kaleikonos [...] index.html

Reply

Marsh Posté le 12-09-2005 à 13:17:59    

Ton problème venait du fait que toutes les propriétés de .summary étaients appliquées à un SPAN qui est un élément en-ligne (du texte quoi). Et un élément en-ligne ne peut pas avoir de dimensions fixées par height ou width (ses dimensions sont imposées par le texte qu'il contient)
 
Il aurait donc fallu appliquer les propriétés de .summary à un élément de type bloc (un DIV ou directement sur LI)


Message édité par gm_superstar le 12-09-2005 à 13:18:22

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

Marsh Posté le 12-09-2005 à 13:23:29    

gm_superstar a écrit :

Ton problème venait du fait que toutes les propriétés de .summary étaients appliquées à un SPAN qui est un élément en-ligne (du texte quoi). Et un élément en-ligne ne peut pas avoir de dimensions fixées par height ou width (ses dimensions sont imposées par le texte qu'il contient)
 
Il aurait donc fallu appliquer les propriétés de .summary à un élément de type bloc (un DIV ou directement sur LI)


 
Intéressant à savoir, j'aurais dû creuser plus la question... mais alors comment se fait-il que ca fontionne normalement maintenant, alors que j'applique toujours la règle sur un span ?

Reply

Marsh Posté le 12-09-2005 à 13:30:18    

Parce que tu as ajouté "display: block" à .summary et donc tes SPAN sont devenus des éléments blocs, comme un DIV en fait.


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

Marsh Posté le 12-09-2005 à 13:33:11    

gm_superstar a écrit :

Parce que tu as ajouté "display: block" à .summary et donc tes SPAN sont devenus des éléments blocs, comme un DIV en fait.


 
hum hum  :sweat:  
Des fois il faudrait que j'apprenne à réfléchir avant de poser une question idiote  :whistle:

Reply

Sujets relatifs:

Leave a Replay

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