Bonjour.
Je vous propose une petite Etude de Cas sans prétention. J'aimerais juste que quelques pros la lisent et me disent si je suis dans le vrai. Je compte le mettre sur mon site et aussi le proposer sur des forums à qui veut, en particulier les passionnés de météo qui construisent aussi des sites pour leurs passions et qui ne connaissent d'ailleurs pas tous Alsacréations ^^
L'exemple pris ici concerne des bordures fluides (quel que soit la taille du contenu du texte, quel que soit sa résolution + gde ou + petite, ou même la taille de sa fenêtre de navigateur).
Ce sont les bordures situés sur les cotés de mon corps de textes au centre.
www.meteobell.com/template_2.php
C'est aussi une histoire vrai,
et d'il y a très peu de temps même en fait. 
C'est la raison pour laquelle il reste des choses à faire encore sur ce lien comme vous vous en rendrez-compte, (2 semaines à peine depuis le début et je suis pas encore en vacances )
L'exemple précis est en fait un DiV contenant un des paragraphes textes du milieu dans lequel on place 4 autres DIVs de chaque coté pour faire les bordures. Ils ont la dimension des bordures (un coté fixe, l'autre à 100%). Dans ses 4 sous-DIV un background-image petit et placé en position repeat-x ou y, permettent la transition. De plus on rajoute 2 vrai images en hauteur et largeur fixés (en px)placés, dans chacun des bouts de ses DIV, permettant d'effectuer un coin de barre dans chaque angle du paragraphe texte. Le background-image permet de faire la transition au milieu (faire attention à la continuité des images, mais là c'est affaire de graphisme et plus de code. ) Changez la taille de votre texte, la taille de votre fenêtre navigateurs ou de résolutions d'ordinateur pour voir le comportement de tout ça quand le site bouge ou change de forme, de dimension.....Testez ici : www.meteobell.com/template_2.php
Intéréssons nous au code maintenant. En effet, tout ceci est finallement beaucoup plus compliqué qu'il n'y parait.
A force de tâtonner, triffouiller, calculer, comprendre, chercher sur le net, lut des forums Merci la fonction Recherche d’Alsacréation, à la condition que le nombre réponse ne dépasse pas 1 page et que l’on tape avant tout les bons mots. Dans mon cas si je tape « Images – Position – Background » j’arriverais à des choses me donnant sans doute des bonnes façons de faire, mais ne m’aideront pas forcément à en comprendre la résolution sur mon cas préçis (je parle en général) et à identifié précisément mon enchainement de bugs, rendant le tout très compliqué.
Mais je suis persévérant, essaye d’aller chopper à droite à gauche des choses. Merci Alsacréation pour ça et finit par comprendre enfin qu’il existait une solution connue ou une méthode de contournement pour Résoudre Tous (ou presque) les Problèmes de Comptabilité entre les Différents Navigateurs Internet. Et parfois sans utiliser de Haks . trop superflus et inutiles
J’ai réalisé tout cela en mélangeant les positions absolutes pour les images en coin, relatives pour les background-images et mélange entre défini et infini pour les dimensions des DIV (blocs).
Je pars du principe que vous avez réussi à créer cela. Je ne vais pas faire un tuto la-dessus.
Tout allait bien sur mon site. Un détail graphique cependant clochait. Impossible de faire répéter indéfiniment mes barres verticales avec IE. Essayer de résoudre ce bug va provoquer tout une autre série d'autres bugs différents et successifs. Classique, devrais-je dire en définitive.
Ce tuto propose des réponses élémentaires et trucs et astuces indispensables à savoir. Un bon cas d 'école permettant de voir l'ensemble des problemes les plus connus d'incompatibilités je pense. Enfin quelques uns fortement liés en tout cas.
- IE n’affichait pas un background-image (image de fond) placé en repeat-y (se répète verticalement) dans un bloc qui ne possède pas de height (hauteur verticale) défini. Il s’agit d’un bug connu de height :100% ; Car ce 100% est défini par rapport à un bloc parent. 100 ok, mais 100% de quoi. Il faut donc définir aussi le bloc parent. Cela peut provoquer aussi d’autres types de bugs connus. Mais toujours la même cause, ce height : 100% qu’IE a du mal à cerner.
Plusieurs solutions s’offrent à vous. La première consiste à définir un 100% jusqu’à revenir à un bloc parent ayant enfin une limite. Il se peut donc si votre site n’est pas fixe, que vous deviez définir donc la page Internet elle-même :
- Mais il peut arriver parfois, comme c’est le cas sur mon site par exemple, qu’il ne soit pas possible de résoudre ce bug en procédant de la sorte, car vous ne pouvez pas définir une hauteur dans un des blocs parents ou le bloc an question lui-même ou bien même le body (ensemble du site) tout simplement. Pas de panique, je vais vous épargner pas mal d’heures de recherches, moi-même effectué :
Vous vouliez que ce « background » se répète sous une « image » ? Vous avez donc tout naturellement et de façon logique placés les 2 dans le même DIV. Construire un site Internet n’est pas toujours question de logique mais de business (Merci Microsoft :-[ )
Il vous faut mettre le Background-Image dans un bloc parent et l’Image elle-même dans un bloc enfant. Sinon IE s'emballe.
- Oui mais vous avez déjà un Background-Image dans ce bloc parent. Or une règle veut qu’il soit impossible de mettre 2 Background Image dans le même DIV (bloc) même s’ils ne sont pas placés au même endroit du bloc. Résultat, les navigateurs n’en affichent qu’un seul. Pas de panique.
Construisez autant de blocs nécessaires que vous avez de background image à mettre dans ce bloc. Superposés-les, les uns dans les autres comme cela :
Mettez ici tout le code de votre paragraphe ainsi que le texte. Les 3 div n'en forment en fait qu'un seul. C'est juste votre cadre principale contenant tout ce que nous avons à l'intérieur et qu'on a divisé par 3. Chaque Div contient son propre background-image positionné et l'effet est similaire à 1 seul
A la fin n'oubliez pas cela également.
En css voilà ce que cela donnerait dans mon exemple :
Tout ceci m’a permis de révéler qu’il s’agissait bel et bien de plusieurs bugs différents et entremêlé les uns dans les autres. Chaque nouvelle solution à tâtons, étant trompeuse, et nous faisons croire des effets qui n’existent pas.
Comme le fait par exemple que j’avais par mégarde mis chacune de mes images situées dans le code Xhtml dans des DIV comme par ex :
Au lieu de :
A condition de mettre aussi dans son Css
Pour dire que mes images sont maintenant considérées comme des DIV
Là en l’occurrence, l’ayant fait au milieu de mes expériences sur ce problème de bordures latérales, ca n’a rien changé mais peut être cela m’a résolu un problème futur. Qui sait. Mauvaise piste donc dans l’immédiat, mais bonne piste finalement peut être aussi pour le futur. Tout le problème est là. Résoudre un bug, ok, mais dans la construction d’un site acceptable c’est une multitude de choses à faire et ne pas faire. Les notepads and co devraient intégrer un « validateur de bug IE » ou un truc de ce genre là.
Oui mais maintenant j’ai un espace de quelques pixels entre ces 3 DIV successifs, impossible à enlever quoiqu’on fasse (sur IE pas de problème, à moins que l’idée était justement de mettre un espace aussi avec IE ;- ). Résultat j’ai ma barre-image du bas qui se décale vers le haut de quelques pixels, alors qu'elle devrait être collé vraiment tout en bas , celle situé dans le code des 3 Divs, et qui normalement était situé en position tout en bas (par ex, l’important étant de vouloir collé une image sur un coté) de mon site (collé au Div « .fond » dans l'exemple). Cet espace est incompressible sur Mozilla et Firefox. Il n’est pas visible sur IE. Bref (c'est compliqué à expliquer ^^) mes 3 frontieres de blocs que je vient de créer ne se superposent pas (0px), elles sont considérés comme ayant une épaisseur et seulement sur certains navigateurs.
Il suffit de rajouter dans son Css, le code :
Voilà. On comprend bien que pour en arriver là, chercher tout seul est un temps précieux de perdu, puisque l’équation ne se résout que dans un enchaînement précis nous permettant d’identifier chacun des bugs. Puisque à chaque fois le fait d’arranger un petit bug en créé un autre totalement différent. Ce n’est pas le même Bug à chaque fois et il est difficile au début de cerner cela.
Pourtant il existe des solutions. L’important étant de bien les identifier.
Dans ce cas précis, rajouter simplement le code :
Bon grâce à ce petit code superflu avec « border » en tout cas j’y vois déjà plus clair sur le placement précis de tout ça.
Logiquement pour que votre site soit impeccable, vous devez avoir le même comportement entre les différents navigateurs. Il est plus difficile de résoudre ce genre de Bug d’incompatibilité (Microsoft en tête des vilains canards) que des petits bugs visibles mais identiques sur les différents navigateurs.
Voilà en espérant que ca vous aidera là où moi j’ai galéré quelques bonnes dizaines d’heures et malgré le fait d’avoir créer déjà un 1er site (bourrés de ce genre de petits détails résolus à chaque fois ou presque). Tout ceci est un besoin pour moi aussi d’écrire pour ne pas oublier, car qui dit que j’aurais retenus cet enchaînement de corrections dans 1 an ou 2
Si ça peut en aider certains, c'est aussi tant mieux. Pis c'est un peu aussi un cas d'école des quelques bugs et corrections les plus connus, je pense. le genre de truc qui revient souvent sur Alsa.
Damien49 - www.meteobell.com (en cours de reconstruction totale
)
PS : Pour ceux qui débutent, ne faites pas comme moi dans mon exemple, rajoutés les bouts de codes à l'inverse de votre lecture ici (au moins vous serez obligé de tout lire avant de devoir corriger vos bugs ). D'abord les borders, puis le *margin:0 etc..... 
Modifié par Damonya (26 Jul 2006 - 20:19)
Je vous propose une petite Etude de Cas sans prétention. J'aimerais juste que quelques pros la lisent et me disent si je suis dans le vrai. Je compte le mettre sur mon site et aussi le proposer sur des forums à qui veut, en particulier les passionnés de météo qui construisent aussi des sites pour leurs passions et qui ne connaissent d'ailleurs pas tous Alsacréations ^^
L'exemple pris ici concerne des bordures fluides (quel que soit la taille du contenu du texte, quel que soit sa résolution + gde ou + petite, ou même la taille de sa fenêtre de navigateur).
Ce sont les bordures situés sur les cotés de mon corps de textes au centre.
www.meteobell.com/template_2.php
C'est aussi une histoire vrai,
et d'il y a très peu de temps même en fait. C'est la raison pour laquelle il reste des choses à faire encore sur ce lien comme vous vous en rendrez-compte, (2 semaines à peine depuis le début et je suis pas encore en vacances )L'exemple précis est en fait un DiV contenant un des paragraphes textes du milieu dans lequel on place 4 autres DIVs de chaque coté pour faire les bordures. Ils ont la dimension des bordures (un coté fixe, l'autre à 100%). Dans ses 4 sous-DIV un background-image petit et placé en position repeat-x ou y, permettent la transition. De plus on rajoute 2 vrai images en hauteur et largeur fixés (en px)placés, dans chacun des bouts de ses DIV, permettant d'effectuer un coin de barre dans chaque angle du paragraphe texte. Le background-image permet de faire la transition au milieu (faire attention à la continuité des images, mais là c'est affaire de graphisme et plus de code. ) Changez la taille de votre texte, la taille de votre fenêtre navigateurs ou de résolutions d'ordinateur pour voir le comportement de tout ça quand le site bouge ou change de forme, de dimension.....Testez ici : www.meteobell.com/template_2.php
Intéréssons nous au code maintenant. En effet, tout ceci est finallement beaucoup plus compliqué qu'il n'y parait.
A force de tâtonner, triffouiller, calculer, comprendre, chercher sur le net, lut des forums Merci la fonction Recherche d’Alsacréation, à la condition que le nombre réponse ne dépasse pas 1 page et que l’on tape avant tout les bons mots. Dans mon cas si je tape « Images – Position – Background » j’arriverais à des choses me donnant sans doute des bonnes façons de faire, mais ne m’aideront pas forcément à en comprendre la résolution sur mon cas préçis (je parle en général) et à identifié précisément mon enchainement de bugs, rendant le tout très compliqué.
Mais je suis persévérant, essaye d’aller chopper à droite à gauche des choses. Merci Alsacréation pour ça et finit par comprendre enfin qu’il existait une solution connue ou une méthode de contournement pour Résoudre Tous (ou presque) les Problèmes de Comptabilité entre les Différents Navigateurs Internet. Et parfois sans utiliser de Haks . trop superflus et inutiles
J’ai réalisé tout cela en mélangeant les positions absolutes pour les images en coin, relatives pour les background-images et mélange entre défini et infini pour les dimensions des DIV (blocs).
Je pars du principe que vous avez réussi à créer cela. Je ne vais pas faire un tuto la-dessus.
Tout allait bien sur mon site. Un détail graphique cependant clochait. Impossible de faire répéter indéfiniment mes barres verticales avec IE. Essayer de résoudre ce bug va provoquer tout une autre série d'autres bugs différents et successifs. Classique, devrais-je dire en définitive.
Ce tuto propose des réponses élémentaires et trucs et astuces indispensables à savoir. Un bon cas d 'école permettant de voir l'ensemble des problemes les plus connus d'incompatibilités je pense. Enfin quelques uns fortement liés en tout cas.
- IE n’affichait pas un background-image (image de fond) placé en repeat-y (se répète verticalement) dans un bloc qui ne possède pas de height (hauteur verticale) défini. Il s’agit d’un bug connu de height :100% ; Car ce 100% est défini par rapport à un bloc parent. 100 ok, mais 100% de quoi. Il faut donc définir aussi le bloc parent. Cela peut provoquer aussi d’autres types de bugs connus. Mais toujours la même cause, ce height : 100% qu’IE a du mal à cerner.
Plusieurs solutions s’offrent à vous. La première consiste à définir un 100% jusqu’à revenir à un bloc parent ayant enfin une limite. Il se peut donc si votre site n’est pas fixe, que vous deviez définir donc la page Internet elle-même :
html, body {height:100%;}- Mais il peut arriver parfois, comme c’est le cas sur mon site par exemple, qu’il ne soit pas possible de résoudre ce bug en procédant de la sorte, car vous ne pouvez pas définir une hauteur dans un des blocs parents ou le bloc an question lui-même ou bien même le body (ensemble du site) tout simplement. Pas de panique, je vais vous épargner pas mal d’heures de recherches, moi-même effectué :
Vous vouliez que ce « background » se répète sous une « image » ? Vous avez donc tout naturellement et de façon logique placés les 2 dans le même DIV. Construire un site Internet n’est pas toujours question de logique mais de business (Merci Microsoft :-[ )
Il vous faut mettre le Background-Image dans un bloc parent et l’Image elle-même dans un bloc enfant. Sinon IE s'emballe.
- Oui mais vous avez déjà un Background-Image dans ce bloc parent. Or une règle veut qu’il soit impossible de mettre 2 Background Image dans le même DIV (bloc) même s’ils ne sont pas placés au même endroit du bloc. Résultat, les navigateurs n’en affichent qu’un seul. Pas de panique.
Construisez autant de blocs nécessaires que vous avez de background image à mettre dans ce bloc. Superposés-les, les uns dans les autres comme cela :
<div class="fond"><div class="bordure_gauche"><div class=" bordure_droite">
Mettez ici tout le code de votre paragraphe ainsi que le texte. Les 3 div n'en forment en fait qu'un seul. C'est juste votre cadre principale contenant tout ce que nous avons à l'intérieur et qu'on a divisé par 3. Chaque Div contient son propre background-image positionné et l'effet est similaire à 1 seul
A la fin n'oubliez pas cela également.
</div></div></div>En css voilà ce que cela donnerait dans mon exemple :
. fond, .bordure_gauche, . bordure_droite
{
position: relative;
width: 100%;
height:100%;
}
.fond
{
background: url("../Images/fond.gif") repeat;
}
.bordure_gauche
{
background: url("../Images/ barre_g_repeat.jpg") left repeat-y;
}
. bordure_droite
{
background: url("../Images/ barre_d_repeat.jpg") right repeat-y;
}
Tout ceci m’a permis de révéler qu’il s’agissait bel et bien de plusieurs bugs différents et entremêlé les uns dans les autres. Chaque nouvelle solution à tâtons, étant trompeuse, et nous faisons croire des effets qui n’existent pas.
Comme le fait par exemple que j’avais par mégarde mis chacune de mes images situées dans le code Xhtml dans des DIV comme par ex :
[b]<div id="position_image_a">[/b]
<img
src="Images/ barre_h_g_256.jpg"
alt="Barre du Haut" title="Bidule-Truc" />
[b]</div>[/b]Au lieu de :
<img
[b]class="position_image_a"[/b]
src="Images/ barre_h_g_256.jpg"
alt="Barre du Haut" title="Bidule-Truc" />A condition de mettre aussi dans son Css
img {
display: block;
}Pour dire que mes images sont maintenant considérées comme des DIV
Là en l’occurrence, l’ayant fait au milieu de mes expériences sur ce problème de bordures latérales, ca n’a rien changé mais peut être cela m’a résolu un problème futur. Qui sait. Mauvaise piste donc dans l’immédiat, mais bonne piste finalement peut être aussi pour le futur. Tout le problème est là. Résoudre un bug, ok, mais dans la construction d’un site acceptable c’est une multitude de choses à faire et ne pas faire. Les notepads and co devraient intégrer un « validateur de bug IE » ou un truc de ce genre là.
Oui mais maintenant j’ai un espace de quelques pixels entre ces 3 DIV successifs, impossible à enlever quoiqu’on fasse (sur IE pas de problème, à moins que l’idée était justement de mettre un espace aussi avec IE ;- ). Résultat j’ai ma barre-image du bas qui se décale vers le haut de quelques pixels, alors qu'elle devrait être collé vraiment tout en bas , celle situé dans le code des 3 Divs, et qui normalement était situé en position tout en bas (par ex, l’important étant de vouloir collé une image sur un coté) de mon site (collé au Div « .fond » dans l'exemple). Cet espace est incompressible sur Mozilla et Firefox. Il n’est pas visible sur IE. Bref (c'est compliqué à expliquer ^^) mes 3 frontieres de blocs que je vient de créer ne se superposent pas (0px), elles sont considérés comme ayant une épaisseur et seulement sur certains navigateurs.
Il suffit de rajouter dans son Css, le code :
*{margin: 0; padding:0;} Voilà. On comprend bien que pour en arriver là, chercher tout seul est un temps précieux de perdu, puisque l’équation ne se résout que dans un enchaînement précis nous permettant d’identifier chacun des bugs. Puisque à chaque fois le fait d’arranger un petit bug en créé un autre totalement différent. Ce n’est pas le même Bug à chaque fois et il est difficile au début de cerner cela.
Pourtant il existe des solutions. L’important étant de bien les identifier.
Dans ce cas précis, rajouter simplement le code :
div {border: 1px solid orange}
img, form {border: 1px dashed blue}Bon grâce à ce petit code superflu avec « border » en tout cas j’y vois déjà plus clair sur le placement précis de tout ça.
Logiquement pour que votre site soit impeccable, vous devez avoir le même comportement entre les différents navigateurs. Il est plus difficile de résoudre ce genre de Bug d’incompatibilité (Microsoft en tête des vilains canards) que des petits bugs visibles mais identiques sur les différents navigateurs.
Voilà en espérant que ca vous aidera là où moi j’ai galéré quelques bonnes dizaines d’heures et malgré le fait d’avoir créer déjà un 1er site (bourrés de ce genre de petits détails résolus à chaque fois ou presque). Tout ceci est un besoin pour moi aussi d’écrire pour ne pas oublier, car qui dit que j’aurais retenus cet enchaînement de corrections dans 1 an ou 2
Si ça peut en aider certains, c'est aussi tant mieux. Pis c'est un peu aussi un cas d'école des quelques bugs et corrections les plus connus, je pense. le genre de truc qui revient souvent sur Alsa.
Damien49 - www.meteobell.com (en cours de reconstruction totale
) PS : Pour ceux qui débutent, ne faites pas comme moi dans mon exemple, rajoutés les bouts de codes à l'inverse de votre lecture ici (au moins vous serez obligé de tout lire avant de devoir corriger vos bugs
). D'abord les borders, puis le *margin:0 etc..... Modifié par Damonya (26 Jul 2006 - 20:19)
A condition bien sûr comme vous l'avez fait remarqué et je vous en remercie, que je réécrive un peu tout ça. C'était encore qu'un brouillon, 
)