28220 sujets

CSS et mise en forme, CSS3

Bonjour,
Sur ce design, tout va bien : j'ai réussi à caler le corps central avec les diagonales, ce qui fait qu'il n'y a aucun décalage sous FF. Pour le régler avec IE, j'ai utilisé un CSS Hack (margin-left: -3px)..
Le petit problème que je rencontre est avec FF : il suffit que je rajoute du contenu pour que ça se décale, ce qui donne ceci.
Quelqu'un aurait une idée, ou des pistes de réflexion ?

Merci d'avance Smiley rolleyes

PS : en plus, ça déborde, c'est moche Smiley confus ..
Modifié par kev1 (20 Aug 2005 - 14:33)
Modérateur
salut, pour que ton contenu ne de borde pas du conteneur sous ff il te suffit d'ajouter apres height:100%; height:auto;
pour tes images en background, si t'a premieres image se positionne par rapport au centre (le fond de #corps ), il semble alors logique de cale les autres images a partir du même point. du moins c'est ma logique alors je te propose pour positionner ton arriere plan ces modifs:

body
{
	background: url(background.jpg) repeat;
	background-position:center 4px!important;
	background-position:center 3px; /* on deduit le pixel que IE ajoute */
	height: 100%; /* pour que le fond descende jusqu'au bout du document */
	margin:auto;
	border: none;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
* html body /* Pour aligner les rainures sur IE */
{
		/*margin-left: -3px;*/
}


a plus
Modifié par gcyrillus (20 Aug 2005 - 22:38)
Excellent, merci gc..

Par contre, pour info :
J'ai l'impression que le décalage de 1px automatiquement effectué par IE... n'a pas lieu pour un "background-position:center". Je n'ai donc pas eu à effectuer un décalage spécifique pour IE. Mais merci pour l'astuce du "!important", elle permet d'éviter bien des CSS Hacks..

Donc au final, je n'ai eu qu'à mettre un background-position:center ainsi qu'un height:auto après le height 100% pour régler le problème. C'est vrai que centrer le fond est d'une logique redoutable.. Smiley biggol

Merci encore!
Modifié par kev1 (20 Aug 2005 - 16:07)
Administrateur
gcyrillus a écrit :

/************************************/

body
{
	background: url(background.jpg) repeat;
	background-position:center 4px!important;
	background-position:center 3px; /* on deduit le pixel que IE ajoute */
	height: 100%; /* pour que le fond descende jusqu'au bout du document */
	margin:auto;
	border: none;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
* html body /* Pour aligner les rainures sur IE */
{
		/*margin-left: -3px;*/
}

/************************************/

gcyrillus> Plutôt que d'utiliser /************************************/ pour espérer rendre lisible quelque chose qui ne l'est pas, nous demandons dans les Règles du Forum à ce que les balises [ code] [ /code] soient utilisées (elle se trouve sous les smileys). Je t'invite à (re-)lire ces règles et à éditer ton message pour les ajouter.

Merci d'avance,
Felipe
Modifié par Felipe (20 Aug 2005 - 15:56)