Comment centrer un div flottant

mohamed_bn

15 Nov 2016 à 12:52

Bonjour,

J'ai un site web mis en ligne: http://oasis-des-sciences.tn/

J'aime bien centrer le banner publicitaire du header verticalement comme le montre l'image suivante :
https://goo.gl/tTNBkN
sans causer du problème dans la version responsive (v mobile du site). C'est à dire, la modification que je souhaite appliquer ne doit affecter que la version PC du site.

Pouvez vous m'assister comment procéder?

Zelena

15 Nov 2016 à 15:43

Bonjour.

Avec le positionnement Flexbox, c'est assez simple.
Mais là avec le positionnement float, je suis assez perplexe... Il faudrait que l'élément en float à gauche ait la même hauteur que l'élément en float à droite... quitte à rajouter du vide.

Il y a d'autres modes de positionnements qui causent moins de soucis (flexbox, inline-block, table...)

Smiley smile

aliasdmc

13 Dec 2016 à 19:57

Bonjour,

Voici une piste qui devrait marcher, pas forcement très beau mais je pense que cela devrais marcher
:
- positionner ta bannière de pub avec des marges top, left,
- mettre les marges dans une media query qui dirait : appliquer si la taille de l'écran est supérieur à 990px (taille à la quelle ta bannière passe sous le logo)

@media only screen and ( min-width: 991px ){
/* Je suis pas sûr de l'écriture de la media query je te laisse voir avec des personnes plus compétentes */
 #mabanniere{
    margin-left: 15px; /* taille au hasard, à toi de mettre les bonnes valeurs */
    margin-top: 50px; /* taille au hasard */
 }
}

CSS et mise en forme, CSS3

Comment centrer un div flottant