Probléme IE/FF

Probléme IE/FF - HTML/CSS - Programmation

Marsh Posté le 25-11-2006 à 17:22:49    

Salut. :)
 
En fet, mon menu ne s'affiche pas correctement sous IE, alors que le code xhtml est plus que simpliste...
 
Code : HTML
 
<div id="corps">
 
 
<p><br /><br />
<br /><br /><br />
<br /><br /><br />
  <center><strong>    
<a href="index.html"><span class="elementmenu">Acceuil</span></a><span class="point">....
<a href="forum.html"><span class="elementmenu">Forum</span></a>....
<a href="tutoriaux.html"><span class="elementmenu">Tutoriaux</span></a>....
<a href="livre_or.html"><span class="elementmenu">Livre d'or</span></a>....
<a href="prgm.html"><span class="elementmenu">Prgm</span></a>....</span>
<a href="fonction.html"><span class="elementmenu">Fonctions</span></a>
</strong></center>
<br />
 
 
blablablabalabla
</div>
 
 

Code : CSS

 
body
{
background-image: url("minifond.jpg" );
 background-color: black;
 background-repeat: repeat;
}
a
{
text-decoration: none;
}
img
{
border: 0px;
margin: 0px;
padding: 0px;
}
 
#corps
{
font-size: 16px;
 height: 900px;
width: 802px;
font-family: 'Trebuchet MS', Tahoma, Verdana, 'Times New Roman', Times, serif;
   margin-left: 100px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-right: 100px;
   margin-bottom: 0px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   
   color: black;
   background-image: url("banieremenufond.jpg" );
    background-repeat: no-repeat;
   background-color: white; /* Une couleur de fond pour le corps */
   text-align: ;
   border: 1px solid #8c9091; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
 
}
.elementmenu
{
color: #41403e;
}
.elementmenu:hover
{
color: #fa901d;
}
.point
{
color: white;
}
.lien
{
color: #5f9acb;
}
.lien:hover
{
text-decoration: underline;
}
 
 
Voila ce que j'obtiens sous Internet Explorer: http://img168.imageshack.us/img168/6438/f2ek0.jpg
 
Et voici ce que j'obtiens sous Firefox: http://img166.imageshack.us/img166/3259/f1cc5.jpg (c'est ce que je voudrais avoir sous IE)
 
Donc voilà, une idée??? ^^
 
PS: Si vous avez pas remarqué, le menu sous IE n'est pas dans les cadres... :o

Message cité 1 fois
Message édité par univscien1 le 25-11-2006 à 17:25:03
Reply

Marsh Posté le 25-11-2006 à 17:22:49   

Reply

Marsh Posté le 25-11-2006 à 17:30:28    

Xhtml?  :lol:
www.w3.org !


Message édité par dwogsi le 25-11-2006 à 17:30:56
Reply

Marsh Posté le 25-11-2006 à 17:40:59    

Je te conseille d'apprendre a manipuler les attributs margin et padding (avec leur variantes -top -bottom -elft -right). Ca t'évitera d'écrire des "." de la meme couleur que le fond pour séparer horizontalement les éléments entre eux, et, mettre des <br> en pagaille pour les séparer verticalement. Cette pratique fait parti des pires atrocités qu'on puisse voir en HTML !! Non seulement le resultat est degueulasse, mais en plus c'est plus que pénible a mettre en place et tu perds un temps fou pour un resultat plus que mauvais.
 

Code :
  1. margin-bottom: 0px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  2.    padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */


Je ne suis pas sur que tu comprennes ce que tu fais a la vue des commentaires :s
 
Essaie de relire le texte d'accueil de ton site :s
En particulier le "Si vous etes tombés sur ce site c'est que ..." qui ne va pas trop avec le "Si ce n'est pas le cas, vous etes tombés au bon endroit ..." !!
Et pis des fautes ... des fautes ... des fautes ...
Tu es en primaire ?

Reply

Marsh Posté le 25-11-2006 à 17:51:49    

:p  Pour le texte de la page d'acceuil, j'ais fait çà vite fait (rasurez vous, mon site n'est pas en ligne).
Euh, l'orthographe est un de mes plus grand défaut.dsl :ange:  
 
Je suis en Premiére scientifique et non en primaire  :lol: .
Sinon, je tiendrais compte de tes remarques.
Merci. :)  
 
Ps: -Je débute  :p
      -çà ce dit xhtml

Message cité 1 fois
Message édité par univscien1 le 25-11-2006 à 17:54:11
Reply

Marsh Posté le 25-11-2006 à 18:00:04    

univscien1 a écrit :

Ps: -Je débute  :p
      -çà ce dit xhtml


Pas dans ton cas non dsl.

Reply

Marsh Posté le 26-11-2006 à 11:53:59    

univscien1 a écrit :

Salut. :)
 
En fet, mon menu ne s'affiche pas correctement sous IE, alors que le code xhtml est plus que simpliste...
 
Code : HTML
 
<div id="corps">
 
 
<p><br /><br />
<br /><br /><br />
<br /><br /><br />
  <center><strong>    
