Page 3 sur 3
Publié : 04 mai 2007, 21:16
par 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
Publié : 05 mai 2007, 08:35
par 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;
Publié : 05 mai 2007, 10:53
par 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
Publié : 05 mai 2007, 11:35
par 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
Publié : 05 mai 2007, 11:45
par Ymai
chinon37 a écrit :
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...
Publié : 05 mai 2007, 11:46
par Mongo Bob
<edit>
klaviebel a écrit :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
Publié : 08 mai 2007, 23:04
par klaviebel
Publié : 09 mai 2007, 09:23
par 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