Bonjour à tous et à toutes !
Je sollicite votre aide, si vous avez un peu de temps, pour des problèmes de mise en forme sous Spip 1.9.2c, squelette multisaisons concernant un site en test : http://julesrichard.fautvoir.com
Je sais que je devrais demander directement au concepteur du squelette, mais il semblerait qu’il sature avec les nombreuses questions qui lui sont posées.
Après m’être arrachée les cheveux pendant plusieurs heures, j’ai réussi à placer les blocs souhaités aux bons endroits, mais j’ai quelques petits problèmes d’affichage que je ne sais pas comment régler…
Le problème se situe sur la page d’accueil, dans la colonne de gauche et la colonne de droite ?
J’ai mis une image « bienvenue … », et ensuite 4 boites : « brèves », « voyage des TS1 », « les derniers articles » et enfin « toutes les actualités ».
Les mini diaporama photos sont un plugin appelé « splickrbox ».
Liste de mes petits soucis :
1) La boite « voyage des TS1 » est légèrement plus basse que « brèves » alors qu’elles sont censées être au même niveau… ;(firefox 2)
2) dans la boite « voyage des TS1 », les photos sont séparées par un espace tout moche, alors que ça devrait s’afficher comme dans la boite « course en cours » (menu de droite) (et il y a même une ligne plus claire sur IE6);
3) une ligne bleue apparaît à droite pour mes 2 boites splickrbox sous IE6, ce qui a pour effet de me décaler ma mise en page de boites côte à côte.
J’ai inséré la splickrbox « voyage des TS1 » dans un div id= « celbas » parce que je voulais un alignement en ligne, mais j’ai peut être fait une erreur. Peut m’importe si l’affichage du titre sur fond bleu plus foncé (comme brèves etc…).
J’espère ne pas avoir été trop confuse dans mes explications. Si vous avez une solution pour seulement 1 des problèmes, n’hésitez pas
Merci d’avance et bonne journée
Artemisangel
http://julesrichard.fautvoir.com
Voici le code correspondant :
et maintenant le css :
désolée c'est un peu long
Modifié par artemisangel (12 Mar 2008 - 08:49)
Je sollicite votre aide, si vous avez un peu de temps, pour des problèmes de mise en forme sous Spip 1.9.2c, squelette multisaisons concernant un site en test : http://julesrichard.fautvoir.com
Je sais que je devrais demander directement au concepteur du squelette, mais il semblerait qu’il sature avec les nombreuses questions qui lui sont posées.
Après m’être arrachée les cheveux pendant plusieurs heures, j’ai réussi à placer les blocs souhaités aux bons endroits, mais j’ai quelques petits problèmes d’affichage que je ne sais pas comment régler…
Le problème se situe sur la page d’accueil, dans la colonne de gauche et la colonne de droite ?
J’ai mis une image « bienvenue … », et ensuite 4 boites : « brèves », « voyage des TS1 », « les derniers articles » et enfin « toutes les actualités ».
Les mini diaporama photos sont un plugin appelé « splickrbox ».
Liste de mes petits soucis :
1) La boite « voyage des TS1 » est légèrement plus basse que « brèves » alors qu’elles sont censées être au même niveau… ;(firefox 2)
2) dans la boite « voyage des TS1 », les photos sont séparées par un espace tout moche, alors que ça devrait s’afficher comme dans la boite « course en cours » (menu de droite) (et il y a même une ligne plus claire sur IE6);
3) une ligne bleue apparaît à droite pour mes 2 boites splickrbox sous IE6, ce qui a pour effet de me décaler ma mise en page de boites côte à côte.
J’ai inséré la splickrbox « voyage des TS1 » dans un div id= « celbas » parce que je voulais un alignement en ligne, mais j’ai peut être fait une erreur. Peut m’importe si l’affichage du titre sur fond bleu plus foncé (comme brèves etc…).
J’espère ne pas avoir été trop confuse dans mes explications. Si vous avez une solution pour seulement 1 des problèmes, n’hésitez pas
Merci d’avance et bonne journée
Artemisangel
http://julesrichard.fautvoir.com
Voici le code correspondant :
<div class="grande_boite">
<img src="#CHEMIN{IMG/fronton_jrtexte.jpg}" alt="fronton du lycée Jules Richard" />
</div>[(#REM) fermeture grande_boite]
<div id="celbas">
<ul id="decobas">
[(#REM) Les article en une ]
<B_une>
<li>
<h4>A la une</h4>
<p>
<BOUCLE_une(ARTICLES){tout}{doublons}{titre_mot=une}{par date}{inverse}{0,2}{tout_voir}>
<span class="logogauche"><a href="#URL_ARTICLE" title="Lire l'article! #TITRE" alt="Lire l'article"><INCLURE{fond="logo"}{id_article}{taille=30}{date=#ENV{date}}></a></span><strong><a href="#URL_ARTICLE">[(#TITRE)]</a></strong>
<INCLURE{fond="inc_cadenas"}{id_article}><br/>
[(#INTRODUCTION|couper{150})]<br/>
</BOUCLE_une></p>
</li>
</B_une>
<B_breves>
<li>
<h4>Brèves</h4>
<marquee behavior="scroll"
direction="up"
scrollamount="1"
scrolldelay="1"
onmouseover="this.stop()"
onmouseout="this.start()
"style="height:15=96px;width:auto;border:no border;background:#ebf5ff;color:#000;padding:2px;padding-left:10px" height="106px" width="auto">
<BOUCLE_breves(BREVES) {id_rubrique!=11} {par date}{inverse}{age<90} {0,5}>
<br><img src="#CHEMIN{squelettes/images/menu/star_yellow.png}"/>
<a href="#URL_BREVE" title="Lire la brève: #TITRE">[(#TITRE)]</a><br />
[ (le (#DATE|affdate{'d/m/Y'}) ) ]<br/>
[(#TEXTE|couper{180}|texte_backend)].<a href="#URL_BREVE" title="Lire la suite de: #TITRE" >Lire la suite</a><br/>
</BOUCLE_breves>
</marquee>
<p>
</p>
</B_breves>
</li>
<li>
<BOUCLE_huit_images_une(ARTICLES){titre_mot=images_une}{par date}{inverse}{0,1}>
<BOUCLE_huit_saison(MOTS){titre=saison}{0,1}>
[(#REM) On donne des couleurs hexadécimales aux saisons. Vous pouvez les modifier "#eef" devient "eeeeff"]
[(#ENV{date}|saison|=={printemps}|?{' ',''})#SET{'colo','e3ae9b'}]
[(#ENV{date}|saison|translitteration|=={ete}|?{' ',''})#SET{'colo','D58B9B'}]
[(#ENV{date}|saison|=={automne}|?{' ',''})#SET{'colo','769599'}]
[(#ENV{date}|saison|=={hiver}|?{' ',''})#SET{'colo','8d8ba3'}]
<div class="boite">
[(#REM) ouverture boite photos flickr ]
<h4 class="icone_photo">Boite1</h4>
<p>
<B_flickr>
<div style="position:relative;[float(#ENV{align}|match{left|right});]" class="splickrbox [splickrbox_(#ENV{align})]">
<table cellpadding="0" cellspacing="0"><tr>
<BOUCLE_flickr(DOCUMENTS){id_article}{!par date}{extension==jpg|png|gif}{0,#ENV{taille,8}}>
<td> <a href="#URL_ARTICLE">[(#FICHIER|image_masque{carre-112.png}|image_sepia{#GET{colo}}|image_aplatir{jpg,ffffff}|inserer_attribut{style,'width:112px;height:112px'}|inserer_attribut{alt,'Cliquez pour en voir plus'})]</a></td>
[(#COMPTEUR_BOUCLE|Splickr_juste_a_x{#ENV{colonnes,4},</tr><tr>})]
</BOUCLE_flickr>
<td></td>
</tr></table>
</div>
</B_flickr>
</BOUCLE_huit_saison>
<div class="boite">
[(#REM) ouverture boite photos flickr 2]
<h4 class="icone_photo"><a href="#URL_ARTICLE{6}" title=#TITRE "Voyage des TS1 à Dunkerque">Voyage des TS1...</a></h4>
<B_flickr2>
<div style="position:relative;[float(#ENV{align}|match{left|right});]" class="splickrbox [splickrbox_(#ENV{align})]">
<table cellpadding="0" cellspacing="0"><tr>
<BOUCLE_flickr2(DOCUMENTS){id_article}{!par date}{extension==jpg|png|gif}{0,#ENV{taille,8}}>
<td> <a href="#URL_ARTICLE">[(#FICHIER|image_masque{carre-112.png}|image_aplatir{jpg,ffffff}|inserer_attribut{style,'width:112px;height:112px'}|inserer_attribut{alt,'Cliquez lire l'article'})]</a></td>
[(#COMPTEUR_BOUCLE|Splickr_juste_a_x{#ENV{colonnes,4},</tr><tr>})]
</BOUCLE_flickr2>
<td></td>
</tr></table>
</div>
</B_flickr2>
</p>
<//B_huit_saison>
</div>
</BOUCLE_huit_images_une>
</li>
<li>
<B_derniersarticles>
<h4>Les derniers articles</h4>
<p>
<BOUCLE_derniersarticles(ARTICLES) {par date}{inverse}{age<100} {0,4}>
<img src="#CHEMIN{squelettes/images/menu/star_yellow.png}"/>
<a href="#URL_ARTICLE" title="Lire l'article: #TITRE">[(#TITRE)]</a>
[(le (#DATE|affdate{'d/m/Y'}))]<br />
</BOUCLE_derniersarticles>
</p>
</li>
</B_derniersarticles>
<li>
<h4> Toutes les actualités </h4>
<p>
<a href="[(#URL_PAGE{nouveautes})]" title="Découvrir toutes les nouveautés du site">
<img src="#CHEMIN{squelettes/images/menu/star_blue.png}"/></a> <a href="[(#URL_PAGE{nouveautes})]" title="Découvrir toutes les nouveautés du site">Toutes les nouveautés du site</a>
<br/>
<br />
<a href="[(#URL_PAGE{syndication})]" title="Afficher le contenu dynamique RSS de #NOM_SITE_SPIP"><img src="#CHEMIN{squelettes/images/icones/rss-icon-14.png}"/></a>
<a href="[(#URL_PAGE{syndication})]" title="Afficher le contenu dynamique RSS de #NOM_SITE_SPIP">Contenu RSS du Lycée</a>
<br />
<br />
<a href="[(#URL_PAGE{kiosque})]" title="Lire les articles des sites web sélectionnés par le lycée" ><img src="#CHEMIN{squelettes/images/icones/internet-web-browser.png}"/></a>
<a href="[(#URL_PAGE{kiosque})]" title="Lire les articles des sites web sélectionnés par le lycée" >Kiosque web</a>
<br />
<br/>
</p>
</li>
</ul>
</div> [(#REM) fin de cel ]
<div class="grande_boite">
</div>[(#REM) fermeture colone de gauche ]
<div class="coldroit"> [(#REM) ouverture de la colone de droite ]
<div class="boite"> [(#REM) ouverture boite menu ]
<h4 class="icone_menu">Navigation</h4>
<INCLURE{fond="inc_menu_rub"}>
</div>[(#REM) fermeture boite menu ]
<BOUCLE_huit_images_deux(ARTICLES){titre_mot=images_deux}{par date}{inverse}{0,1}>
<BOUCLE_huit_saison2(MOTS){titre=saison}{0,1}>
[(#REM) On donne des couleurs hexadécimales aux saisons. Vous pouvez les modifier "#eef" devient "eeeeff"]
[(#ENV{date}|saison|=={printemps}|?{' ',''})#SET{'colo','e3ae9b'}]
[(#ENV{date}|saison|translitteration|=={ete}|?{' ',''})#SET{'colo','D58B9B'}]
[(#ENV{date}|saison|=={automne}|?{' ',''})#SET{'colo','769599'}]
[(#ENV{date}|saison|=={hiver}|?{' ',''})#SET{'colo','8d8ba3'}]
<div class="boite">
[(#REM) ouverture boite photos flickr ]
<h4 class="icone_photo">Boite3</h4>
<B_flickr3>
<div style="position:relative;[float(#ENV{align}|match{left|right});]" class="splickrbox [splickrbox_(#ENV{align})]">
<table cellpadding="0" cellspacing="0"><tr>
<BOUCLE_flickr3(DOCUMENTS){id_article}{!par date}{extension==jpg|png|gif}{0,#ENV{taille,8}}>
<td> <a href="#URL_ARTICLE">[(#FICHIER|image_masque{carre-112.png}|image_sepia{#GET{colo}}|image_aplatir{jpg,ffffff}|inserer_attribut{style,'width:112px;height:112px'}|inserer_attribut{alt,'Cliquez pour lire l'article'})]</a></td>
[(#COMPTEUR_BOUCLE|Splickr_juste_a_x{#ENV{colonnes,4},</tr><tr>})]
</BOUCLE_flickr3>
<td></td>
</tr></table>
</div>
</B_flickr3>
</BOUCLE_huit_saison2>
<div class="boite">
[(#REM) ouverture boite photos flickr 2]
<h4 class="icone_photo"><a href="#URL_RUBRIQUE{26}" title=#TITRE "Rubrique Course en cours">Course en cours</a></h4>
<B_flickr4>
<div style="position:relative;[float(#ENV{align}|match{left|right});]" class="splickrbox [splickrbox_(#ENV{align})]">
<table cellpadding="0" cellspacing="0"><tr>
<BOUCLE_flickr4(DOCUMENTS){id_article}{!par date}{extension==jpg|png|gif}{0,#ENV{taille,8}}>
<td> <a href="#URL_ARTICLE">[(#FICHIER|image_masque{carre-112.png}|image_aplatir{jpg,ffffff}|inserer_attribut{style,'width:112px;height:112px'}|inserer_attribut{alt,'Cliquez pour en voir plus'})]</a></td>
[(#COMPTEUR_BOUCLE|Splickr_juste_a_x{#ENV{colonnes,4},</tr><tr>})]
</BOUCLE_flickr4>
<td></td>
</tr></table>
</div>
</B_flickr4>
<//B_huit_saison2>
</div>
</BOUCLE_huit_images_deux>
et maintenant le css :
.boite h4,.discussion h4,.grande_boite h4,.grande_boite h1{
padding: 3px 3px 3px 28px;
position:relative;
.boite{
margin:6px 10px 6px 0;
width:235px;
}
/* les deux x2 cellules */
#cel,#celbas{
float:left;
display:inline;
}
#cel ul,#celbas ul{
list-style-type: none;
display:inline;
margin:0;
padding:0;
clear:both;
}
#cel li, #celbas li{
width:235px;
float:left;
display:inline;
margin:6px 0 5px 10px;
padding:0;
}
#cel li img,#celbas li img{
margin: 0 6px;
max-width: 200px;
}
#cel li h4,#celbas li h4{
word-spacing: 0.1em;
display:block;
-height:1%;
}
.splickrbox{
margin:9px;
height:112px;
width:224px;
overflow:hidden;
}
.splickrbox table td, .splickrbox table{
border-spacing:0px;
padding:0;
}
désolée c'est un peu long
Modifié par artemisangel (12 Mar 2008 - 08:49)