Discussion :

[Ironboy]

Bonjour à tous,

Je débute en CSS3 et je n'ai pas compris comment centrer un élément par rapport à un autre, ceci à pour but que mon site s'adapte dynamiquement à la résolution de l'utilisateur.

J'avais trouvé une solution pour placer verticalement mes éléments mais je me suis rendu compte que c'était appliqué uniquement à ma propre résolution (J'utilisais le position:absolute et me déplaçais via top/right/left/bottom en %).

J'ai simplifié mon code pour que vous compreniez mon problème, ça représente le bandeau qui sera dans l'entête sur lequel plus tard je mettrai un menu pour choisir la langue du site et les informations si l'utilisateur est connecté, et j'ai également mis un logo et les titres que je devrais mettre à mon site.

Voici le code : http://jsfiddle.net/6x98A/9/

Comme vous pouvez le voir la solution marche (pour le bandeau), c'est à force de faire des recherches sur internet que j'ai trouvé ceci mais je ne le comprend pas à 100%.
Surtout en partie sur le vertical-align:top, c'est en bidouillant que j'ai réussi à le centrer de cette manière mais pour moi ça devrait se centrer en mettant vertical-align: middle ou central non ?

J'ai vraiment envie de comprendre pour pouvoir adapter cette solution pour tout le reste du design du site. Je suis bloqué pour centrer mes titres de manière vertical par rapport au Logo.

Je suis reparti sur des position absolute pour les titres car je n'arrive pas à les aligner, j'ai également du mal à pouvoir les déplacer de manière horizontal, c'est pour ça aussi que j'utilise le position:absolute ...

Je vous remercie de prendre de votre temps pour m'expliquer clairement et quel raisonnement à avoir pour le placement.

[Bisûnûrs]

mais pour moi ça devrait se centrer en mettant vertical-align: middle ou central non ?

Pour toi, peut-être. Pour les specs, non.
Comme il est dit dans les specs CSS, vertical-align sert à positionner deux éléments inline (ou inline-block) entre eux, et non verticalement un élément inline (ou inline-block) dans un élément block.

Il est aussi précisé que ça réagit autrement dans le contexte des tableaux HTML. En l'occurrence, vertical-align permet aussi de positionner verticalement un élément dans une cellule de tableau (ou un élément ayant des propriétés de cellule de tableau via display:table-cell).

j'ai également du mal à pouvoir les déplacer de manière horizontal, c'est pour ça aussi que j'utilise le position:absolute ...

As-tu essayé margin-left ?

[Ironboy]

Salut Bizunurs,

Merci pour ta réponse et pour t'es précisions sur le vertical-align que je n'avais effectivement pas compris.

Non je n'ai pas essayé le margin-left.

Je viens de l'essayer mais ça me donne le même résultat que le position:absolute, il suffit que je change la résolution et c'est tout décallé malheuresement .

Pour ne pas avoir ce problème de décalage il ne vaudrait mieux pas que je définisse mes déplacement en pixel ? Je pensais que c'étais mieux de travailler en % (pour que mes éléments soit dynamique) mais j'ai l'impression que non