Salut à Tous,

Bon voici mon problème :

http://darkvengercs.free.fr/test/Avenger.htm

La page fonctionne bien avec Mozilla mais avec Internet Explorer un menu passe en dessous c´est vraiment embetant pourtant d´après les calculs ça devrait passer : 760px de largeur et chaque menu fait 95px ( 8*95=760)

Merci,

css:

/ * Feuille de style by Avenger */

body
{
margin: 0;
background-color: #B2C8E1;
text-align: center; / * pour corriger le bug de centrage IE */
}

1. global

{
margin-left: auto;
margin-right: auto;
width: 760;
}

. head
{
background-image: url(´../images/head1.jpg´);
height: 135px;
width: 760px;
}

1. menu a

{ display: block;
float: left;
height: 30px;
width: 95px;
background-image: url("../images/test1.png");
font-family:"Arial Black",Arial,"Trebuchet MS",;
color: #2E64A0;
}

1. menu a:hover

{
background-image: url("../images/test2.png");
height: 30px;
width: 95px;
}

Quan je mets le doctype bein ca foire ma page :x

J´en ai trop marre de IE
J´arrive pas à trouver d´ou vient le problème

oui

Je me suis servi en parti de ce tutorial : http://www.siteduzero.com/vostutos/?s=viewtuto&tutoid=292

au lieu de mettre ton text-align:center; dans body met le une classe nomé . centre par exmple:

. centre{
text-align:center;
}

et tu l´applique aux élement centré.

Si ca marche tj pas c peux etre une incompatiblité aux css ( une de plus avec IE) alors essaye < tabalise align="center>

bonne chance++

Merci Quintoff de m´avoir répondu dejà
Bon sinon si je fais un . centre il faut aussi que je mette un class=centre dans mon code html
Je le mets ou ?

Si j´ai bien compri à chaque bloc je rajoute class=centre ?

j´essayerais d´abord comme ca :

body
{
margin: 0;
background-color: #B2C8E1;
}

1. global

{
margin-left: auto;
margin-right: auto;
width: 760;
text-align:center;
}

.  head
{
background-image: url(´../images/head1.jpg´);
height: 135px;
width: 760px;
text-align:center;
}

1. menu a

{ display: block;
float: left;
height: 30px;
width: 95px;
background-image: url("../images/test1.png");
font-family:"Arial Black",Arial,"Trebuchet MS",;
color: #2E64A0;
text-align:center;
}

1. menu a:hover

{
background-image: url("../images/test2.png");
height: 30px;
width: 95px;
text-align:center;
}

sinon tu ajoute align="center" aux balises < div> de ton code html

margin-left: auto;
margin-right: auto;
width: 760;

760 quoi ? patates ? en CSS faut le mettre ; )

margin-left: auto;
margin-right: auto;
width: 760px;

Phobos028 merci j´avais pas vu l´erreur
Mais bon ca change rien j´ai toujours ce problème

Quintoff j´ai modifié mon css comme tu m´as it ca a rien changé
Et en ajoutant align="center" aux balise div de mon code html bein ca chnage rien non plus

salut, oui déjà écoute ce que t´a dit phobos028. Ensuite, si head est dans globaln alors tu peux virer le width.
Ensuite, ton truc c´est tout bête: il doit y avoir, avec IE, des marges qui sont comptées dans le total.
Pour résoudre, essaie de mettre 765 à global, et de réduire jusqu´à ce que le menu ne descende plus. à peu près jusquà 762 jpense.

Si ça rend un problème esthétique, tu peux, à deux ou trois cases du menu, enlever 1px, ça ne se verra pas trop, et ton design sera - en principe - correct.
Tiens nous au courant.

Ah, et je vois que tu utilises un roll-over pour tes menus ( les backgrounds qui changent au passage de la souris). Je te conseille d´utiliser le preload d´images.

Explications, pourquoi du comment et mise en oeuvre ici:
https://www.jeuxvideo.com/forums/1-30-7687134-1-0-1-0-0.htm

Merci MathieuN7 ça marche niquel
En fait c´était écalé car il fallait que je mette un float: left; dans le . head

Je vais lire ton topic sur les menus et j´upload la mise à jour du site

Voila c´est mis à jour
Merci encore à toi

Sinon je sais pas si tu as remarqué j´ai pas mis le doctype sur ma page car ça décale tout tu sais d´ou celà peut-il venir ?

Voila j´ai fait ta " technique"
Sinon qqun a uen idée de pourquoi le texte de mes menus est soulignés ?
C´est bizarre par défaut c´est pas souligné normalement

• Pour le soulignement du texte, dans #menu a tu ajoutes la propriété

text-decoration: none;

En principe, par héritage, tu n´as pas à le mettre dans #menu a:hover. Si ça ajoute un soulignement au passage de la souris, tu dois mettre la propriété ci-dessus dans #menu a:hover également. Astuce pour tes backgrounds: au lieu de faire une seule image de 95px de large, fais-en une de 1px de large, elle sera 95 fois moins lourde, et ça ira donc beaucoup plus vite en tous points. Si tu veux garder les images d´origine pour la bordure que tu as mise sur tes images ( ce dont je doute, car de toutes manières il y a une bordure dans ton #menu a), tu peux toujours les ajouter avec border-left et border-bottom.

• Le doctype n´influe en aucun cas sur la mise en page de ton site, tu as dû mal l´insérer. Il faut le mettre avant ta balise <body>

http://openweb.eu.org/articles/differentes_dtd/

• Pour ma "technique" il suffit de mettre le code:

<img src="image" style="display: none;" / >

, de préférence en bas de ta page.

Voila ça avance :
http://darkvengercs.free.fr/test/Avenger.htm

J´ai donc mis le doctype xhtm 1.1 et effectivement ça marche bizarre hier ça ne marchait pas j´avais du boir

Bon sinon comme on peut le voir j´ai un autre bug sur le bloc du centre ( en bleu clair) on peut voir que Mozilla fait bien son boulot et ajoute le bloc de 758px avec les 2 bordure de 1px ce qui donne 760px et qui s´aligne avec le header et le menu
Par contre IE ne voit pas pareil lui il prend 758px de largeur et inclus les bordures dedans on dirait

Donc j´ai corrigé toutes les petites erreurs dans mon code ( x)html et css avec le validator.w3.org
Par contre dans mon menu le texte n´est pas centré verticalement il me semble que c´est possible de le faire mais je me souviens plus comment exactement qqun a til uen idée ?

En attendant je cherche

Pour l´alignement vertical, tu peux jouer avec la propriété CSS padding-top, et puis tu ajustes. ça correspond à la distance entre le haut du conteneur et le contenu le plus proche.

Et puis pour ton problème de largeur, c´est malheureusement les joies du webmastering... Soit tu bidouilles la case ´livres´ et tu la réduis un peu, soit tu refais ton design en essayant de donner d´autres valeurs, d´utiliser d´autres propriétés.

Chez moi, ça ne correspond ni sous firefox, ni sous IE...