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

Le bandeau

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.
Attention ! Si votre message contient un lien, il devra être validé par le webmestre.

Ajouter un document

Rappel de la discussion
De la simplicité de l’option 2 Escal
Baumstark - le 10 octobre 2021

Bonjour,
Je souhaitais pousser l’option 2 qui a un gros intérêt : elle permet de faire des choses simples et sans investissement important. UN logo, un titre, un slogan, un descriptif. C’est déjà tout dans SPIP.

La difficulté c’est la gestion du positionnement de ces 3 éléments dans le bandeau. Escal ne permet pas (sauf erreur) de jouer sur ce positionnement. J’ai essayé de modifier sans succés le style... mais je me rends compte que cela ne suffit pas, notamment pour résister à une variation de la taille de l’écran (Ordi, tablette et mobile).

Ce que j’avais en tête, c’est de faire en sorte que
 le logo soit sur une taille fixe pour éviter qu’il devienne un petite puce lorsque l’écran se réduit, et de pouvoir garder un titre lisible avec un taille des lettres fixes ce qu’on a pas justement pas avec la solution bandeau image...
 le Titre, le Slogan et le descriptif qui s’adaptent (en restant aligné sur le logo) ensuite dans un espace (calculé comme ce qui reste de l’écran une fois qu’on retire la place réservée par le logo). L’idée étant de switcher simplement entre un centrage ou un alignement à droite ou à gauche. Actuellement, le titre et le reste bascule sous le logo alors qu’il reste de la place sur la bandeau pour mettre le texte sur plusieurs lignes par exemple).

J’ai essayé de modifier inc-bandeau pour paramétrer l’espace du bandeau avec des pourcentages... et de pouvoir gérer ensuite le texte comme je le souhaitais. Mais tout part à vau l’eau.

Sous SPIP dans les articles... pour gérer cela on fait un tableau. Une image dans la première cellule et le texte dans l’autre... c’est imparable... je me disais pourquoi pas pour le bandeau...

Il me semble que l’option 2 (que j’avais jusqu’ici laissé tomber pour aller vers les bandeaux images... plus attractifs) redeviendrait une alternative intéressante si on pouvait le faire.

Si quelqu’un à une piste je veux bien la tester...

Belle journée. (Du soleil aujourd’hui...)

bandeau option2
Jean Christophe Villeneuve - le 12 octobre 2021

Hello

Une piste : rajoute ceci dans ton perso.css

dl.image_fluide {
	max-width: 150px !important;
	margin: 0;
}
#titrepage {
	width: 69% !important;
	float: right !important;
}

(le max-width de l’image est à adapter à ton logo)

bandeau option2
Jean Christophe Villeneuve - le 18 octobre 2021

Pour être plus complet et après avoir testé sur ton site, voici ce qu’il faut mettre dans ton perso.css :

dl.image_fluide {
	max-width: 30% !important;
	margin: 0;
}
#titrepage {
	width: 65% !important;
	float: right !important;
}
#nom-site-spip,
#slogan-site-spip,
#descriptif-site-spip{
	width: 100%;
}

Derniers commentaires

Modifier un texte
Ok c’était bien ça, cool. A l’avenir, utilises plutôt un éditeur de code plutôt que LibreOffice, (...)

Modifier un texte - suite et fin -
Super, c’est réparé Les apostrophes inclinés venaient de LibreOffice ! Encore (...)

Modifier un texte
Hello Je pencherais pour les apostrophes qui sont incurvées au lieu d’être droites car je ne vois (...)

Modifier un texte
Le fichier ci-dessous déposé dans le répertoire lang ne passe pas. "Parse error : syntax error, (...)

images dans un article
Bonjour Jean Christophe, non, je n’ai pas accès à ce fichier ; le répertoire /config ne m’est pas (...)

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

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