Problème de codage

Petit nouveau ! | 1 Messages

10 mars 2011, 22:18

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

Eléphant du PHP | 241 Messages

10 mars 2011, 23:04

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 :P
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;
}

ViPHP
ViPHP | 3607 Messages

10 mars 2011, 23:08

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>

Eléphant du PHP | 241 Messages

10 mars 2011, 23:23

Ah, je ne connaissais pas cette méthode, merci pour l'astuce jojolapine ^^

Eléphant du PHP | 275 Messages

11 mars 2011, 11:04

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...

Eléphant du PHP | 241 Messages

11 mars 2011, 14:02

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 :oops: