Version imprimable
Bonjour a tous.
Voila une petite question.
J'ai des éléments qui sont censé prendre 100% de la largeur de la dive dans la quelle ils sont placés.
Tout fonctionnait bien jusqu’à ce que j'ajoute un peux de décoration (bordures en 3d entre autre).
Mais du coup mes éléments dépassent légèrement de la div.
Sauriez vous me dire si il existe un moyen de régler le width sur 100% mais en enlevant le nombre de px correspondant chez moi aux bordures.
Merci d'avance.
Tu peux utiliser la propriété CSS3 box-sizing: border-box; reconnue sur tous les navigateurs récents.
(IE à partir de la version 8)
J'ai testé dans le code mais cela me réduit l’élément a 1/4 de la largeur de la div. :calim2:
Bonjour,
Un petit padding de 5px sur le parent ne pourrait-il pas faire l'affaire ?
Logiquement, si c'est un width de 100% alors il n'a pas de raison de flotter donc un simple margin sur l'élément, sans spécifier de width devrait convenir ( et il prendra la place à disposition dans son parent).
S'il est positionné en absolut, c'est alors facile en jouant avec la définition conjuguée des 2 dimensions left et right ou/et top et bottom
En fait, il y a une différence de compréhension des margin et padding chez IE.
Chez Firefox, la largeur inclut les margin et padding tandis que IE ajoute ces px de padding et margin à la largeur donnée ce qui explique que "ça dépasse" avec IE (je pense que c'est le seul navigateur comme ça).
Une possibilité serait donc d'inclure la div de 100% dans une autre div un peu plus grande. Donc on aurait par ex. la div1 (parent) à 900px et la div2 inclue, celle qui est à 100 %.
Donc sur tous les navigateurs, la largeur de la div2 sera de 100% càd 900 px et sur IE elle sera de 100% + les 5px de margin (+ le padding éventuel) ce qui fera 905px.
Ceci n'est valable que sur IE en mode Quirks, soit les versions inférieures à IE5mac ou plus récentes mais sans doctype déclaré.Citation:
Envoyé par miss_socrates
Sur toutes les versions plus récentes, la déclaration d'un docytpe complet, tout en haut du document, indique au navigateur qu'il doit interpréter la page en mode (presque) standard et donc adopter le modèle de boîte standard .
Et c'est l'inverse .. C'est le modèle de boite Microsoft qui inclut le padding et les border dans la largeur width (ou la très récente propriété/valeur CSS3 box-sizing:border-box;), alors que le modèle de boite défini par le W3C les exclut.Citation:
Envoyé par miss_socrates
Cf :
http://j-willette.developpez.com/tut...ge=page_1#LI-C
Bon avec le padding seul mon probleme restait le meme.
Du coup j'ai fait comme sa:
Pas idéal mais le 1% de différence est a peine visible sur un très grand écran don on fera avec lolCode:
2
3
4
5
6
7
8
9
10
11
12
13
Merci beaucoup pour vos réponses en tout cas. :ccool:
Encore une fois, pour quelle raison dois-tu faire flotter un élément alors que tu veux qu'il occuper tout l'espace à disposition ? :koi:
car sinon la bordure dépasse ce qui rends le visuel assez "sale"
J'avoue que je ne comprends toujours pas pourquoi ce simple code ne conviendrait pas ?
Code:
2
3
4
5
6
7
8
9
10
Comme dit j'ai testé mais du coup la bordure sort du cadre.
Mais comme on dit si bien parfois certains mystères informatiques doivent en rester. :mouarf:
Il n'y a pas de raison que cela déborde. Tu es sûr que tu n'avais pas laissé traîner un width de 100% ? Ou alors tu n'as pas donné tous les paramètres de ton problème...Citation:
Envoyé par EIN-LESER
Bien au contraire, c'est en cherchant à comprendre tous les mécanismes qu'on progresse et gagne en efficacité dans le futur ;)Citation:
Envoyé par EIN-LESER
Bonjour,sans aucune hésitation :plusser:Citation:
Envoyé par Candygirl