<a href="index.html"><span class="elementmenu">Acceuil</span></a><span class="point">....
<a href="forum.html"><span class="elementmenu">Forum</span></a>....
<a href="tutoriaux.html"><span class="elementmenu">Tutoriaux</span></a>....
<a href="livre_or.html"><span class="elementmenu">Livre d'or</span></a>....
<a href="prgm.html"><span class="elementmenu">Prgm</span></a>....</span>
<a href="fonction.html"><span class="elementmenu">Fonctions</span></a>
</strong></center>
<br />


C'et pas du code simpliste, c'est du n'importe-quoi :D Des p des br dans tous les sens, le menu qui devrait être dans un liste :)

Reply

Marsh Posté le 26-11-2006 à 13:07:41    

Ben désolé, mais je débute, et je suis là pour que l'on m'aide, donc si c'est pour m'enfoncer, je vois pas trop l'interet.  :ange:

Reply

Marsh Posté le 26-11-2006 à 13:28:35    

Essaie de retirer des differentes remarques que HTML/CSS/Javascript sont des langages qu'il n'est pas facile de maitriser. Beaucoup de navigateurs sont extrements permissifs et se contentent du code le plus immonde qu'il soit ... et ce n'est pas vraiment un mal car cela permet la publication d'un site web a la portée de pratiquement tout le monde.
 
En postant ici tu te retrouves en face de personnes dont c'est le metier et/ou une passion et qui maitrisent tres bien les differents langages. En général ces gens préférent raisonner comme cela :
 

  • Mon code est nickel, je sais exactement ce que je fais et j'obtiens le rendu attendu


et les débutants raisonnent plutot comme cela :
 

  • Il faut que j'arrive a bidouiller pour que mon design colle a ce que j'ai en tete
  • Le HTML et compagnie c'est de toute facon trivial : un peu de <font> et de <table> et on arrive a tout faire.


Deux philosophies qui s'affrontent :)
 
Et pour rester objectif ... ton code est immonde :) Maintenant ton objectif est peut-etre de simplement rendre l'aspect visuel comme tu le souhaites : dans ce cas ... on sait tous que toutes les remarques te passeront au dessus de la tete :)

Reply

Marsh Posté le 26-11-2006 à 14:19:09    

univscien1 a écrit :

Ben désolé, mais je débute, et je suis là pour que l'on m'aide, donc si c'est pour m'enfoncer, je vois pas trop l'interet.  :ange:


C'est pour ça que j'ai quand-même expliqué que les <br /> à répétition c'est pas top, et qu'il faudrait mettre les liens dans une vraie liste ;)

Reply

Marsh Posté le 26-11-2006 à 15:34:35    

Ok, merci... :)  
 
Nouveau code:
 
 
Code HTML:
 
<center><div id="menu_horizontal">
<ul>
<strong><li class="acceuil"><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="tutoriaux.html">Tutoriaux</a></li>
<li><a href="livre_or.html">Livre d'or</a></li>
<li><a href="prgm.html">Prgm</a></li>
<li><a href="fonction.html">Fonctions</a></li></strong>
</ul>
</div></center>
 

Code CSS:

 
div#menu_horizontal  
{
border : 1px solid #8d8f8e;
margin-left: 134px;  
   margin-right: 134px;
   border-right : 0px;
   border-left : 0px;
}
 
div#menu_horizontal ul  
{
list-style-type : none;
margin : 0;
padding : 0;
}
div#menu_horizontal li  
{
display : inline;
padding : 0 0.7em;  
line-height : 25px;
border-right : 1px solid #8d8f8e;
}
div#menu_horizontal a
{
color: #41403e;
}
div#menu_horizontal a:hover
{
color: #fa901d;
}
 
 
C'est surement ce que vous vouliez me faire faire.   :p  
 
Parceque çà marche, Merci encore  :)  

Reply

Marsh Posté le 26-11-2006 à 15:34:35   

Reply

Marsh Posté le 26-11-2006 à 15:36:18    

T'as pas le droit de mettre un strong dans un ul comme ça. Seuls les li sont autorisés. Si c'est pour tout mettre en gras, il faut obligatoirement le faire dans le css (un font-weight: bold sur les li).
 
Strong n'est a utilisé que pour mettre l'accent sur un mot ou une phrase, pas à mettre en gras bêtement :) Ca a un sens sémantique

Reply

Marsh Posté le 26-11-2006 à 15:42:16    

Ton menu pourrait etre ecrit comme cela :

Code :
  1. <ul id="menu">
  2. <li><a href="index.html">Accueil</a></li>
  3. <li><a href="forum.html">Forum</a></li>
  4. <li><a href="tutoriaux.html">Tutoriaux</a></li>
  5. <li><a href="livre_or.html">Livre d'or</a></li>
  6. <li><a href="prgm.html">Prgm</a></li>
  7. <li><a href="fonction.html">Fonctions</a></li>
  8. </ul>


avec le code CSS qui va bien pour tout mettre en forme.
 
Un peu de margin-top et margin-bottom sur l'element "ul#menu" pour l'espacement verticale que tu souhaites autour de ton menu (c'est l'effet de tes <br> )
Un peu de padding-left et padding-right sur les "ul#menu li" pour l'espacement du texte des menus avec les bordures des cases.
un peu de border sur les memes "ul#menu li"
Et enfin pour centrer ton menu horizontalement tu peux appliquer sur le "ul#menu" un "margin:0 auto" ainsi qu'une largeur fixe du genre"width: 80%"

Reply

Sujets relatifs:

Leave a Replay

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