Inline-block et Width

Bonjour à tous,

Je suis confronté à un (petit) problème. Je m'explique :

Je réalise un site web pour une entreprise et entre autres, je réalise une barre de menu latérale.
Cette dernière est donc un bloc, dans laquelle sont contenus 3 autres blocs qui constituent mes 3 liens pour la redirection vers les autres pages.

Mon problème : j'aimerais que mes 3 blocs soient de taille égale, et de façon à remplir entièrement le bloc parent.

J'ai joué avec les longueur en px mais évidemment c'était trop beau pour que les tailles soient identiques :cry:
Et le pourcentage ne m'aide pas plus ( 33,333333...% :aie: )

Quelqu'un aurait la solution de ce problème, ou saurait-t'il si elle existe ?

Merci pour vos réponses !

tu enlèves la width de ta div global et tu mets la même taille à tes liens

Je n'ai pas mis de width à ma div globale (elle fait ainsi la largeur de la page).
Du coup mes 3 blocs ne font que la taille du texte à l'interieur :(

Je me suis peut être mal expliqué...
Mes 3 blocs sont des inline-block, donc ils sont les uns à côté des autres dans ma div globale.

pourquoi ne pas mettre un padding de 2px à ta div global et faire trois div de 32% ?

Ma foi, c'est une bonne idée !
J'étais tellement concentré sur mon problème que n'y avais pas pensé...

Je te remercie :)

Bonjour,

Citation:

---

Envoyé par raydenprod

pourquoi ne pas mettre un padding de 2px à ta div global et faire trois div de 32% ?

---

je dois admettre que la logique m'échappe

(3 * 32%) +(2 * 2px) ?= 100%

Citation:

---

Envoyé par Thunderburst

Mes 3 blocs sont des inline-block

---

Il te faut donc tenir compte des whiteSpace.

Oui je me suis un peu précipité, mais en ayant voulu mettre cela en application, je me suis rendu compte que ça n'allait pas.

J'ai effectivement tenu compte des whitespaces et les ai retiré :)

En revanche, mes blocs sont séparés par des bordures...
Hélas même si je me dis que je ferais mieux d'abandonner mon idée de 3 blocs de taille identique en en mettant un à 34%, les bordures viennent fausser le résultat...
Pourtant je ne pense pas être le seul à avoir essayé de faire un menu horizontal avec des blocs de taille identique ET avec des bordures pour les séparer... :(

De plus, j'ai un autre problème :
J'ai un deuxième menu, disons "classique", c'est à dire en longueur sur la gauche de ma page avec une largeur en % et sur sa droite une <div>
(ou plutôt <article>) représentant le contenu de ma page.
Ici c'est un peu le même problème, si j'essaie de régler la largeur de ce bloc en % le résultat n'est pas exact non plus... J'aurais souhaité que sa largeur soit variable, c'est à dire qu'elle complète la largeur du bloc parent...
J'ai essayé avec un "min-width: inherit;" et des choses du genre mais impossible de corriger ce problème également.

Pourtant je pense que les 2 choses que je tente de faire n'ont rien d'extraordinaire pour la conception d'un site, mais là j'avoue que je ne sait plus du tout comment m'y prendre...

En tout cas merci pour vos réponses :)

Citation:

---

les bordures viennent fausser le résultat...

---

effectivement elles se rajoutent à la largeur de chaque élément.
:fleche: Utiliser le modèle des boites CSS

Box-sizing, hein... Je ne connaissais pas du tout cette propriété !
En 2 temps 3 mouvements, elle a résolu mon second problème ! :D
Je devrais également pouvoir m'en sortir avec mon premier problème grâce à cette propriété !

Merci beaucoup :ccool: