QUEEL & Navigation

Mar 27 Sep - 21:14
Rebonjour,

je m'en reviens à vous dans l'objectif d'une modification et d'une aide ;

Au niveau de la modification, il s'agirait de faire déplacer la navigation du 22 avril lorsque l'utilisateur scroll la page, comme certaines barres de navigations horizontales le font ; est-ce possible ?

Par rapport à l'aide, il s'agit du QUEEL du jeudi 31 décembre : le redimensionnement automatique le centre au niveau du forum, mais est-ce qu'il y aurait un moyen de lui faire "prendre" toute la largeur du forum sans pour autant perdre des éléments ? Peut-être faut-il que j'adapte, comme pour le code de sujet, les width ; dans ce cas, quels blocs dois-je modifier ?

En vous remerciant chaleureusement,
Doléo
Revenir en haut Aller en bas
Sam 1 Oct - 17:50
Bonjour,

Concernant la navigation, remplacez position:absolute; par position:fixed;

Quant au QEEL :

Code:
/* QEEL */
.QEEL {
position:absolute; left:0; width:100%; padding:2% 0; text-align:center;
background:lightgrey; /* MODIFIABLE */
}
/* BLOC TITRE QEEL */
.tleQEEL {
margin-bottom:15px;
width:100%; height:60px; padding-top:25px;
font-family:Arial; background:#0d1217; box-shadow:inset 0 0 25px rgba(0,0,0,0.2); /* MODIFIABLE */
letter-spacing:2px; text-transform:uppercase; text-align:center;
}
/* TITRE QEEL */
.tleQEEL a{
font-size:32px;
color:white; /* MODIFIABLE */
}
/* BLOC MEMBRES CONNECTES & 24H / TRAITS GROUPES QEEL */
#ondayQEEL {
display:inline-block; vertical-align:top; width:60%;
}
/* MEMBRES CONNECTES & 24H */
.ondayQEEL {
display:inline-block; vertical-align:top;
width:85%; height:195px; padding:15px 1%; overflow:hidden;
background-color:rgba(250,250,250,0.8); color:black; /* MODIFIABLE */
font-size:11px; text-align:justify;
}
.ondayQEEL:hover {
overflow:auto;
}
.ondayQEEL .row1 {
background:none; padding:0;
}
/* BLOC TRAITS GROUPES QEEL */
.GQEEL {
display:inline-block; margin-left:1%;
width:12%; padding-top:10px; height:215px; text-align:center;
background:black; /* MODIFIABLE */
}
/* TRAIT GROUPE QEEL */
.onglet {
display:block; margin:7px auto;
width:75%; height:10px;
opacity:0.7;
}
/* SURVOL TRAIT GROUPE QEEL */
.onglet_1 {
opacity:1;
}
/* BLOC DERNIER UTILISATEUR / TOTAL MEMBRES & MESSAGES / ANNIVERSAIRES */
.stsQEEL {
display:inline-block; vertical-align:top; margin-left:1%;
width:35%; height:295px; padding:15px 1%; overflow:hidden;
background-color:rgba(0,0,0,0.8); /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
width:100%; height:65px; padding-top:20px;
background:#DEDEDE; color:black; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-size:16px;
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL {
display:inline-block; vertical-align:top; margin-top:15px; margin-right:1%;
width:50%; height:55px; padding-top:25px;
background:#101e29; color:white; /* MODIFIABLE */
text-transform:uppercase; text-align:center;
}
/* NOMBRE MESSAGES QEEL */
.tlPQEEL {
display:inline-block; vertical-align:top; margin-top:15px;
width:49%; height:55px; padding-top:25px;
background:#294154; color:white; /* MODIFIABLE */
text-transform:uppercase; text-align:center;
}
/* ANNIVERSAIRES QEEL */
.anvQEEL {
display:inline-block; margin-top:15px;
width:100%; height:70px; padding-top:30px;
text-transform:uppercase; text-align:center; font-size:24px; font-weight:bold;
background:#191919; color:white; font-family:Arial; /* MODIFIABLE */
}
/* CONTENU ANNIVERSAIRES QEEL */
.anvQEEL div {
position:absolute; z-index:3; margin-top:-59px;
width:0px; height:80px; padding:10px 1%; overflow:hidden;
text-align:justify !important;
background:#ccc; /* MODIFIABLE */
opacity:0; transition:all .45s linear; -webkit-transition:all .45s linear;
}
.anvQEEL:hover div{
width:33%; overflow:auto;
opacity:1;
}
.anvQEEL .row1{
background:none !important; padding:0 !important;
}
/* DESCRIPTIFS GROUPES QEEL */
.blocGQEEL {
margin-left:24%; margin-top:15px;
width:73%; height:65px; padding:5px 1%; overflow:auto;
background-color:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
text-align:justify; font-size:11px;
}
.contenu_onglet {
display:none;
}
/* NOMS DES GROUPES QEEL */
.contenu_onglet div {
position:absolute; z-index:3; margin-left:-24%; margin-top:-5px;
width:20%; height:45px; padding:20px 1% 10px; overflow:hidden;
font-size:18px; text-align:center; text-transform:uppercase;
color:white; text-shadow:-1px 1px 0 rgba(0,0,0,0.1); /* MODIFIABLE */
}
Revenir en haut Aller en bas
Dim 2 Oct - 8:27
Bonsoir,

je vous remercie pour la navigation, c'est parfait !

Cependant, par rapport au queel, je me suis malheureusement mal exprimée ; à vrai dire, je voulais lui faire prendre toute la largeur disponible du corps de page...
Je vous prie de pardonner mon erreur ; est-il possible de faire de nouveaux changements ?

Doléo
Revenir en haut Aller en bas
Dim 2 Oct - 14:16
Certainement, indiquez-moi la largeur du corps de votre forum s'il vous plaît.
Revenir en haut Aller en bas
Dim 2 Oct - 18:38
Je vous remercie de votre patience ; mon forum fait 900 px de largeur.

Autrement, excusez-moi de vous demander tant de choses, mais serait-il possible de faire en sorte que, pour la liste de sujet datant du 9 janvier (la mauve), l'avatar ne s'affiche pas ? C'est à dire qu'il y aurait à la place un prolongement du bloc titre ainsi que de l'icône...

Une nouvelle fois merci,
Doléo
Revenir en haut Aller en bas
Mer 5 Oct - 11:42
Partie CSS pour le QEEL :
Code:
/* QEEL */
.QEEL {
width:900px; text-align:center;
}
/* BLOC TITRE QEEL */
.tleQEEL {
margin-bottom:15px;
width:100%; height:60px; padding-top:25px;
font-family:Arial; background:#0d1217; /* MODIFIABLE */
letter-spacing:2px; text-transform:uppercase; text-align:center;
}
/* TITRE QEEL */
.tleQEEL a{
font-size:32px;
color:white; /* MODIFIABLE */
}
/* BLOC MEMBRES CONNECTES & 24H / TRAITS GROUPES QEEL */
#ondayQEEL {
display:inline-block; vertical-align:top; width:555px;
}
/* MEMBRES CONNECTES & 24H */
.ondayQEEL {
display:inline-block; vertical-align:top;
width:450px; height:195px; padding:10px; overflow:hidden;
background-color:rgba(250,250,250,0.8); color:black; /* MODIFIABLE */
font-size:11px; text-align:justify;
}
.ondayQEEL:hover {
overflow:auto;
}
.ondayQEEL .row1 {
background:none; padding:0;
}
/* BLOC TRAITS GROUPES QEEL */
.GQEEL {
display:inline-block; margin-left:10px;
width:75px; height:210px; padding-top:5px; text-align:center;
background:black; /* MODIFIABLE */
}
/* TRAIT GROUPE QEEL */
.onglet {
display:block; margin:7px auto;
width:55px; height:10px;
opacity:0.7;
}
/* SURVOL TRAIT GROUPE QEEL */
.onglet_1 {
opacity:1;
}
/* BLOC DERNIER UTILISATEUR / TOTAL MEMBRES & MESSAGES / ANNIVERSAIRES */
.stsQEEL {
display:inline-block; vertical-align:top; margin-left:10px;
width:315px; height:295px; padding:10px; overflow:hidden;
background-color:rgba(0,0,0,0.8); /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
width:315px; height:65px; padding-top:20px;
background:#DEDEDE; color:black; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-size:16px;
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL {
display:inline-block; vertical-align:top; margin-top:15px; margin-right:10px;
width:155px; height:55px; padding-top:25px;
background:#101e29; color:white; /* MODIFIABLE */
text-transform:uppercase; text-align:center;
}
/* NOMBRE MESSAGES QEEL */
.tlPQEEL {
display:inline-block; vertical-align:top; margin-top:15px;
width:150px; height:55px; padding-top:25px;
background:#294154; color:white; /* MODIFIABLE */
text-transform:uppercase; text-align:center;
}
/* ANNIVERSAIRES QEEL */
.anvQEEL {
display:inline-block; margin-top:15px;
width:315px; height:70px; padding-top:30px;
text-transform:uppercase; text-align:center; font-size:24px; font-weight:bold;
background:#191919; color:white; font-family:Arial; /* MODIFIABLE */
}
/* CONTENU ANNIVERSAIRES QEEL */
.anvQEEL div {
position:absolute; z-index:3; margin-top:-59px;
width:0px; height:80px; padding:10px 5px; overflow:hidden;
text-align:justify !important;
background:#ccc; /* MODIFIABLE */
opacity:0; transition:all .45s linear; -webkit-transition:all .45s linear;
}
.anvQEEL:hover div{
width:305px; overflow-y:auto;
opacity:1;
}
.anvQEEL .row1{
background:none !important; padding:0 !important;
}
/* DESCRIPTIFS GROUPES QEEL */
.blocGQEEL {
margin-left:300px; margin-top:15px;
width:590px; height:65px; padding:5px; overflow:auto;
background-color:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
text-align:justify; font-size:11px;
}
.contenu_onglet {
display:none;
}
/* NOMS DES GROUPES QEEL */
.contenu_onglet div {
position:absolute; z-index:3; margin-left:-305px; margin-top:-5px;
width:280px; height:45px; padding:20px 5px 10px; overflow:hidden;
font-size:18px; text-align:center; text-transform:uppercase;
color:white; text-shadow:-1px 1px 0 rgba(0,0,0,0.1); /* MODIFIABLE */
}

Remplacer l'intégralité du template topics_list_box :
Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
 var all_checked = true;
 for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
 all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
 }
 }
 document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
 for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
 document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
 }
 }
}
</script>
<!-- END multi_selection -->

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN pagination -->
 <tr>
 <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
 </tr>
 <!-- END pagination -->
 <!-- END header_table --><!-- BEGIN header_row -->
 <tr>
 <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
 </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
 <tr>
 <!-- BEGIN single_selection -->
 <div class="modSBJ"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></div>
 <!-- END single_selection -->
 <div class="LSBJ">
 <div class="boxSBJ"><div class="tleSBJ">{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE} <a href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a><!-- BEGIN switch_description --><div class="descSBJ">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}</div><!-- END switch_description --></div><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" class="imgSBJ" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" /></div>
 <div class="nameSBJ"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></div>
 <div class="stsSBJ"><div class="vuesSBJ">{topics_list_box.row.VIEWS} V.</div><div class="repSBJ">{topics_list_box.row.REPLIES} R.</div></div>
 <div class="lmsgSBJ">{topics_list_box.row.LAST_POST_TIME} par {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</div><div class="gotoSBJ">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></div>
     <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
     </div>
    
<!-- BEGIN multi_selection -->
 <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
 <!-- END multi_selection -->
 </tr>
 <!-- END topic --><!-- BEGIN no_topics -->
 <tr>
 <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
 </tr>
 <!-- END no_topics --><!-- BEGIN bottom -->
 <tr>
 <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td> <span class="gensmall">{PAGINATION}</span></td>
 <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
 </tr>
 </table>
 </td>
 </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Partie CSS :
Code:
/* PRESENTATION LISTE SUJETS */
/* BLOC SUJET */
.LSBJ {
width:750px; margin:0 auto 10px;
}
/* OUTIL MODERATION */
.modSBJ {
position:absolute; z-index:3; margin-left:-5px; margin-top:25px;
}
/* AVATAR DERNIER POSTEUR */
.lavSBJ {
display:inline-block; vertical-align:top;
width:70; overflow:hidden;
}
.lavSBJ img{
width:100px; filter:grayscale(0.5); -webkit-filter:grayscale(0.5);
}
/* BLOC TITRE / ICÔNES */
.boxSBJ {
display:inline-block; vertical-align:top;
width:505px;
}
/* BLOC TITRE & DESCRIPTION */
.tleSBJ {
display:inline-block; vertical-align:top;
width:485px; height:35px; padding:10px; overflow:hidden;
font-family:Arial; background:#4a3c7f; /* MODIFIABLE */
text-align:left; text-transform:uppercase;
}
/* TITRE */
.tleSBJ a {
line-height:9px;
color:white !important; /* MODIFIABLE */
}
/* DESCRIPTION */
.descSBJ {
color:#ccc; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
/* ICÔNES */
.imgSBJ {
margin-top:5px;
width:505px; height:15px;
}
/* AUTEUR */
.nameSBJ {
display:inline-block; margin:0 10px;
height:50px; width:105px; padding:25px 5px 0px; overflow:hidden;
background:rgba(250,250,250,0.8); /* MODIFIABLE */
font-size:11px; text-align:center; line-height:11px;
}
/* BLOC VUES & REPONSES */
.stsSBJ {
display:inline-block; vertical-align:top;
width:100px; padding:5px;
background:#bcb4f5; /* MODIFIABLE */
}
/* VUES */
.vuesSBJ {
margin:5px auto;
width:85px; height:20px; padding-top:5px;
background:rgba(250,250,250,0.8); color:black; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* REPONSES */
.repSBJ {
margin:5px auto;
width:85px; height:20px; padding-top:5px;
background:rgba(250,250,250,0.8); color:black; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* DERNIER MESSAGE */
.lmsgSBJ {
display:inline-block; margin-top:5px;
height:15px; width:300px; padding:5px; overflow:hidden;
background:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */
font-size:9px; text-align:center;
}
/* LISTE DES PAGES */
.gotoSBJ {
display:inline-block; vertical-align:top; margin-top:-3px;
width:440px; font-size:10px; text-align:right;
}

Taille des icônes des sujets : 505*15
Revenir en haut Aller en bas
Mer 5 Oct - 16:38
Bonjour,

l'installation du nouveau QUEEL à quelque peu déréglé la structure que j'avais installé auparavant : il se trouve que j'avais collé la bannière aux marges du forum, ou plutôt, enlevé ces marges ; mais bizarrement, l'installation du QUEEL a remis ces marges dont je voudrai me débarrasser (ce "bug" n'est présent que sur la page d'accueil) ; que dois-je faire pour, à nouveau, les enlever ?

Autrement, peut-être que je vous en demande trop (?), mais pourriez-vous faire en sorte que les côtés de la liste de sujets se retrouvent eux aussi collés aux bords ?: http://i97.servimg.com/u/f97/19/03/65/85/imagel10.jpg

Merci d'avance,
Doléo
Revenir en haut Aller en bas
Sam 8 Oct - 9:40
QEEL : Diminuez les width des class & id .QEEL / #ondayQEEL / .ondayQEEL / .blocGQEEL et augmentez la valeur du margin-left de la class .blocGQEEL en conséquence.

Si vous décidez de rétrécir l'ensemble de 20px, vous soustrairez ce nombre aux width de toutes les class & id évoqués et ajouterez 10px au margin-left.

Liste des sujets : Augmentez les width des class .LSBJ / .boxSBJ / .tleSBJ / .imgSBJ selon vos préférences.
Revenir en haut Aller en bas
Dim 9 Oct - 16:09
Bonsoir,

je vous remercie de ces informations qui m'ont été plus qu'utiles.

Cependant, il s'est avéré que le code de sujet (24 Avril, 17:46), lui-aussi, enlève ces marges ; quels blocs dois-je modifier, cette fois-ci ?

Doléo.
Revenir en haut Aller en bas
Mer 12 Oct - 16:32
L'id #namePOST ainsi que les class div.postbody & .datePOST.
Revenir en haut Aller en bas
Sam 15 Oct - 17:55
Bonsoir et à nouveau merci,

en vérifiant chaque page du forum, j'ai pu remarquer un "défaut" dans l'affichage des Mps : en installant la liste de sujets, et en créant donc les icônes, ceux-ci se sont répercutés au niveau de la liste de Mps (http://i97.servimg.com/u/f97/19/03/65/85/mp10.png). Pourriez-vous modifier la liste de sujet dont nous avons précédemment parlé pour qu'il fonctionne avec l'affichage de la liste de Mps ?

La fondatrice, en se baladant un peu sur votre magnifique forum, a préféré la PA du Vendredi 12 Février à celle que j'avais auparavant mise ; mais l'application de cette nouvelle page d'accueil a, encore une fois, remis ces marges. Vous devez vous douter de la question....

Doléo.
Revenir en haut Aller en bas
Sam 15 Oct - 23:11
Liste des sujets : Rétrécissez simplement vos images, le CSS les redimensionnera automatiquement.

Page d'accueil :

Code:
/* DIMENSIONS PA */
/* BLOC PA */
.BOG {
width:880px !important;
}
/* CITATION / MESSAGE DE BIENVENUE PA */
.headBOG {
width:880px !important;
}
/* CONTEXTE PA */
.ctxtBOG {
width:260px !important;
}
/* INFOBULLE CONTEXTE PA */
.infoBOG {
width:180px !important;
}
/* MENU LIENS PA */
.menuBOG {
width:280px !important;
}
Revenir en haut Aller en bas
Dim 16 Oct - 9:41
Bonjour,

j'ai bien appliqué votre CSS, mais pourtant, les marges sont toujours là, comme s'il n'y avait eu aucun changement... D'ailleurs, j'aimerai aussi, au possible, coller chaque bloc "extérieur" au cadre du forum ; que me conseillez-vous de faire ?

Doléo.
Revenir en haut Aller en bas
Dim 16 Oct - 22:20
De me communiquer le lien de votre forum.
Revenir en haut Aller en bas
Lun 17 Oct - 9:23
Le voici :

Doléo.
Revenir en haut Aller en bas
Mar 18 Oct - 5:10
Remplacez :
Code:
/* DIMENSIONS PA */
/* BLOC PA */
.BOG {
width:880px !important;
}
/* CITATION / MESSAGE DE BIENVENUE PA */
.headBOG {
width:880px !important;
}
/* CONTEXTE PA */
.ctxtBOG {
width:260px !important;
}
/* INFOBULLE CONTEXTE PA */
.infoBOG {
width:180px !important;
}
/* MENU LIENS PA */
.menuBOG {
width:280px !important;
}

Par :
Code:
/* DIMENSIONS PA */
/* BLOC PA */
#BOG {
margin:0 -5px !important;
}
/* CITATION / MESSAGE DE BIENVENUE PA */
.headBOG {
margin-bottom:5px;
}
Revenir en haut Aller en bas
Mer 19 Oct - 19:18
C'est absolument parfait !

Je vous remercie grandement d'avoir répondu à toutes mes demandes !

En espérant ne plus avoir à vous embêter,
Doléo.
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum