28172 sujets

CSS et mise en forme, CSS3

Bonjour,

En appliquant la règle "cible / contexte = résultat", quel contexte dois-je utiliser sur une div de 940px (88.125% pour le responsive en me basant sur les 960px à 90%) sur laquelle il y a un padding-left et padding-right de 10px comme dans le code ci-joint:

#main_wrapper{
    width: 88.125%; /* 940px en pourcentage */
    margin: 36px auto;
    padding: 0 10px; /* mettre en pourcentage le padding de 10 px */
}


Le contexte est 940px ou 960px (940px + les 20px de padding)?

Merci.
Modifié par suitome (25 Aug 2013 - 19:27)
Je vais me répondre. Je pense avoir trouver la réponse.

En fait je partais sur une mauvaise base CSS:

CSS erroné:

#main_wrapper{
    width: 88.125%; /* 940px en pourcentage */
    margin: 36px auto;
    padding: 0 10px; /* mettre en pourcentage le padding de 10 px */
}


CSS corrigé avec les pourcentages:

#main_wrapper{
    width: 90%; /* 960px en pourcentage */
    margin: 36px auto;
    padding: 0 1.04166666666667%; /* 10 px / 960px */
}


Il fallait que je parte sur une largeur de 960px (90%) et que j'applique un padding de 10px en pourcentage sur le contexte c'est-à-dire les 960px.

cible / contexte = résultat => 10px / 960px = 0,0104166666666667 x 100 = 1.04166666666667%.

Si je me suis trompé, je veux bien une réponse.

merci.
Saloute,
J'ai strictement rien compris à ta règle mais si ça peut aider :

Width : 940px
padding : 0 10px;

Largeur total du bloc : 960px;

Les paddings + border sont à ajouter dans le width, seul les margins ne comptent pas.