Tweet
Re : Problème responsive design joomspirit76
Tout dépend de la marge intérieure que vous acceptez d'accorder à .moduletablehorizontal.menu .nav > li > a.
Supposons que vous vouliez que la limite inférieure du @media soit de 1024 px. Dans ce cas, il vous faut écrire :
.moduletablehorizontal.menu .nav > li > a {
Explication :
Dans la configuration actuelle, les liens associés au fanions ont en effet une marge intérieure latérale de 15 px : padding: 10px 15px. Mais c'est manifestement trop pour les écrans de 1024 px. En effet, la largeur actuelle de chaque fanion est de 27 px + (2 x 15 px) = 57 px, mais aussi chacun a une marge extérieure gauche de 2 px, donc le total réellement occupé par chaque fanion est de 57 + 2 = 59 px, ce qui donne, pour les 18 fanions : 18 x 59 = 1062 px donc bien plus que la largeur d'un écran de 1024 px, surtout compte tenu des marges internes de la page : ~ 41 px. => Faites le compte : nous disposons d'environ 1024 – 41 = 983 px, ce qui est nettement moins que 1062 px. D'où la solution de diminuer la marge interne de chacun des fanions : 12 px au lieu de 15 px. Avec cette nouvelle valeur de 12 px, il est possible de conserver votre @media à 1024 px, chaque fanion occupant alors non plus 27 px + (2 x 15 px), mais 27 px + (2 x 12 px) = 51 px + les 2 px de marge externe gauche. Vous aurez fait vous-même le calcul (si si
: 51 x 18 + (2 x 18) = 954 px, ce qui est moins que 983 px, et donc cette fois ça rentre sans problème 
. Avec une marge intérieure latérale de 13 px, ça ne rentrerait pas, car nous aurions alors 27 px + (2 x 13 px) = 53 px + les 2 px de marge externe gauche = 55 px. Or 55 x 18 = 990 px, donc trop pour une largeur disponible de 983 px.
Si vous voulez centrer l'ensemble en largeur, il vous faut ajouter display: table; à .moduletablehorizontal.menu, donc avoir :
.moduletablehorizontal.menu
Envoyé par alva75
Voir le message
Supposons que vous vouliez que la limite inférieure du @media soit de 1024 px. Dans ce cas, il vous faut écrire :
.moduletablehorizontal.menu .nav > li > a {
padding: 10px 12px;
}Explication :
Dans la configuration actuelle, les liens associés au fanions ont en effet une marge intérieure latérale de 15 px : padding: 10px 15px. Mais c'est manifestement trop pour les écrans de 1024 px. En effet, la largeur actuelle de chaque fanion est de 27 px + (2 x 15 px) = 57 px, mais aussi chacun a une marge extérieure gauche de 2 px, donc le total réellement occupé par chaque fanion est de 57 + 2 = 59 px, ce qui donne, pour les 18 fanions : 18 x 59 = 1062 px donc bien plus que la largeur d'un écran de 1024 px, surtout compte tenu des marges internes de la page : ~ 41 px. => Faites le compte : nous disposons d'environ 1024 – 41 = 983 px, ce qui est nettement moins que 1062 px. D'où la solution de diminuer la marge interne de chacun des fanions : 12 px au lieu de 15 px. Avec cette nouvelle valeur de 12 px, il est possible de conserver votre @media à 1024 px, chaque fanion occupant alors non plus 27 px + (2 x 15 px), mais 27 px + (2 x 12 px) = 51 px + les 2 px de marge externe gauche. Vous aurez fait vous-même le calcul (si si
: 51 x 18 + (2 x 18) = 954 px, ce qui est moins que 983 px, et donc cette fois ça rentre sans problème . Avec une marge intérieure latérale de 13 px, ça ne rentrerait pas, car nous aurions alors 27 px + (2 x 13 px) = 53 px + les 2 px de marge externe gauche = 55 px. Or 55 x 18 = 990 px, donc trop pour une largeur disponible de 983 px.Si vous voulez centrer l'ensemble en largeur, il vous faut ajouter display: table; à .moduletablehorizontal.menu, donc avoir :
.moduletablehorizontal.menu
display: table;
margin: 0 auto;
}
margin: 0 auto;
Commentaire