28220 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,
j'ai un soucis avec internet explorer... je souhaiterais centrer mon conteneur mais cela ne fonctionne pas sous IE.

Voici la css en bref :

#container {
	border: 1px solid;
	width: 760px;
	margin: 0 auto;
	}


et voici mon body :

<div id="container">
	<div class="bloc">fxgddfg</div>
</div>


si quelqu'un peut m'aider à ce sujet, je lui en serais très reconnaissante.

Merci
Modifié par Alore (18 Apr 2006 - 16:02)
non en faite je viens de trouver à l'instant mais d'une autre manière.
Si ca peut intéresser quelqu'un voici la solution :

#container {
	position: absolute;
	left: 50%;
	margin-left: -380px;
	border: 1px solid;
	width: 760px;
	}


suffit d'imposer la position absolute au bloc, de lui donner une marge négative à gauche de la moitié de sa largeur et lui dire de se positionner à 50% de la gauche.

Voilà
Administrateur
Norore a écrit :
Ca ne marche pas mieux en mettant margin: auto; ?

Pas obligatoirement,

margin : 0 auto;
Signifie :
margin-top : 0;
margin-right : auto;
margin-bottom : 0;
margin-left : auto;

Alors que
margin : auto;
Signifie :
margin-top : auto;
margin-right : auto;
margin-bottom : auto;
margin-left : auto;
Alore a écrit :
non en faite je viens de trouver à l'instant mais d'une autre manière.
Si ca peut intéresser quelqu'un voici la solution :

#container {
	position: absolute;
	left: 50%;
	margin-left: -380px;
	border: 1px solid;
	width: 760px;
	}


suffit d'imposer la position absolute au bloc, de lui donner une marge négative à gauche de la moitié de sa largeur et lui dire de se positionner à 50% de la gauche.


Solution que je suis loin d'apprécier, car elle fout le bazar avec IE Mac (qui ne comprend pas la marge négative). Et que de toute façon, l'abus de position: absolute est dangereux pour la santé mentale du webdesigner.

Le margin: 0 auto; marche très bien avec IE 6 il me semble. Par contre IE 5 a un peu plus de mal, et il faut ruser avec lui :
Alsacréations : Centrer les éléments ou un site web en CSS
Qui c'est qui avait pas cherché dans les tutos avant de poser des questions ? Smiley rolleyes

EDIT: pas sûr de mon coup pour les marges négatives avec IE Mac. Il ne comprend pas les marges verticales négatives, mais je n'ai pas vérifié pour les marges horizontales négatives. Reste qu'éviter le positionnement absolu quand il n'est pas vraiment nécessaire est une bonne chose.
Modifié par mpop (18 Apr 2006 - 17:23)
Pour répondre à la remarque de mpop,
personnellement j'ignore complétement IE sur macintosh, j'ai tenté une fois de débugger pour ce navigateur sur cette plateforme, mais si c'est pour s'arracher les yeux de la tête... non merci.

Voilà mon avis.

Et qui c'est qui utilise encore ce vieux navigateur révolu que microsoft ne veut plus mettre à jour depuis 2002 ??? Hein

Bref... le débat n'est pas là, je suis d'accord que l'absolute n'est pas top et perso je n'aime pas utiliser cette option... mais quand y a pas trop le choix ben on fait avec.

Merci à tous de votre aide.
Alore a écrit :
Pour répondre à la remarque de mpop,
personnellement j'ignore complétement IE sur macintosh, j'ai tenté une fois de débugger pour ce navigateur sur cette plateforme, mais si c'est pour s'arracher les yeux de la tête... non merci.

En même temps, tu t'es préoccupé d'IE 5, dont les parts de marché sont encore plus négligeables que celles d'IE pour Mac.

Alore a écrit :
Et qui c'est qui utilise encore ce vieux navigateur révolu que microsoft ne veut plus mettre à jour depuis 2002 ??? Hein

Tu parles d'IE 6 pour PC, là ? Smiley lol

Alore a écrit :
mais quand y a pas trop le choix ben on fait avec.

Quand justement il y a le choix, et qu'on a expliqué ou indiqué ce choix, et que ce choix consiste à utiliser avec juste un petit arrangement une propriété prévue pour l'effet que l'on recherche, ça peut être bien de le prendre en compte, hein !

Pour revenir sur IE Mac, je n'y prête pas une grande attention, mais il faut savoir que tous les utilisateurs de Mac OS 9 n'ont pour ainsi dire que ce navigateur à se mettre sous la dent, et que pour les premières versions de Mac OS X (jusqu'à la relativement récente 10.4, il me semble), IE Mac est toujours présent. À la fac, sur des postes Mac en accès libre, les administrateurs ont fait l'erreur de mettre l'icone IE dans le Dock... du coup 80% des utilisateurs cliquent dessus, alors qu'elle est parfois entourée des icones de Safari, Firefox et Camino !
IE Mac est condamné à plus ou moins brève échéance. Il n'est plus livré avec les dernières versions de Mac OS, et il n'est plus disponible sur le site de Microsoft. Ce qui me fait très plaisir, d'ailleurs. Mais pendant quelques temps encore, il faudra compter avec, du moins si on prend en compte les navigateurs autres qu'IE 6 et Firefox (les moins de 2% de part de marché).

Enfin bref, l'important c'est surtout que la solution indiquée, plus "naturelle", fonctionne sans problème et offre une meilleure compatibilité avec les navigateurs. Donc on aurait tort de s'en priver, surtout qu'elle n'implique pas de connaître très précisément et à l'avance la largeur totale du bloc, ou encore qu'elle permet un design fluide avec utilisation d'une largeur maximale.
Modifié par mpop (18 Apr 2006 - 20:01)
bonjour,
je me pose la même question aussi, sur le position du conteneur (largeur fixe et centré horizontalement), en ayant suivi les gabarits de mise en page alsacreation avec:
#conteneur {
position: absolute;
width: XXpx;
left: 50%;
margin-left: -(XX/2)px;
}

mais, si je veux réduire la taille du navigateur pour optimiser mon écran (cad largeur inférieure à XXpx), la partie de gauche de la page disparait progressivement...
tandis que si on met:
#conteneur {
position: relative;
width: XXpx;
margin: 0px auto;
}

la page se cale à gauche, et la scrollbar horizontale permet toujours d'atteindre la largeur entière...

y a t-il une raison que je connais pas, pour préférer la première solution? sachant qu'on peut abandonner IE5...
fred23195 a écrit :
y a t-il une raison que je connais pas, pour préférer la première solution?

Pas que je sache.

fred23195 a écrit :
sachant qu'on peut abandonner IE5...

Obtenir la compatibilité avec IE5 ne coûte pas grand chose, pourquoi s'en priver ?