Pb IE : espaces et roll over

Bonjour tout le monde. Voilà je débute à peine le css et me voilà déjà avec pas mal de soucis au niveau de la mise en page sous IE.

--> Sous IE, j'ai un espace blanc rajouté en bas de page et je ne vois pas d'où ca vient...
-->Toujours sous IE, le roll over des images du menu ne fonctionne pas correctement (j'ai essayé une encapsulation sur la première image du menu, l'image du roll over s'affiche bien, mais elle reste toujours affiché...).

--> Sous Mozilla tout fonctionne, à part un petit temps de chargement pour les images du roll over.

Si vous aviez des pistes svp pour mon pb sous IE. Merci. Ah oui mon début de site : http://www.atlantiqueinformatique.com/guitare_occas/

Je vous poste mon code, bon c'est la première fois que je fais du css...

body
{
   width: 780px;
   margin: auto;
   margin-top: 0px;
   margin-bottom: 0px;
}


/* L'en-tête */
#en_tete
{
   width: 780px;
   height: 141px;
   background-image: url("images/Maquette_finale_01.jpg");
   background-repeat: no-repeat;
}

#dessus_menu
{
    overflow: hidden;
    margin-left: 0px;
    margin-bottom: 0px;
    width: 780px;
    height: 9px;
    background-image: url("images/Maquette_finale_02.jpg");
    background-repeat: no-repeat;
}


/* Le menu */
a #menu_accueil
{ 
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    width: 109px;
    height: 78px;
    background-image: url("images/Maquette_finale_03.jpg");
    background-repeat: no-repeat; 
} 

a:hover #menu_accueil
{ 
    background-image: url("images/Maquette_finale_03_ro.jpg"); 
}

#menu_occasions
{
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    width: 106px;
    height: 78px;
    background-image: url("images/Maquette_finale_04.jpg");
    background-repeat: no-repeat;
}

#menu_occasions:hover
{
    background-image: url("images/Maquette_finale_04_ro.jpg");
}

#menu_annonces
{
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    width: 113px;
    height: 78px;
    background-image: url("images/Maquette_finale_05.jpg");
    background-repeat: no-repeat;
}

#menu_annonces:hover
{
    background-image: url("images/Maquette_finale_05_ro.jpg");
}

#menu_contact
{
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    width: 101px;
    height: 78px;
    background-image: url("images/Maquette_finale_06.jpg");
    background-repeat: no-repeat;
}

#menu_contact:hover
{
    background-image: url("images/Maquette_finale_06_ro.jpg");
}

#menu_débuter
{
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    width: 100px;
    height: 78px;
    background-image: url("images/Maquette_finale_07.jpg");
    background-repeat: no-repeat;
}

#menu_débuter:hover
{
    background-image: url("images/Maquette_finale_07_ro.jpg");
}

#recherche
{
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    width: 251px;
    height: 78px;
    background-image: url("images/Maquette_finale_08.jpg");
    background-repeat: no-repeat;
}

#dessus_corps
{
    overflow: hidden;
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    width: 780px;
    height: 8px;
    background-image: url("images/Maquette_finale_09.jpg");
    background-repeat: no-repeat;
}

/* Le corps de la page */
#corps
{
   float: left;
   margin-left: 0px;
   margin-bottom: 0px;
   width: 780px;
   height: 536px;
   background-image: url("images/Maquette_finale_10.jpg");
   background-repeat: no-repeat;
}


#dessus_pied_de_page
{
    overflow: hidden;
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    width: 780px;
    height: 8px;
    background-image: url("images/Maquette_finale_11.jpg");
    background-repeat: no-repeat;
}


/* Le pied de page*/
#pied_de_page
{
   float: left;
   text-align: center;
   width: 780px;
   height: 120px;
   background-image: url("images/Maquette_finale_12.jpg");
   background-repeat: no-repeat;
}

Modifié par Oropher (13 Oct 2006 - 10:43)

Oropher a écrit :
Ah oui mon début de site : http://www.atlantiqueinformatique.com/guitare_occas/

Hello,

OUCH, sais-tu qu'il n'y a aucun contenu accessible sur cette page ?
Je ne sais pas si tu as été mal renseigné, mais l'Accessibilité du Web fait partie des Standards.
Ici, tu n'as que des pseudo-contenu (des images) qui vont être complètement inexploitable pour beaucoup d'utilisateurs (synthèses vocales, plages brailles, moteurs de recherche, etc.)

En fait, sans vouloir te vexer, une telle page est un retour à la préhistoire du web où l'on confondait encore le media Web avec le média figé Print.

Or ce sont deux médias différents : dans le media Web, l'utilisateur est actif : il peut agrandir les tailles de contenu s'il en a besoin, il peut suivre le contenu s'il est aveugle, il peut changer le style de la page, il peut utiliser les fonctionnalités de son navigateur, etc.

Je crois que tu vas devoir revoir complètement ta copie si tu comptes suivre l'évolution du Web.
Modifié par Raphael (10 Oct 2006 - 11:13)

Mais ce n'est que ma maquette. Plus personne ne fait de maquette sous photoshop now ?? Bien sûr qu'après ca bougera +, et si tu parle du menu personellement je voulais le garder en image.

Tu me vexes pas au contraire mais j'ai pas trop compris...
Modifié par Oropher (10 Oct 2006 - 11:32)

Oropher a écrit :


Mais ce n'est que ma maquette. Plus personne ne fait de maquette sous photoshop now ??

Aaaah mais tu fais peur à tout le monde toi !
Fallait prévenir, j'ai des problèmes de tension en ce moment

Il faut dire qu'il est assez rare de nous présenter des maquettes hybrides (mi-intégrées mi-toshop)

Ah je me disais aussi lol. En fait vu que je débute le css, je voulais simplement dans un premier temps réussir à remonter mon design avec le css.

D'ailleurs j'ai résolu mes problèmes de blancs avec des overflow: hidden; sauf le grand espace blanc en bas de page. Et les hover du menu ne fonctionnent toujours pas correctement sous IE, enfin chez moi en tout cas.

Merci.
Modifié par Oropher (10 Oct 2006 - 11:54)

Pour ton rollover, vu le temps de latence avant que l'image n'apparaisse, j'ai l'impression que tu n'as pas utilisé la version qui se trouve dans les tutoriels

Pour ce qui est de ton code, j'avoue que je n'ai pas trop compris certains choix (des float left partout ?).
D'autre part, tu as de nombreuses erreurs au validateur (balises non fermées par exemple), ce qui peut toujours provoquer des erreurs inattendues.

Alors j'ai suivi le tuto pour le hover (mettre une seule image que l'on décale), mais j'ai toujours le même problème, l'image se décale, ca affiche l'autre image, mais cette dernière reste toujours affichée... (mais au moins cela a résolu mon problème de temps d'affichage sous mozilla)

