Forum d'entraide PHPFrance

Bonjour,

Je conçois le site web d'un de mes amis et j'ai des petits problèmes avec le codage. Dans dreamweaver l'affichage visuel est OK mais dans IE, ce n'est pas correct.

Normalement le menu et les logo de facebook et twitter devrait-être sur la même ligne mais ce n'est pas le cas, car il y a un espace qui se crée entre chaque image du menu.

Pourquoi?

Voir le site: http://www.mathieuderoy70.com/shop.html

Quelqu'un peut-il m'aider S.V.P.

Merci

Salut,
c'est quelque chose de tout bête, simplement tes liens sont écrit dans ta page HTML les uns en dessous des autres, de ce fait le navigateur compte un "espace" entre les liens, que l'ont revoient donc au rendu finale !
Pour palier à ce "bug", il faut encadrer tout le menu dans une div à laquelle tu associe un id, enfin, en haut de la page tu rajoute 3 lignes CSS. Normalement le problème devrait être résolu.

Bien évidemment le mieux serait d'abandonner les tableaux pour faire la mise en page, et de corriger toutes les erreurs de syntaxe HTML
http://validator.w3.org/

<div id="menu">
<a href=""><img /></a>
etc.
etc.
</div>

Ensuite en haut de ta page dans les propriétés CSS tu rajoute ceci :

#menu a {
	float: left;
}

Bonsoir,

Pour supprimer l'espace, il faut que tes liens soit "collés", qu'il n'y ai pas d'espace entre chacun d'eux.
Une astuce consiste à ajouter des commentaire html, pour garder de la lisibilité :

<a href="rundown.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/rundown_on.jpg',1)"><img src="images/rundown_off.jpg" name="Image6" width="185" height="32" border="0" id="Image6" /></a><!--
--><a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/news_on.jpg',1)"><img src="images/news_off.jpg" name="Image7" width="119" height="32" border="0" id="Image7" /></a><!--
--><a href="home1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/events_on.jpg',1)"><img src="images/events_off.jpg" name="Image8" width="150" height="32" border="0" id="Image8" /></a><!--
--><a href="photos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/photos_on.jpg',1)"><img src="images/photos_off.jpg" name="Image9" width="153" height="32" border="0" id="Image9" /></a><!--
--><a href="videos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/videos_on.jpg',1)"><img src="images/videos_off.jpg" name="Image10" width="136" height="32" border="0" id="Image10" /></a><!--
--><a href="sponsors.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/sponsors_on.jpg',1)"><img src="images/sponsors_off.jpg" name="Image13" width="188" height="32" border="0" id="Image13" /></a><!--
--><a href="Sanstitre-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/shop_on.jpg',1)"><img src="images/shop_off.jpg" name="Image11" width="100" height="32" border="0" id="Image11" /></a>

Pour palier à ce "bug", il faut encadrer tout le menu dans une div à laquelle tu associe un id, enfin, en haut de la page tu rajoute 3 lignes CSS. Normalement le problème devrait être résolu.

A te lire, on penserait que c'est la seule solution...

Les classes ça existe aussi...

Je n'ai jamais dit que c'était la seule et unique solution, je sais bien que les classes existe aussi ^^
C'est peut-être ma phrase qui était mal tournée