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

Affichage de logos en pied de page
On peut aussi communiquer directement par mail. Tu peux m’écrire à jcvilleneuve chez (...)

Affichage de logos en pied de page
C’est génial et très satisfaisant ! Il a l’air d’un site pro ! Merci. J’ai d’autres petites choses (...)

Affichage de logos en pied de page
Tu peux rajouter dans ton perso.css quelque chose du genre : #pied .partenaires{ (...)

Affichage de logos en pied de page
Je reponds à moi-meme Le code suivant placé dans perso.css #pied .partenaires img height: (...)

Affichage de logos en pied de page
Merci beaucoup de votre temps et de votre aide ! operation reussie, c’etait assez simple si on (...)

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