a #menu_accueil
{ 
    display: block ;
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    width: 109px;
    height: 78px;
    background: url("images/Maquette_finale_03 copy.jpg");
   /*background-repeat: no-repeat; */
} 

a:hover #menu_accueil
{ 
    background: url("images/Maquette_finale_03 copy.jpg") no-repeat 0 -78px; 
}

Sinon je vais voir pour les float left, je ne voulais pas en mettre partout mais ca ne marchait pas sinon et j'avoue ne pas encore avoir tout compris. Pour le code j'ai juste viré tous mes paragraphes etc et je n'ai pas tout revérifié.

Merci en tout cas.
Modifié par Oropher (11 Oct 2006 - 10:07)

Excusez moi de vous déranger encore, mais j'aurai aimé savoir pourquoi mon design se décalait lorsque j'insérais du contenu texte dans ma page. SI vous pouviez m'indiquer une piste s'il vous plait après je chercherais mais là je bloque.

Merci.

Et je en comprends même pas pourquoi au validateur il ne veut pas de ca :

       <a href="index.htm"><div id="menu_accueil">         
       </div></a>

J'ai allégé mon css (j'ai viré les images ne servant à rien), j'ai vérifié mon code, mais je ne sais pas pourquoi mon code ci-dessus est toujours refusé au validateur. Je ne peux faire comme le tutoriel car je veux utiliser pour chaque "lien" une image différente... Auriez-vous une solution svp ? Merci beaucoup.

Je vous redonne l'adresse de mon site :
http://www.atlantiqueinformatique.com/guitare_occas/

Mon code html :

<body>

       <!-- L'en-tête -->
       <div id="en_tete"> 
       </div>

       <!-- Les menus -->
       <a href="index.htm"><div id="menu_accueil">         
       </div></a>

	   <a href="page2.html"><div id="menu_occasions">
	   </div></a>
	   
	   <a href="page3.html"><div id="menu_annonces">
	   </div></a>
	   
	   <a href="page4.html"><div id="menu_contact">
	   </div></a>
	   
	   <a href="page5.html"><div id="menu_débuter">
	   </div></a>
	   
	   <div id="recherche">
	   </div>
	  
	  
       <!-- Le corps -->
       <div id="corps">
           <h1>Guitare-occaz.com : toute la guitare d'occasion</h1>
			<p>
			Bienvenue sur ce site consacré à la guitare d'occasion. Vous trouverez ici un grand nombre d'annonces de particuliers ayant quelques guitares à vendre, et vous pourrez vous-même y déposer une ou plusieurs annonces. Pour les consulter veuillez vous diriger vers la partie Occasions du site. De même, pour en déposer une ou en modifier, veuillez vous diriger vers la partie Annonces.
			</p>
       </div>


	   <!-- Le pied de page -->
       <div id="pied_de_page">
           <p></p>
       </div>

   </body>

