Salut à tous, voilà je rencontre un problème auquel je n'ai jamais été confronté puisque je travaillais jusque la sur des designs à largeur fixe.
Mon soucis est que je voudrais faire une div de 100% et lui ajouter une bordure, mettons, pour l'exemple et pour que ce soit plus flagrant de 10px.
Une fois cette bordure créée, ma div entière se retrouve décalée de 20px à droite.
Est-ce que quelqu'un aurait une solution pour y remédier? D'avance merci. :)
Il faut utiliser le CSS3 la propriété est accepter a partir de IE8 et sur tout les autre navigateur depuis un bon moment.
C'est box-sizing: border-box; qui par défaut à la valeur content-box;
Si tu veut plus d'info look ici ==> Lien
Cordialement,
ilectr0n
Une technique plus appropriée consisterait à élargir ton bloc plutôt que de lui donner une largeur à 100% qui, comme tu l'as vu, pose problème dès que tu souhaites toucher aux marges, padding ou bordure.
div {
left: 0;
right: 0;
position: relative;
}Re;
Alors, j'ai essayé de bidouiller mon code et j'ai trouvé ça :
width: 100% -1px;Miraculeusement, ça marche ! Ne me demandez pas pourquoi...
Je doute par contre de la compatibilité avec tous les navigateurs, Chrome, Firefox 5, Opéra, Opéra mobile, Safari Mobile, Natif Gingerbread ça fonctionne, je n'ai pu tester qu'avec ces navigateurs la. Le seul navigateur que j'ai testé et sur lequel ça ne fonctionne pas c'est le navigateur natif Honeycomb.
Bon pour le moment je reste comme ça mais si des fois vous avez une vraie solution je suis toute ouïe.
Bonne continuation. :)
Je crois que IE ne sait pas l’interpréter ce code (je ne m'avance pas trop en disant ça). De plus, il n'est pas valide au niveau des recommandations W3C. J'étais dans le même cas que toi et n'ayant pas trouvé de solution je me suis rabattu sur un design fixe c'est quand même malheureux.
Pas très encourageant ce que tu me dis la :p
Merci quand même d'avoir pris la peine de répondre.
Je vais quand même essayer de bidouiller encore, je post si j'ai du nouveau. ++ :)
Si tu trouve une solution je reste preneur. Courage !