🌍
Français
Effectivement, le td qui contient l'image doit aussi avoir marge et remplissage à 0.
<table style="border-spacing: 0px;">
<tbody>
<tr>
<td>
<img alt="" src="http://akaiken.free.fr/sanctuaire/blog/menu_g.gif" style="position: relative; top: 0px;"/>
</td>
<td id="nav">
La balise img répondra aux directives pour les autres img.
Et son td ne répondra pas aux directives de #nav
Voilà deux raisons d'avoir un espace...
8-)
Mon #nav (pas de #nav UL chez moi, mais un #nav li ^^, dois-je présumer non de leur identicité mais d'un rapport quand même ?) a bien quelques margin et padding, mais toujours mis à 0 (idem pour #nav li).
Merci de m'avoir répondu, je n'avais effectivement pas pensé à ça.
AkaiKen a écrit:
Bon, j'y suis encore une fois allée à la barbare :D et ai modifié directement le fichier index.php à la racine de PWG, donc sur la page d'accueil, sous Firefox, le menu en sliding doors est parfait. Mais toujours pas sous IE7, et je ne sais absolument pas quoi faire.
(il y a aussi un décalage lorsqu'on navigue dans les images, et là non plus je ne sais pas comment modifier...)
Pour IE7: vérifie que ton #nav et #nav UL n'ont ni marge ni padding à gauche et à droite. Ce sera déjà un début.
Bon, j'y suis encore une fois allée à la barbare :D et ai modifié directement le fichier index.php à la racine de PWG, donc sur la page d'accueil, sous Firefox, le menu en sliding doors est parfait. Mais toujours pas sous IE7, et je ne sais absolument pas quoi faire.
(il y a aussi un décalage lorsqu'on navigue dans les images, et là non plus je ne sais pas comment modifier...)
Je me permets de remonter ce sujet, car j'ai toujours le menu qui merdoie sous IE7 (les 3 parties ne sont pas collées), et l'extrémité de gauche est décalée sous FF2...
J'ai essayé le <img align="right" src= etc. pour recoller les bords sous IE7 (aligner le morceau de gauche à droite et le morceau de droite à gauche), mais aucun changement.
Je crois avoir trouvé la raison du décalage du morceau de gauche, il y a un style="position: relative; top: 1px;" venu d'on ne sait où, et qui rechigne à se laisser modifier en top : 0px... Je fais la modif dans l'onglet Configuration de PWG, qui me marque 'inscrit dans la base de donnée, etc', mais le code source de la page, après maints Ctrl+F5 me redonne le top: 1px.
Que se passe-t-il ?
Bon, il reste trois erreurs, elles semblent toutes dues à phpMyVisite, je vais le désinstaller dès que je le pourrai (problèmes de FTP en ce moment...).
EDIT : j'ai transformé (à la barbare =D) mon index.php de l'accueil en XHTML Transitionnal. Après une petite centaine de / ajoutés un peu partout, ça y est, ma page est valide !
Pour les align, il faut utiliser text-align en CSS:
<div style="text-align:center;">.....</div>
<div style="text-align:justify;">.....</div>
Je vais jeter un oeil maintenant...
Ok je vois, donc si je marque XHTML dans le doctype du document, ça marche ?
Tous les navigateurs supportent-ils ce langage ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Cela dépendra du doctype choisi et de son dtd.
Je suis en train d'enlever les erreurs, mais il y en a qui m'étonnent. Par exemple le W3C HTML Validator dit que <br /> est à éviter, alors que j'avais compris qu'au contraire c'était <br> qui n'était plus aux normes...
Ensuite, il semble que 'align' ne lui plaise pas, que ce soit dans l'entête (avec un <div align="center") ou dans le bloc PWG Stuffs Edito (avec un <P align="justify")... Que mets-je à la place ?
Quelques erreurs se retrouvent dans le code de phpMyVisite (je vais peut-être l'enlever tout court).
(je précise que l'extension que tu m'as donné en lien ne -//:---\spam pas les erreurs d'align, mais comme elle semblait nettoyer sans montrer où étaient les erreurs j'ai voulu compléter avec le Validator en ligne)
Pour les </li> et </td> en trop, c'est enlevé.
Pour ce qui est de l'aspect différent sous IE... là je ne sais pas du tout comment faire.
Merci d'avance :)
Je veux bien te donner un coup de main...
Mais le code source de ta page est bourré d'erreurs...
Utilises HTML Validator pour firefox...
Il y a des </li> et </td> en trop...
Et l'affichage sous IE n'est pas le meme... (marge antre les bords)
Hum, je ne vois pas trop les changements apportés par le float :left, c'est censé faire quoi ?
Sinon, ça marche bien, sauf que l'extrémité de droite est décalée d'un pixel vers le haut :'(
J'ai écrit ça : (c'est le code entier de l'entête)
<div align="center"><img alt="Au Griffon griffonnant, dessins, gribouillages, peintures numeriques (chez AkaiKen)" src="http://akaiken.free.fr/sanctuaire/blog/banni%c3%a8re-griffin-dessinant-new.jpg"/>
<table style="border-spacing:0px;"><tr>
<td>
<img style="position:relative;top:1px;" src="http://akaiken.free.fr/sanctuaire/blog/menu_g.gif" alt=""/>
</td>
<td id="nav">
<ul>
<li><a href="http://akaiken.over-blog.com/" title="Vers le blog du Griffon">Blog</a></li>
<li><a href="http://akaiken.free.fr/site" title="Vers la galerie">Galerie</a></li>
<li><a href="http://akaiken.deviantart.com" title="Vers mon site deviantART">deviantART</a></li>
<li><a href="http://akaiken.free.fr/site/index.php?/additional_page/1" title="Vers une présentation de votre serviteuse">Présentation</a></li>
<li><a href="http://akaiken.over-blog.com/article-3998763.html" title="Vers les liens de tas de gens que j'admire">Liens</a></li>
</ul></td>
<td><img src="http://akaiken.free.fr/sanctuaire/blog/menu_d.gif" alt=""></li></td>
</td></tr></table></div>Ta solution était la bonne akaiken...
Il te manquait juste un float:left...
La dessus, rien à changer....
<div id="nav">
<ul>
<li><img src="http://akaiken.free.fr/sanctuaire/blog/menu_g.gif" alt=""></li>
<li><a title="Vers le blog du Griffon" href="http://akaiken.over-blog.com/">Blog</a></li>
<li><a title="Vers la galerie" href="http://akaiken.free.fr/site">Galerie</a></li>
<li><a title="Vers mon site deviantART" href="http://akaiken.deviantart.com">deviantART</a></li>
<li><a title="Vers une présentation de votre serviteuse" href="http://akaiken.free.fr/site/index.php?/additional_page/1">Présentation</a></li>
<li><a title="Vers les liens de tas de gens que j'admire" href="http://akaiken.over-blog.com/article-3998763.html">Liens</a></li>
</ul>
</div>
Rajouter le float:left:
#nav li {
float : left;
margin : 0;
padding : 0;
display : inline;
letter-spacing : 0;
font-size : 12px;
}
ah ok, j'croyais que tu voulais tout mettre sur une ligne.