28172 sujets

CSS et mise en forme, CSS3

CSS- Margin-top pour un display: inline-block

Bonjour à tous,

Je rencontre un petit problème. J'ai créé un bloc via Magento contenant 3 photos de réseaux sociaux.
Je souhaite que les logos soient l'un à côté de l'autre et pour se faire j'ai utilisé display: inline-block;
J'ai bien mes trois images l'une à côté de l'autre mais la place du bloc par défaut ne me va pas.
Avec un float:right il est exactement là où je voudrais qu'il soit mais pas en hauteur; je voudrais que le bloc soit à -50px du lieu où il se trouve. Lorsque je fais ça, les images sont bien là où il faut sauf qu'elles sont désormais l'une dernière l'autre, autrement dit on en voit plus qu'une seule. Du coup j'ai remplacé mon display: inline-block; qui ne prend pas les marges négatives par display: table; et aucun changement!

Si quelqu'un peut m'aider...je prends Smiley smile voici mon css:
.reseau {
margin-top:-50px;
display: table;
float:right;
margin-right:8px;
width:25px;
Bonjour,
pas très simple de s'imaginer votre problème sans avoir un schéma de ce que vous voudriez obtenir
et le code html et CSS de la page..
Modifié par Hermann (02 Mar 2015 - 11:40)
Voici ce que je souhaiterais faire: upload/57947-interface.jpg

Les logos sont alignés avec les cadres des petites images.

Par défaut mes logos se placent sous le bloc des petites images produit :
upload/57947-interface2.jpg

Dès que j'entre mon code css ci-dessous les logos des réseaux sociaux ne sont plus l'un à côté de l'autre mais l'un derrière l'autre, voila pourquoi on n'en voit qu'un seul. upload/57947-interface3.jpg

Le css de mon bloc des réseaux sociaux :
.reseau {
margin-top:-50px;
display: table;
float:right;
margin-right:8px;
width:25px;

Je ne peux malheureusement pas vous donner plus d'infos puisque sous Magento il n'y a pas un seul fichier HTML pour la page mais énormément... Smiley sweatdrop
Bonjour,
d'accord c'est déjà plus clair. Mieux vaut éviter des positionnement à base de marge négatif, c'est un peu bancale comme méthode (bien qu'on ait pas toujours le choix).
Comme le vertical-align ne s'appliquent pas aux boites de bloc (comme les éléments flottants, ou en display table qui génèrent un retour chariot avant et après l'élément), il vaut mieux dans ce cas de figure passer par un positionnement à base de table-cell (compatible IE8+), cela permet de bénéficier du vertical align (à appliquer sur les blocs en table-cell).

> Mettre le bloc conteneur en display:table + width: 100%
> Mettre les 2 blocs enfants (vignettes + social icons) en table-cell.
> Ajouter un text-align:right + le vertical-align sur le bloc des icons.
Modifié par Hermann (04 Mar 2015 - 13:57)
Sans ton html (structure) et l'ensemble du css pour cette structure, difficile de t'orienter.

Il y a bien flex qui facilite bien les choses http://codepen.io/gc-nomade/pen/ogMqmL qui peut être aussi réaliser avec du inline-block , voir du display:table. Tout dépend de ta structure et des navigateur visé pour choisir une methode.

Tu peut retrouver ta structure dans le source de la page afficher dans ton navigateur (menu contextuel par exemple Smiley smile )
Sujet clos
Aller à