Puis mon css si ca vous dit :

body
{
   width: 756px;
   margin: auto;
   margin-top: 0px;
   margin-bottom: 0px;    
}

/* L'en-tête */
#en_tete
{
   width: 756px;
   height: 148px;
   background-image: url("images/banniere.jpg");
   background-repeat: no-repeat;
}


/*Le menu*/
a #menu_accueil
{ 
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
	width: 96px;
    height: 85px;
	background: url("images/menu_accueil2.jpg");
} 

a:hover #menu_accueil
{ 
    background: url("images/menu_accueil2.jpg") no-repeat 0 -85px; 
}

a #menu_occasions
{
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
	width: 105px;
    height: 85px;
	background: url("images/menu_occasions2.jpg");
}

a:hover #menu_occasions
{
	background: url("images/menu_occasions2.jpg") no-repeat 0 -85px;
}

a #menu_annonces
{
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
	width: 111px;
    height: 85px;
	background: url("images/menu_annonces2.jpg");
}

a:hover #menu_annonces
{
	background: url("images/menu_annonces2.jpg") no-repeat 0 -85px;
}

a #menu_contact
{
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
	width: 101px;
    height: 85px;
	background: url("images/menu_contact2.jpg");
}

a:hover #menu_contact
{
	background: url("images/menu_contact2.jpg") no-repeat 0 -85px;
}

a #menu_débuter
{
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
	width: 106px;
    height: 85px;
	background: url("images/menu_debuter2.jpg");
}

a:hover #menu_débuter
{
	background: url("images/menu_debuter2.jpg") no-repeat 0 -85px;
}

#recherche
{
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
	width: 237px;
    height: 85px;
	background-image: url("images/recherche.jpg");
	background-repeat: no-repeat;
}


/* Le corps de la page */
#corps
{
   margin-top: 86px;
   margin-left: 0px;
   margin-bottom: 0px;
   padding: 10px;
   width: 756px;
   height: 542px;
   background-image: url("images/corps.jpg");
   background-repeat: no-repeat;
}


/* Le pied de page*/
#pied_de_page
{
   margin-left: 0px;
   margin-bottom: 0px;
   width: 756px;
   height: 121px;
   background-image: url("images/pied_page.jpg");
   background-repeat: no-repeat;
}

h1
{
   text-align: center;
   font-family: "Arial Black", Arial, Verdana, serif;
   font-size: 22px;
}

p
{
   width: 250px;
   height: 100px;
   text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */
   text-align: justify; /* Ils seront justifiés */
   color: white;
   margin: 30px; /* Marge extérieure de 30px */
}

Hello Oropher,

A mon avis le validateur n'aime pas trop voir des div dans des liens .

L'inverse serait quand même mieux...

@+

a écrit :
j'ai vérifié mon code, mais je ne sais pas pourquoi mon code ci-dessus est toujours refusé au validateur.

Salut,

parceque <a> est de type en ligne et n'accepte pas de balise de types blocs , comme <div>.

En gros, t'as pas le droit !

Mais autre chose, comme tu le montre, ça fait un lien vide (sans texte), si le css est désactivé : plus de menu !

Et c'est ce que les robots voient si je me trompe pas.

Aussi, tu devrais mettre tes images dans l'html, avec les alt="" renseignés, et tout ça dans une liste du genre :

<ul>
<li><a title="page 2" href=""><img src="" width="" height="" alt="" /></a></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   </ul>

Mais comme tu utilises la technique des images en background css qui glissent au survol, ben, je ne vois pas comment faire.

La question (dumoins la mienne) est :
Est ce que cette technique d'image survolée est "valable" pour l'utiliser dans un menu ?

Ici, il y a un exemple, mais du texte est tout de meme insérré dans l'html pour rester accessible.

Qu'on me reprenne si je dis des anneries, cette histoire de menu en image et d'accéssibilité m'intéresse.

