Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1002 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1194191
Gravastar
Dude elle est où ma caisse ?
Posté le 07-09-2005 à 15:33:35  profilanswer
 

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.

mood
Publicité
Posté le 07-09-2005 à 15:33:35  profilanswer
 

n°1194422
omega2
Posté le 07-09-2005 à 18:54:50  profilanswer
 

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.

n°1194458
Gravastar
Dude elle est où ma caisse ?
Posté le 07-09-2005 à 19:54:05  profilanswer
 

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.

n°1194462
kalex
Posté le 07-09-2005 à 20:15:52  profilanswer
 

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.

n°1197540
Gravastar
Dude elle est où ma caisse ?
Posté le 12-09-2005 à 13:10:26  profilanswer
 

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

n°1197543
gm_superst​ar
Appelez-moi Super
Posté le 12-09-2005 à 13:17:59  profilanswer
 

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
n°1197544
Gravastar
Dude elle est où ma caisse ?
Posté le 12-09-2005 à 13:23:29  profilanswer
 

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 ?

n°1197550
gm_superst​ar
Appelez-moi Super
Posté le 12-09-2005 à 13:30:18  profilanswer
 

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
n°1197551
Gravastar
Dude elle est où ma caisse ?
Posté le 12-09-2005 à 13:33:11  profilanswer
 

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:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Page qui ne se charge qu'une fois !mise en forme conditionnel d'excel avec vb
[réglé] firefox ne lit plus ma feuille CSS mais IE oui!avoir et traiter le code source d'une page
validation menu deroulantvalidation menu deroulant
Stocker des fichier sur son serveur depuis un page php ou autre..CSS probleme avec le tag <label> dans firefox
faire une pause dans une page webCopier par macro une page d'un userform
Plus de sujets relatifs à : [CSS] mise en page d'un menu vertical : pb sous FF


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR