Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • PHP5 avancé
  • Memento MySQL
  • Memento CSS 3
  • WordPress 3 100% pratique
  • Memento HTML5
Auteur
Docxell
#
79 Posts
Bien le bonjour!

Voilà, j'ai une simple div, centrée à l'aide de margin right et left auto.

Mais biensur, lorsque que l'on diminue la taille d'affichage, une fois que l'image est arrivée à sont margin-left minimum (donc à l'extrême gauche), le centrage s'arrête, et donc l'image se calle sur la gauche.

Y aurait t'il y moyen de centrer autrement ? Afin que le centrage se fasse par rapport au centre de l'image et non à son point de registration? Ou changer le point de registration?
J'ai un logique dérivée de AS3 qui me dicte:

left: (body.width/2)-(image.width/2);

Ce qui n'est malheureusement pas une syntaxe css Smiley smile

Vous auriez une idée? (En espérant m'être fait compris ^^)
Modifié par Docxell (09 Mar 2012 - 13:30)

^
Victor BRITO
#
Ne m'enterrez pas encore
2952 Posts
Salut,

Un passage par les tutoriels te montrera celui sur la gestion des débordements en CSS, en l'occurrence le débordement de ton image. Explore la piste de la propriété max-width.

Autre solution : centrer l'image elle-même.

En campagne contre la balkanisation du Web, pour rappeler qu'il existe un seul Web
Les frameworks CSS et les plug-ins jQuery ne sont pas les solutions

^
Docxell
#
79 Posts
Center l'image elle même ? Que veux tu dire ?

^
Victor BRITO
#
Ne m'enterrez pas encore
2952 Posts
Docxell a écrit :
Center l'image elle même ? Que veux tu dire ?

Centrer l'image de la même façon qu'on peut centrer un élément de bloc.

En campagne contre la balkanisation du Web, pour rappeler qu'il existe un seul Web
Les frameworks CSS et les plug-ins jQuery ne sont pas les solutions

^
Docxell
#
79 Posts
Tu veux dire en <img src=""> et ensuite centrer avec un text-align ?

^
Victor BRITO
#
Ne m'enterrez pas encore
2952 Posts
Docxell a écrit :
Tu veux dire en <img src=""> et ensuite centrer avec un text-align ?

Pas avec text-align (cela ne marchera pas), mais avec des marges automatiques accompagnées d'un display: block.

En campagne contre la balkanisation du Web, pour rappeler qu'il existe un seul Web
Les frameworks CSS et les plug-ins jQuery ne sont pas les solutions

^
Docxell
#
79 Posts
Une div n'est pas par défaut un élément block ?

En tout cas je fonctionne déjà avec les margin auto, et comme je disais, une fois la marge de gauche à zéro, l'élément arrête de se center..

^
Victor BRITO
#
Ne m'enterrez pas encore
2952 Posts
Là, je n'ai pas parlé de l'élément div, mais de l'élément img (qui, par nature, est de type en ligne remplacé).

En campagne contre la balkanisation du Web, pour rappeler qu'il existe un seul Web
Les frameworks CSS et les plug-ins jQuery ne sont pas les solutions

^
Docxell
#
79 Posts
J'ai résolu le problème de cette façon:

J'ai placé ma div à la moitié de ma page (top:50%;)
Vu que le point de registration d'une div est par défaut au dessus à gauche, elle s'affiche à présent dans la deuxième moitié de ma page.

Il suffit alors de lui dire de se décaler vers la gauche de la moitié de la valeur de sa largeur.
L'astuce est d'utiliser le margin. (margin-left:-valeur_de_mon_width_divisé_en_deux;)

Il est dommage que css ne gère pas les calculs du type: top: 50%-(width/2);

^