Encadrement avec des CSS

[destroyedlolo]

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]

Je n'ai pas la solution, mais je déteste les loose.dtd ...

Souvent ça fait tout déconner ;o)

[destroyedlolo]

Ben tu maitrais qui a la place ... pour que ca fonctionne.

[Dudu]

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]

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]

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]

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]

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]

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.