destroyedlolo Posté 21 Février 2006 Posté 21 Février 2006 Bonjour, je suis en train de batailler avec les CSS pour obtenir une bordure faite d'image sur un design elastique Je developpe avec Netscape 7 dont le moteur est +/- celui de Mozilla 1.0 Mon probleme, c'est qu'aucun navigateur que j'ai essaie n'a le meme rendu : Mozilla 1.0 Le meme code avec FireFox 1.0 ??? Je ne comprend pas pourquoi les coins du bas ne sont pas allignes comme ceux du haut D'autant plus que les autres navigateurs le font ... Le meme code avec M$IE6 Ce coup-ci l'allignement des coins est correcte, mais tous ce qui se trouve en bas est decale vers le haut Voici mon code qui est tout ce qui est de plus simple div.haut { background-image:url('/images/bordhaut.gif'); background-repeat: repeat-x; height:22px; position: relative; top: -22px;}div.chg { background-image:url('/images/coinhg.gif'); width:41px; height:59px; float: left; position: relative; left: -33px; top: 6px;}div.chd { background-image:url('/images/coinhd.gif'); width:57px; height:59px; float: right; position: relative; right: -40px; top: -4px;}div.bas { background-image:url('/images/bordbas.gif'); background-repeat: repeat-x; height:20px; position: relative; bottom: -20px;}div.cbd { background-image:url('/images/coinbd.gif'); width:56px; height:66px; float: right; position: relative; right: -40px; top: -45px;}div.cbg { background-image:url('/images/coinbg.gif'); width:49px; height:62px; float: left; position: relative; left: -36px; top: -38px;}div.contenu { width:80%; background-image:url('/images/parchemin.gif');/* margin: 29px 60px 60px 29px;*//* border: solid green; */} J'ai fait plusieurs essais ... et rien ne marche. Bref, j'ai besoin de l'aide d'un specialiste du CSS A+ Lolo
petit-ourson Posté 21 Février 2006 Posté 21 Février 2006 Je n'ai pas la solution, mais je déteste les loose.dtd ... Souvent ça fait tout déconner ;o)
destroyedlolo Posté 21 Février 2006 Auteur Posté 21 Février 2006 Ben tu maitrais qui a la place ... pour que ca fonctionne.
Dudu Posté 21 Février 2006 Posté 21 Février 2006 (modifié) Salut, Dans le code que tu donnes, il y a une ligne blanche avant le DOCTYPE. Est-elle également dans le code de ta page ? Si oui, WinIE passe en quirks Pour continuer dans la lignée de petit-ourson, tentes un passage en 4.01 Strict. Il n'y aura normalement rien à changer à ton code à part virer les <center>. Tu les remplaceras par une simple règle CSS body {text-align: center;} Sinon, pour centrer un élément de type bloc, tu lui mets juste les marges extérieures sur "auto" et c'est bon. Par exemple, si une <div> doit avoir des marges extérieures haut et bas à 2 px et être centrée, çà donne çà div {margin: 2px auto;} PS: ne pas mettre de guillemets autour des attributs est le meilleur moyen de ruiner une mise en page edit: j'avais un doute et j'ai bien fait de vérifier. WinIE ne passe jamais en mode strict avec un DOCTYPE HTML 4.01 Transitional. Et ne passe qu'en "Almost Standards" avec un 4.01 Strict. Modifié 21 Février 2006 par Dudu
loban Posté 21 Février 2006 Posté 21 Février 2006 Tu devrais aussi préciser les 'background-position' dans tes CSS. Pour moi, cela a résolu les différences, que j'avais sur un site, entre IE & Firefox.
destroyedlolo Posté 23 Février 2006 Auteur Posté 23 Février 2006 Salut, bon, j'ai essaye de passe en mode strict mais le resultat est toujours identique :-( (d'ailleurs, ai-je un moyen de savoir dans quel mode se met le navigateur ?). Pour Dudu, je n'ai pas de ligne blanche dans mon code. Tu devrais aussi préciser les 'background-position' dans tes CSS. <{POST_SNAPBACK}> Tu as mis quoi ? J'ai essaye mais l'image est toujours decalee sous FF1.5 mais en plus ... l'image n'est pas correctement affiche (c'est comme si il avait deplace la zone dans laquelle l'image s'affiche ... mais pas l'image elle-même donc on voit des "repetition" (tile) de l'image). Bon, c'est peut etre pas clair, je peux faire un snapshot pour explique si vous voullez. Pfff, je seche la.
loban Posté 23 Février 2006 Posté 23 Février 2006 Pour FF, tu devrais utiliser l'extension WebDeveloper. Cela te permettrais de savoir si c'est le cadre qui est mal aligné, ou si c'est l'image dans le cadre. Pour des exemples de background-position, tu peux jeter un oeil sur la page ici. Ce n'est sur des DIV, mais c'est sur les cellules de chaque coin des tableaux.
destroyedlolo Posté 23 Février 2006 Auteur Posté 23 Février 2006 OOOOuuuuuuiiiiiii, t'as raison (en plus, c'est con car je l'avais deja d'installe mais je n'ai pas pense a verifier ). Mon probleme est donc resolu pour FireFox : c'etait juste paske stupidement, ma zones texte n'est pas assez hautes et les 2 DIV des coins arrivaient a la meme hauteur. Mais comment faire pour les autoriser a se superposer ? Qu'ils ne se decallent plus si ils doivent occuper la meme place ? Concernant mon probleme avec MSIE, ben je n'arrive pas a voir si c'est la zone "contenu" que IE fait descendre de maniere erronee, ou si c'est le DIV "bas" qui ne s'alligne pas en bas. Si j'essaie de decaler ce DIV vers le bas ... ca n'a aucun effet a l'affichage
loban Posté 23 Février 2006 Posté 23 Février 2006 Impeccable pour FF, alors. Pour le chevauchement, ce n'est pas possible. Il faut que tes images de coin soient le moins large possible. Pour MSIE, là je sèche un peu. C'est assez difficile sans voir la page en ligne. Néanmoins, essayes de mettre un peu de contenu à la place du texte 'bla bla' pour voir si cela ne se repositionne pas correctement.
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant