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.

Forum de l’article

test images pleine page

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Rappel de la discussion
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 .... ;-))

Derniers commentaires

test lien 3
un texte et un lien https://escaliens.spipfactory.fr/

test 2 avec lien
un texte et un lien https://escaliens.spipfactory.fr

Test
ceci est un test

Accès restreint
Merci Jean-Christophe, Ce n’était pas sur ce site que je travaillais hier mais sur celui de (…)

Accès restreint
Parfait ! Pense quand même à corriger l’URL de ton site ...

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2024 © Escal - Test SPIP4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.1.3