-
Message publié le lundi 07 juillet 2008 à 11 h 57 par jpnet.
-
Bonjour toutes et tous,
Petite question que je me pose, et à vous donc, pourquoi la première de obzoe (avec les petits angelots sur la gauche) s'affiche avec une marge en haut, et que le cadre (ou défile les images) n'est pas totalement "raccord" ?
Sous IE6 ET 7 L'affichage est parfait ...
Le site :
http://www.obzoe.com/
Thankxx.
-
Message publié le mardi 08 juillet 2008 à 10 h 50 par formy. S'il n'y a pas de solution, c'est qu'il n'y a pas de problème.
-
Bonjour,
Pour commencer, tu utilises un nombre impressionnant de tables imbriquées pour structurer ta page, ce qui est fortement déconseillé.
Ce peut-être pas l'origine de ton problème d'affichage mais ça y contribue certainement.
Les marges sont peut-être dues à un problème d'alignement vertical des éléments de tes colonnes. Tes colonnes ne doivent pas toutes faire la même hauteur. Peut-être qu'en ajoutant un valign="top" dans tes TD tu résoudras ce problème.
A noter que les contours de ton cadre central ne sont pas bien alignés sur Firefox non plus. Probablement à cause de la structure en table.
Si tu as l'occasion de t'intéresser aux CSS, tu produiras un code largement plus simple, plus propre, plus compatibles avec les différents navigateurs,... meilleur quoi. ;)
A+
-
Message publié le mardi 08 juillet 2008 à 11 h 16 par laruiss.
-
Ce n'est pas seulement sous Safari, c'est avec n'importe quel navigateur qui respecte les standards, qu'il y a un décalage (Firefox 1.5+, Opera 9+, Safari 2+).
Vu que tu as l'air designer, j'imagine que tu n'écris pas le HTML, mais que tu utilises un éditeur WYSIWYG ?
Pour être un peu plus sûr que l'aspect sera le même dans les différents navigateurs, commence ton document par une déclaration de DOCTYPE strict (ex. : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> cf :
http://www.w3schools.com/tags/tag_doctype.asp), sans aucun espace blanc avant cette déclaration (IE6 et 7 ne la lirait pas - ce bug est corrigé dans la version 8).
Et il faudrait nettoyer le code HTML
-qqs notes :
<LINK href="obzoe.css" type=text/css rel=stylesheet>
à remplacer par
<link href="obzoe.css" type="text/css" rel="stylesheet">
bien entourer les valeurs des attributs par des guillemets (les doubles sont conseillés), et utiliser des minuscules pour les noms de balises.
<script language="JavaScript">
<script language="JavaScript1.2">
<!-- et autres -->
<script>
à remplacer par :
<script type="text/javascript">
l'attribut langage n'a jamais été standardisé, et les navigateurs ne le prennent pas en compte, donc...
- éviter d'utiliser les tableaux pour une mise en page ;
- éviter les balises <script> hors de la balise <head> ;
- faire une fonction unique 'ajouter', par ex :
function ajouter(src, width, height) {
var imgElt = document.getElementById('zone').getElementsByTagName('img')[0];
// Ou mieux : var imgElt = document.getElementById('zoneImg') et ajouter un id à l'image :
// <TD id="zone"><img src="../ozz/zoe.jpg" width="386" height="745" border="0"></TD>
// à remplacer par :
// <td id="zone"><img id="zoneImg" src="../ozz/zoe.jpg" width="386" height="745" border="0"></td>
imgElt.src = src;
imgElt.width= width;
imgElt.height= height;
}
- enlever les balises fermantes non ouvertes (le </p> de <img src="../ozz/zoecenter.gif" width="225" height="418"border="0"></p>)
- ...
Bref, ton site est très joli (vraiment, bravo)... mais le code, beaucoup moins :-/
Le plus important, c'est la déclaration du doctype strict, ça ne règlera pas ton problème, mais ça te permettra de le régler plus facilement.
Je reste à ta disposition pour d'autres questions.
-
Message publié le mardi 19 août 2008 à 11 h 48 par jpnet.
-
Ah mince, des reponses, si je m'attendais, Merci donc, je regarde tout ca et je vous dis un mot.
-
Message publié le mardi 19 août 2008 à 11 h 55 par jpnet.
-
Bon je viens de lire vite fait, ca a l'air intéressant, je fais quelques essais et je vous dis ca ... En tous cas Merci.
-
Message publié le mardi 19 août 2008 à 11 h 59 par jpnet.
-
Et non je n'utilise aucun WYSIWYG, mais je n'ecris pas non plus totalement le code, je récupère certains scripts que j'adaptent en fonction de ce que je veux.
-
Message publié le mercredi 20 août 2008 à 10 h 59 par jpnet.
-
Last news ...
Comme le suggérait Laruiss, j'ai remplacés tous les :
<script language="JavaScript">
<script language="JavaScript1.2">
<!-- et autres -->
<script>
Par
<script type="text/javascript">
Et aucun problème ...
Ensuite, après remplacement de la balise <html> par ceci <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> voila ce que j'obtiens :
http://pagesperso-orange.fr/obzoe/web/xxx.htm
Difficlement acceptable ;-)
Je vous tiens au courant de la suite ...
-
Message publié le mercredi 20 août 2008 à 11 h 24 par formy. S'il n'y a pas de solution, c'est qu'il n'y a pas de problème.
-
Il ne faut pas remplacer la balise <html> par un doctype, il faut simplement ajouter un doctype en haut du code. La balise <html> doit rester, elle est obligatoire. ;)
-
Message publié le mercredi 20 août 2008 à 11 h 39 par jpnet.
-
Merci ... En effet c'est bien ce que proposait Laruiss, je rectifies ...
-
Message publié le mercredi 20 août 2008 à 11 h 45 par jpnet.
-
-
Message publié le mercredi 20 août 2008 à 16 h 23 par jpnet.
-
Je relis encore le post (et codes) de Laruiss, je fais mes petis essais, et Vraiment merci d'avoir pris le temps de détailler tout ca Laruiss. Jolie pédagogie ...
-
Message publié le mercredi 20 août 2008 à 16 h 58 par jpnet.
-
Avant d'attaquer le "gros" du post de Laruiss, j'ai mis comme le conseillait Formy des valign="top" après tous mes TD, chose bizarre je n'obtiens pas le même résultat sous Safari et Firefox. Par contre sous EXPLORER, c'est toujours Impec ...
A voire ici :
http://pagesperso-orange.fr/obzoe/web/refonte.htm
Une idée ? Merci en tous cas.
-
Message publié le mercredi 20 août 2008 à 17 h 32 par formy. S'il n'y a pas de solution, c'est qu'il n'y a pas de problème.
-
Explorer est le navigateur le plus permissif, il peut afficher correctement ce qui ne le sera pas avec un navigateur qui respecte les standards.
Sinon il reste quelques incohérences, comme des images qui font 253px de large dans des cellules qui font 255px de large, forcément il reste 2px d'espace vide.
Globalement, il y a trop d'imbrications de tables et de div. C'est une source évidente des différences d'affichage. Il faut que tu sois très précis sur les dimensions des éléments et que tu limites au maximum les marges (internes ou externes).
-
Message publié le mercredi 20 août 2008 à 17 h 44 par jpnet.
-
Ok merci d'avoir jeté un oeil Formy, je regarde ca très précisément et je fais les modifs.
En passant, un Navigateur "permissif" pas tout à fait respectueux des standarts mais dont l'affichage est très correct et un autre Navigateur respectant les standarts mais dont l'affichage est problèmatique (voir mon site, arf) c'est à se demander ...
Merci encore.
-
Message publié le mercredi 20 août 2008 à 17 h 46 par jpnet.
-
Et merci d'avoir repéré certaines grosses erreurs de ma part : "comme des images qui font 253px de large dans des cellules qui font 255px de large, forcément il reste 2px d'espace vide."
-
Message publié le mercredi 20 août 2008 à 20 h 04 par jpnet.
-
It's me, Formy pourrais tu me dire ou tu as repéré des "cellules" de 255px ?
J'ai beau chercher, je vois rien ... Merci.
-
Message publié le mercredi 20 août 2008 à 21 h 54 par formy. S'il n'y a pas de solution, c'est qu'il n'y a pas de problème.
-
Par exemple ici :
<td valign="top"><img width="253" height="128" border="0" src="../ozz/zoehautx.gif"/></td>
Cette cellule fait 255px de large mais l'image qu'elle contient ne fait que 253px. Il reste donc un petit espace à droite, visible sous Firefox.
Le problème vient peut-être du contenu d'une autre cellule. Je vois parfois des blocs de 253px avec une marge de 1px, ce qui fait une largeur totale de 255px.
Il faut se méfier de l'interprétation des largeurs quand il y a des marges ou des bordures.
C'est pour ça que le doctype est important, car il permet aux navigateurs de calculer les largeurs de la même façon.
Sans un doctype adapté, les navigateurs ne réagissent pas pareil. Certains vont compter les marges internes et les bordures pour déterminer la largeur totale, d'autres juste les bordures... c'est un vrai casse-tête.
;)
-
Message publié le mercredi 20 août 2008 à 23 h 02 par jpnet.
-
Ok merci beaucoup davoir pris le temps Formy, et pas pour rien, car now tout fonctionne au poil sous IE, safari et Firefox "à la maison", en ligne le décalage persiste sous Safari.
J'ai regardé ce que tu me disais sur la marge (border) de 1px qui m'interpellait, je ne comprenais pas son utilité, j'ai mis zero à la place de 1px pour voir (je ne sais plus pourquoi j'avais mis 1px à l'époque) et plus aucun décalage.
<script type="text/javascript">
iens6=document.all||document.getElementById
ns4=document.layers
//Vitesse de défilement
var speed=30
if (iens6){
document.write('<div id="container" style="position:relative;width:253;height:418;border:0px solid white;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:253;left:13;top:0">')
}
</script>
Donc tu as bien mis le doigt sur mon problème Formy, J'AVANCE ... Cool, merci, vraiment.
En passant j'aime bien le camaieux marron vert sur ton site, l'ensemble n'est pas folichon mais simple, clair, classe, tout ce qu'on demdande quoi. Le "logo" bof bof.
Encore merci de ton aide, et Laruiss aussi.
-
Message publié le jeudi 21 août 2008 à 06 h 01 par jpnet.
-
Super,
Probléme résolu, sous Explorer, Safari et Firefox, Obzoe n'affiche plus aucun décalage
Merci à tous, mention pour Formy qui a pointé le problème, et Laruiss grace à qui je vais pouvoir encore "toiletter" mon code, y'a du boulot ...
See you.
-
Message publié le jeudi 21 août 2008 à 07 h 42 par jpnet.
-
Par contre pour moi qui ne suis codeur que dans mes pires nightmare, si Laruiss passait par la, j'aimerais assez en savoir un peu plus sur ce qu'il disait à propos de la fonction ajouter, je comprends pas exactement ce que je dois faire avec le (les ?) code qu'il m'a proposé.
Je parle de ca :
- faire une fonction unique 'ajouter', par ex :
function ajouter(src, width, height) {
var imgElt = document.getElementById('zone').getElementsByTagName('img')[0];
// Ou mieux : var imgElt = document.getElementById('zoneImg') et ajouter un id à l'image :
// <TD id="zone"><img src="../ozz/zoe.jpg" width="386" height="745" border="0"></TD>
// à remplacer par :
// <td id="zone"><img id="zoneImg" src="../ozz/zoe.jpg" width="386" height="745" border="0"></td>
imgElt.src = src;
imgElt.width= width;
imgElt.height= height;
Merci.
all html : Le portail des webmaster
