feuille de style externe

[klaviebel]

Bon, je sais que je ne suis pas une référence et que de drôles de choses se passent parfois dans mes pages, mais j'ai essayé rigoureusement (si si ) les deux pour voir...
Et bien je vote pour la formule de Mongo Bob: seule formule qui m'a laissé mes tableaux centrés sous IE et Mozilla.

Et ça donne:

Code : Tout sélectionner

body
{
	background-color: rgb(255, 204, 0); 
	width: 100%; /*pour s'adapter à tous les écrans*/
	margin: auto; /* Pour centrer ma page */
	color: black; /*pour que la couleur de tout le document soit noire, sauf précision*/
}

#page
{
	background-color: rgb(255, 204, 255);
	font-family: Georgia;
	width: 80%;/*obligatoire pour que margin: auto fonctionne*/
	margin: auto;/* pour que le block soit centré */
	margin-top: 10%;/*pour qu'il y ai une marge orange au dessus*/
	margin-bottom: 7%;/*idem mais en dessous; sauf sous IE*/
	position: Non défini; /*pour que le positionnement du bloc*/ 
	top: 13%; /*donnée nécessaire pour que la position fonctionne*/
	left: 13%;
}

Bon, mais moi ce qui m'étonnes le plus, c'est pourquoi cette valeur "Non défini" marche; je m'explique: c'est en français... hum étrange.... et avec un accent .... et de surcroît sous IE (Ooooohhhh miracle!!!)



Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[chinon37]

Pourquoi ce left:13%?
si on redimensionne l'écran, la page n'est plus centrée puisqu'elle doit être décalée de 13 % !!
exemple par l'image:
l'écran redimensionné avec ton code:



la même dimension d'écran avec mon code:


Pourquoi faire simple quand on peut faire compliqué?

mon code se contente de ça:

Code : Tout sélectionner

body {
  background-color: #ffcc00;
  width: 100%;
  color: black;
  padding-top: 13%;
}#page {
  margin: auto;
  background-color: #ffccff;
  font-family: Georgia;
  width: 780px;
  position: relative;

[Mongo Bob]

Ni "top" ni "left" ne devrait fonctionner en non défini : ce sont des décalages pour positions relative ou absolute.
Mon code se contente de encore + simple :

Code : Tout sélectionner

body {
  background-color: #ffcc00;
  width: 100%;
  color: black;
  padding-top: 13%;
}#page {
  margin: auto;
  background-color: #ffccff;
  font-family: Georgia;
  width: 70%;
 

"relative" n'est pas justifié, chinon37, tout en non défini, margin g et d auto, pas de décalage top ou left ou autre qui ne marchent qu'en relative ou absolu!
Arbitre, svp!
A+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[chinon37]

Oui, tu as raison pour la position relative. J'anticipe seulement pour le cas ou notre charmante amie envisagerait de "complexifier*" sa page et de mattre des trucs exotiques dedans avec un positionnement!

Donc nos postitions commencent à se rejoindre: peut-être pourrions-nous envisager une coalition... (oupsss, mais non, je l'ai pas dit )

* je ne pensais pas que "complexifier" était français pas de soulignement du correcteur! en tout cas, dans mon Larousse de 1968, ça n'existait pas encore

[Ymai]

Donc nos postitions commencent à se rejoindre: peut-être pourrions-nous envisager une coalition... (oupsss, mais non, je l'ai pas dit )

Quelle bravitude!

Moi, je peux...

[Mongo Bob]

<edit>

Bon, mais moi ce qui m'étonnes le plus, c'est pourquoi cette valeur "Non défini" marche;

"Non défini" signifie qu'on ne contrarie pas le flux naturel html en forçant tel ou tel élément à aller contre.
Si tout est en Non défini" dans une page, tous les éléments ont tendance à filer vers le haut et vers la gauche, les blocs (<div>, <p>, <h1> etc...) les uns sous les autres, les "en ligne" (<img>, <a>, tout ce qui est texte et blablabla etc...) côte à côte.
</edit>


Au départ d'une page, il faut toujours tenter le non défini en 1er, avoir le moins de propriétés css possible, pour ne pas avoir de css superflu et avoir la feuille de style la + légère possible.
Mais le positionnement en-dehors du flux reste indispensable, souvent.

chinon37 : selon mon Robert historique, "complexifier" date de 1951, et en plus, ils font même de la linguistique chez Gecko .

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

merci de vos réponses je m'en vais regarder ça.... demain

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[klaviebel]

voilà, j'ai donc fait les modifications. Effectivement ça marche, sous IE et sous Firefox

Pourquoi ce left:13%?

parce que sous IE, ça se collait sur la gauche. A partir du moment où j'avais mis ce "left" c'était bon. Mais le problème c'est que j'ai un PC portable, et donc, comme mon écran n'est pas forcément très grand, c'est vrai que ça relativise tout.... et chez moi ça apparaissait comme centré.

Pourquoi faire simple quand on peut faire compliqué?

euuuhhhh parce que je m'appelle klaviebel

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3