Le alt="" renseigné d'une image mise en lien dans un menu est il suffisant pour etre accessible ?
-si je désactive la css, elle est là car elle est dans le contenu et est cliquable.
-Mais si je desactive les images ? (j'y arrive pas...)


Aussi : dans ta css, ligne 88 et 93, remplace les accents aigues :

a #menu_débuter

Modifié par Hum (11 Oct 2006 - 15:42)

Hum a écrit :


En gros, t'as pas le droit !

Aussi, tu devrais mettre tes images dans l'html, avec les alt="" renseignés, et tout ça dans une liste du genre :

<ul>
<li><a title="page 2" href=""><img src="" width="" height="" alt="" /></a></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   <li></li>
	   </ul>

Mais comme tu utilises la technique des images en background css qui glissent au survol, ben, je ne vois pas comment faire.

Et bien voilà mon problème. J'aimerais bien mettre mes images dans un menu listé, mais ce n'est pas possible vu que j'utilise un hover. Alors voilà ca me dit que mon code n'est pas valide ce que je concois(même si tout fonctionne très bien sous mozilla). Personne n'a jamais eu ce problème de menu et d'images survolées ??

Je peux peut-être alors utilisé ton exemple avec une seule image pour mon menu alors. Je vais voir ca merci.

ps : merci pour les accents je n'avais pas fait attention.
Modifié par Oropher (11 Oct 2006 - 16:14)

a écrit :
J'aimerais bien mettre mes images dans un menu listé, mais ce n'est pas possible vu que j'utilise un hover.

Non, le probleme initial dont je te parlais étais a propos de faire des liens vides dans ton menu.

Tu peux, maintenant que tu as créer en html ton menu sous forme de liste , ecrire des textes dans tes <a> au lieu d'ecrire en images, et donner un background aux <a>, et un different en a:hover...

Pour que tes <a> prennent la taille des tes images decoupés tu dois les passer en block, et les faire floatter à gauche.

Par contre ton découpage d'images devras etre different. Il n'est plus question, dans cette manière d'utiliser une seule image mais 4 en tout :

-une avec arrondi pour le premier item de menu + son etat en rollover (2)
-une pour les autres menus + son etat en rollover (2)

HTML

<ul id="menu">
<li><a id="firstitem" title="menu1" accesskey="1" href="#">Menu 1</a></li>
<li><a title="menu2" accesskey="2" href="#">Menu 2</a></li>
<li><a title="menu3" accesskey="3" href="#">Menu 3</a></li>
<li><a title="menu4" accesskey="4" href="#">Menu 4</a></li>
<li><a title="menu5" accesskey="5" href="#">Menu 5</a></li>
<li><a title="menu6" accesskey="6" href="#">Menu 6</a></li>
</ul>

CSS...(à peu près...j'ai un truc similaire qui fonctionne bien, j'ai donc tésté)

ul#menu {
list-style: none;
/*positionnement*/
}

ul#menu li{
float: left;
}

ul#menu li a{ 
display: block;
width: ...px; 
height: ...px;
text-decoration: none; 
color: white;
font-family: Tahoma; 
font-size: 10px;
}

ul#menu li a{
background: url( './images/img.jpg' ) left top no-repeat;
/*background-position: ....;   si besoin  */
}

ul#menu li a:hover {
background: url( './images/img_roll1.jpg' ) left top no-repeat;
/*background-position: ....;   si besoin   */
}
	/*Premier lien avec image arrondi au  bord*/

ul#menu li a#firstitem {
background: url( './images/firstitemimg.jpg' ) left center no-repeat;
/*background-position: ....;   si besoin  */
}

ul#menu li a#firstitem:hover {
background: url( './images/firstitemimg_roll.jpg' ) left center no-repeat;
/*background-position: ....;   si besoin  */
}

En fait au niveau rendu ça donne la meme chose que celui ci mais je ne saurai te dire quelle méthode est préférable à tous points de vues...
Modifié par Hum (12 Oct 2006 - 15:59)

Donc si j'ai bien compris j'utilise que ces images :
http://img172.imageshack.us/img172/8516/menu1xv7.jpg
http://img172.imageshack.us/img172/3185/menu1rollid2.jpg
http://img172.imageshack.us/img172/6107/menu2jb1.jpg
http://img172.imageshack.us/img172/2919/menu2rollug2.jpg

Et j'ai essayé la méthode en une seule image mais j'ai eu plus de soucis qu'autre chose... Je te remercie en tout cas.

Cool ca a l'air de fonctionner ! Plus d'erreurs de validation sur W3C, par contre j'ai un petit souci au niveau de IE (m'affiche du blanc) mais ca doit être parce que je n'ai pas encore bien positionné le menu (enfin j'espère). En tout cas merci.

a écrit :
Donc si j'ai bien compris j'utilise que ces images :...

Exactement.

Bonne continuation et quand tu estimeras que ton sujet est [résolu], ben, penses à le mettre en [résolu] dans son titre en éditant ton premier message.

Pas de problème, quand j'aurais réussi à positionner le menu, je le ferais de suite.

http://www.atlantiqueinformatique.com/guitare_occas/
Pfiou en fait j'ai un gros souci au niveau de IE comme vous pouvez le constater... alors qu'en local je n'ai pas de souci.
Modifié par Oropher (13 Oct 2006 - 10:48)