28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement problème sous safari

Bonjour,
Je cherche un moyen de faire l'affichage suivant.
Aligner et center 3 logos dont 1 est coupé en 2 donc j'ai 4 images en tout
J'y arrive sur tous les navigateurs sauf safari.
Avec safari le logo 1 haut ne s'empile pas sur le bas et sort complètement du bloc.

Voici mon code :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ma page de démo</title>
<style>
body { text-align:center; }
ul { text-align:center; }
li { display:inline; text-align:center; }
</style>
</head>
<body>
<ul>
<li><a href="#" target="_blank" title="logo 1 haut"><img src="logo1_haut.png" style="position:absolute;" /></a><a href="#" target="_blank" title="logo 1 bas"><img src="logo1_bas.png" /></a></li>
<li><a href="#" target="_blank" title="logo 2"><img src="logo2.png" /></a></li>
<li><a href="#" target="_blank" title="logo 3"><img src="logo3.png" /></a></li>
</ul>
</body>
</html>


Si vous avez une idée pour que ça passe sous safari je suis preneur Smiley smile
Modifié par zepim (18 Dec 2017 - 16:55)
Modérateur
Bonjour,

Ca marche en l'état sur mon safari (Mac OS + safari 11).

Ceci étant, j'aurais mis un "position:relative" sur les "li", et j'aurais mis le "position:absolute" de la première image sur son parent (la balise "a" qui l'entoure).
body { text-align:center; }
ul { text-align:center; }
li { display:inline; text-align:center; position:relative;}
li:first-of-type a:first-of-type { position:absolute; }

Amicalement,
Modifié par parsimonhi (18 Dec 2017 - 17:27)
Modérateur
Bonjour,

Le mélange li { display:inline; } avec li:first-of-type a:first-of-type { position:absolute; } me chagrine. Voici une solution qui me semble plus propre :
body { text-align:center; }
ul { display:inline-block; margin:0; padding:0; }
li { display:inline-block; margin:0; padding:0; }
li a, li a img { display:block; }

Et une autre avec du flex :
body { margin:0; padding:0; }
ul { display:flex; flex-direction:row; justify-content:center; margin:0; padding:0; }
li { display:flex; flex-direction:column; margin:0; padding:0; }
li a, li a img { display:block; }

Amicalement,
Merci parsimonhi, c'est nickel !
Peux-tu m'expliquer brièvement ce qu'apporte ton code par rapport au mien ? (que je comprenne Smiley smile )

STP MERCI
Modérateur
Bonjour,

Je n'aime pas trop les "display:inline" quand on essaie de positionner des contenus les uns par rapport aux autres : ce n'est pas pratique, y a des espaces qui apparaissent ici et là (on peut s'arranger pour les supprimer, mais ce n'est pas toujours trivial), on maitrise mal les dimensions des contenus, et les alignements verticaux sont pénibles à obtenir.

Après, dans ton exemple, on peut se passer du "position:absolute;" en passant les balises "a" et "img" en "display:block;", ce qui implique de passer les balises qui les contiennent en autre chose que "display:inline;". C'est assez simple à faire ici : on aurait tort de s'en priver.

Enfin, la solution avec le flex, outre le fait qu'elle me semble appropriée dans la mesure où on cherche à aligner des images à la fois horizontalement et verticalement, a ici l'avantage de pouvoir supprimer tout espace indésirable entre les éléments facilement, que ce soit horizontalement ou verticalement.

Amicalement,
Modérateur
Bonjour,

J'ai oublié de signaler un point important. Pour qu'un élément en "position:absolute" s'affiche comme attendu, il faut que l'élément contenant par rapport auquel on veut le positionner ait lui aussi un positionnement, c'est à dire au minimum un "position:relative". Sinon, le positionnement se fera par rapport à un autre élément (le premier élément contenant qu'on trouve ayant un positionnement) ou le coin de la fenêtre si aucun élément contenant n'a de positionnement. Et par conséquent, le résultat pourrait surprendre.

C'est pourquoi dans ma toute première solution (celle avec les "position:absolute" et "position:relative"), j'avais rajouté des "position:relative" aux balises "li".

Amicalement,
Meilleure solution
Sujet clos
Aller à