Geoproject
Wiki des utilisateurs

Une image sur deux pages

Je vous propose de découvrir comment j’ai procédé pour mettre une image à cheval sur deux pages (pages 18-19). Voici le résultat final suivi des instructions à mettre dans le CSS de votre template. Vous pouvez visionner le test de la mise en page ici : https://geoproject.fr/portugal/projects/le-nord/?paged=yes

Pour faire glisser l’image vers la droite sur la page 18, j’ai mis une marge de 80 pixels en haut (margin-top : 80px !important ;) et une marge de 235 pixels à gauche (margin-left : 235.5px ;). La taille de la photo est de 323 pixels de large (height : 323px !important ;).

img#el-img-14 {
margin-top : 80px !important ;
margin-left : 235.5px ;
height : 323px !important ;
}

 

 

 

 

 

 

Ensuite, j’ai ajouté sur la page 19(@page:nth(19) ) la même image grâce à son lien URL (content : url(“https://live.staticflickr.com/65535/51543260444_2f1b675471_b.jpg”) ; ). Je l’ai positionnée de manière à ce qu’elle coïncide avec l’image précédente (margin-top : -54.5px ; ). Je l’ai dimensionné de manière à ce qu’elle prolonge l’image d’en face (transform : scaleX(50 %) scaleY(47.297 %) translateX(-610px) translateY(-0.3px) ; ).

@page:nth(19) {
@left-middle {
margin-top : -54.5px ;
transform : scaleX(50 %) scaleY(47.297 %) translateX(-610px) translateY(-0.3px) ;
content : url(“https://live.staticflickr.com/65535/51543260444_2f1b675471_b.jpg”) ;
}