Discussion :

[EIN-LESER]

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.

[Bisûnûrs]

Tu peux utiliser la propriété CSS3 box-sizing: border-box; reconnue sur tous les navigateurs récents.

(IE à partir de la version 8)

[EIN-LESER]

J'ai testé dans le code mais cela me réduit l’élément a 1/4 de la largeur de la div.

[Candygirl]

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

[miss_socrates]

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.

[Candygirl]

En fait, il y a une différence de compréhension des margin et padding chez IE.

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é.

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 .

[Bisûnûrs]

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).

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.

Cf :
http://j-willette.developpez.com/tut...ge=page_1#LI-C

[EIN-LESER]

Bon avec le padding seul mon probleme restait le meme.

Du coup j'ai fait comme sa:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
h2{
    float:left;
    text-transform:uppercase;
    width:99%;
    background-color:#6e267b;
    color:#FFF;
    font-size:1em;
    text-align:center;
    padding:5px 0px;
    margin:10px 0 10px 0px;
    border: 5px outset #6e267b;
    border-collapse: collapse;
}

Pas idéal mais le 1% de différence est a peine visible sur un très grand écran don on fera avec lol

Merci beaucoup pour vos réponses en tout cas.

[Candygirl]

Encore une fois, pour quelle raison dois-tu faire flotter un élément alors que tu veux qu'il occuper tout l'espace à disposition ?

[EIN-LESER]

car sinon la bordure dépasse ce qui rends le visuel assez "sale"

[Candygirl]

J'avoue que je ne comprends toujours pas pourquoi ce simple code ne conviendrait pas ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
h2{
    text-transform:uppercase;
    background-color:#6e267b;
    color:#FFF;
    font-size:1em;
    text-align:center;
    padding:5px 0px;
    margin:10px 0 10px 0px;
    border: 5px outset #6e267b;
}

[EIN-LESER]

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.

[Candygirl]

Comme dit j'ai testé mais du coup la bordure sort du cadre.

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...

Mais comme on dit si bien parfois certains mystères informatiques doivent en rester.

Bien au contraire, c'est en cherchant à comprendre tous les mécanismes qu'on progresse et gagne en efficacité dans le futur

[NoSmoking]

Bonjour,

Bien au contraire, c'est en cherchant à comprendre tous les mécanismes qu'on progresse et gagne en efficacité dans le futur

sans aucune hésitation