Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Utilisé à ce jour dans 1547 sites
logo article ou rubrique
test images pleine page
Article mis en ligne le 10 août 2018

par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

Test avec 3 images en pleine page et un texte assez long pour avoir un retour de ligne, histoire de tester les images.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Forum
Répondre à cet article
Pour une vraie "pleine-Page" test ...
Jaseur Boréal - le 30 août 2018

En fait, cette "Pleine" page" n’en est pas une vraie, puisque les images sont limitées par l’affichage dans le frame de l’article et qu’il existe des bandes d’image de fond sur les cotés ...
:-)

test images pleine page
Jean Christophe Villeneuve - le 30 août 2018

C’est parce que j’ai choisi une mise en page de 1200 px de large, plus adapté au contenu du site à mon avis.

Réglages des textes avec les images en pleine largeur des articles pleine-page
Jaseur Boréal - le 30 août 2018

J’ai appliqué ces réglages dans perso.css pour ajouter une marge seulement aux paragraphes des textes et aux sous-titres h1, h2, h3, ... pour les articles en "pleine-page" :

.page-article-pleinepage #texte-article {
   text-align: left;
   margin-right: 0%;
   margin-left: 0%;
}

.page-article-pleinepage #texte-article h1, h2, h3, h4{
   text-align: left;
   margin-right: 3%;
   margin-left: 3%;
}

.page-article-pleinepage #texte-article  p{
   margin-right: 3%;
   margin-left: 3%;
   font-size: 1.8rem;
   line-height: 150%;
}

L’exemple test est ici : https://www.lettonie-francija.fr/1174

test images pleine page
Jean Christophe Villeneuve - le 30 août 2018

Hello

A mon avis, les text-align : left sont inutiles.

Et je rajouterais un

ul.portfolio_ligne li {
   list-style: none;
}

pour virer les points disgracieux devant le descriptif des photos

Sinon, ça rend bien !

Animer certaines lignes de textes en pleine-page
Jaseur Boréal - le 30 août 2018

J’ai essayé d’animer certaines lignes de textes avec les formules ci-dessous , à régler selon tests et souhaits ....

75% {
   font-size: 300%;
   margin-left: 25%;
   width: 150%;
   line-height: 300%;
}

h1, h2, h3, h4 {
 animation-duration: 3s;
 animation-name: slidein;
 animation-iteration-count: infinite;
}

@keyframes slidein {
 from {
   margin-left: 100%;
   width: 300%;
 }

 75% {
   font-size: 300%;
   margin-left: 25%;
   width: 150%;
 }

 to {
   margin-left: 0%;
   width: 100%;     }
}  

Tester pour affinet les réglages .... ;-))

Plan du site Contact Mentions légales Espace rédacteurs squelette RSS

2009-2018 © Escal V4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.1.10