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

Mise en page générale

Qui êtes-vous ?
Votre message

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

Ajouter un document

Rappel de la discussion
Mise en page générale
Vincent - le 11 mai 2011

Bonsoir, j’ai un souci avec la mise en page de notre site EPS académique sous Escal : j’ai fait une bascule de layout sur le site pour passer de trois à 2 colonnes ; puis au au fur et a mesure de la conception je me suis rendu compte qu’il était intéressant de conserver 3 colonne ; du coup, j’ai remis le layout d’origine sauf que mes cadre latéraux sont partis se loger dans le coin gauche en bas de ma page d’accueil. En modifiant le css, j’ai réussi a ramener ma colonne de droite a 10px du bloc central (comme d’origine) mais les cadre reste flanqués en bas, impossible de les faire remonter au niveau de mon bloc central...
HELP !!

Mise en page générale
Jean Christophe Villeneuve - le 12 mai 2011

Hmm ça sent une div mal fermée, ça !

Dans ta copie de sommaire.html, tu as

<div id="page">
<div id="contenu">
<INCLURE {fond=inclusions/inc-a_la_une}>
</div>

au lieu de

<div id="page">
<div id="contenu">
<INCLURE {fond=inclusions/inc-a_la_une}>
</div>
</div>

il manque un </div> à la fin.

Mise en page générale
Vincent - le 13 mai 2011

Heuuu non, je viens de tester comme ça mais rien n’y fait

Mise en page générale
Jean Christophe Villeneuve - le 13 mai 2011

C’est parce que tu as maintenant un </div> en trop (en fait il n’était pas à sa place) entre

<div class="cadre-rouge">
<INCLURE {fond=inclusions/inc-edito}>
</div>

et

<div class="cadre-rouge">
<INCLURE {fond=inclusions/inc-calendrier}>
</div>

PS : tu peux mettre du code HTML dans tes réponses mais il faut l’entourer d’une balise "code" donc entre <code> et < / code> (sans mettre les espaces) mais évite de mettre une page entière ;-)

Mise en page générale
vincent - le 15 mai 2011

Bon voici l’extrait de code que j’ai pour ma page sommaire, j’ai viré les div en trop mais rien ne bouge même en vidant le cache...

<div id="page">
            <div id="contenu">
              <INCLURE {fond=inclusions/inc-a_la_une}>
            </div>
          <div id="navigation">
            <div class="cadre-rouge">
              <INCLURE {fond=inclusions/inc-edito}>
            </div>
			<div class="cadre-rouge">
              <INCLURE {fond=inclusions/inc-calendrier}>
            </div>
			
			</div>
			
          <div id="extra">
			<div class="cadre-rouge">
              <INCLURE {fond=inclusions/inc-actus}>
            </div>
            <div class="cadre-rouge">
              <INCLURE {fond=inclusions/inc-photos}>
            </div>
Mise en page générale
Jean Christophe Villeneuve - le 15 mai 2011

Ben là il manque toujours un </div> avant <div id="navigation"> et je suppose qu’il y a un autre </div> juste après ton extrait de code pour fermer la <div id="extra">

Mise en page générale
vincent - le 16 mai 2011

Désolé, oui, c’est fait mais ça ne change rien...

Mise en page générale
vincent - le 16 mai 2011

PS : c’est le cas sur toutes les pages du site....
Les cadres extérieurs restent en bas.

Mise en page générale
Jean Christophe Villeneuve - le 16 mai 2011

Arf, si tu m’avais dit ça avant ...

Le problème, c’est que tu as bidouillé le fichier layoutPMP.css !!

La solution est donc simple : supprime le fichier /squelettes/styles/layoutPMP.css

Et hop !

Mais attention tu as rajouté un <div> au lieu d’un </div> dans ta dernière modif de sommaire.html

Mise en page générale
vincent - le 17 mai 2011

Ok, tout est rentré dans l’ordre, je te remercie vivement pour tout le travail que tu fais. Ton squelette est vraiment extra.
Il est vrai qu’il est parfois difficile, quand même, de repérer les cadres (par exemple ton cadre bleu accès direct ici sur le côté)sur le visuel en ligne, avec les pages inc- et les styles auxquels ils font appel.... On a du mal a savoir quelle page ou quel feuille de style modifier pour toucher le bon cadre... Et une dernière question : le fichier perso.css doit-il être seul dans le dossier styles ; moi j’ai mis aussi une copie des fichiers général.css et alaune.css ; est-ce une erreur ??
Encore merci pour ta patience, je suis un bidouilleur loin d’être expert dans l’art de la conception et n’ai que de minimes connaissances dans les différents languages (HTML, PhP, etc...)
Vincent

Mise en page générale
Jean Christophe Villeneuve - le 17 mai 2011

Copier les fichiers general.css et alaune.css n’est pas une erreur en soi mais ne sert à rien. Escal est conçu pour que toutes les modifications de css inscrites dans perso.css surchargent les styles des autres feuilles css.

Pour les cadres, j’ai essayé d’être le plus clair possible : le cadre accès direct correspond au ficjier inc-acces_direct par exemple...

Pour les styles, je reconnais qu’il y a encore un peu de boulot pour que ce soit plus clair et ordonné mais c’est plus simple à dire qu’à faire. Pour t’y retrouver, je te conseille de lire la page sur les extensions de Firefox qui peuvent beaucoup t’aider, notamment Webdevelopper et Firebug.

Mais si tu as des idées, je suis preneur ! N’hésites pas à proposer. Et je dis ça sans aucune ironie.

Derniers commentaires

Espace entre image et légende
Bonjour, J’ai un espace entre l’image et la légende énorme ! Vous pouvez voir en exemple en (…)

Aligner les images
* Il pourrait être intéressant de pouvoir faire ce genre de composition : (saloperie de (…)

Aligner les images
Merci Jean-Christophe. Il pourrait être inintéressant de pouvoir faire ce genre de composition :

Aligner les images
En effet. Je vais poser la quetion sur discuter.spip.net

Aligner les images
en passant et avec un tableau |<docxx>|<imgxx>| et une régle css pour ne 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 5.2.5