[Résolu] remplacer précédente / suivante par image « fixed » (Créer un compte)

Bonjour,

Masquer du texte proprement sur des liens :

.previous-image,
.next-image {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Ensuite ce n’est pas très propre, mais vous pouvez ajustez les boutons avec padding sur le conteneur parent :

#image-navigation {
padding: 0 13px;
}

Jouez avec la seconde valeur pour ajuster, ou sinon « padding: 0 13px 0 13px; » vous permettra d’ajuster les deux indépendamment de l’autre.

Effectivement ! Avec le premier morceau de code nous avons supprimés le texte du lien, mais si on ne précise pas au préalable la zone qu’occupe ce lien cette dernière s’en va avec :rolleyes:

Tenez, ajoutez ceci :

#image-navigation a {
display: block;
height: 70px;
width: 50px;
}

Cela réglera ce soucis de lien.

Pour le second point vous avez raison, « position: fixed; » permet de maintenir des éléments de manière statiques même lorsque l’on scroll vers le bas de la page. Il faut néanmoins savoir que la valeur fixed, comme sa soeur absolute, sortent les éléments du flux (c’est-à-dire de l’ordre dans lequel on déclare le code, du header vers le footer).

Ainsi, il faut donc soit-même positionner les éléments concernés avec d’autres propriétés qui viennent s’ajouter à « position: fixed; » : tout d’abord « top: 00px » et deuxièmement « left: 00px; ». A vous d’ajuster à votre guise les valeurs en lieu et place des « 00 » 🙂

Je crois avoir cerné votre demande 🙂

Commencez par modifier le sélecteur qui suit (environ ligne 79) :

.site-content article {
padding-left: 24px;
}

en

article .entry-content {
padding-left: 24px;
}

Afin d’éviter un décalage qui se produira avec le code nous concernant :

.site-content nav {
position: fixed;
width: 960px;
top: 50%;
}

Ainsi, nos deux boutons resteront à 50% de la hauteur de la page. Vous pouvez ajuster soit en pourcentage, soit en pixel comme précédemment.