Modifications de deux templates

Bonjour à vous, Skaemp :) Voilà, j'aurais deux petites demandes à vous faire. Premièrement, cela concerne ce codage de la liste des sujets. Serait-ce possible de réduire l'image de gauche à 50x50, plus la hauteur des deux autres blocs à sa droite, ou est-ce que ce serait trop petit pour le contenu de ces boites ? Ainsi que de réduire la largeur totale à 800px.

Ma deuxième demande concerne ce code-ci. Serait-ce possible de déplacer le bloc tout à droite à l'extrême gauche (donc le bloc des messages, sujets et top-sites), de réduire la largeur totale à 800px et de mettre les groupes tout en haut avec rien dessous ? (en bloc, donc, mais invisible le bloc). Je ne sais pas si je suis claire dans cette demande, mes excuses :x

Voilà donc :) En vous remerciant d'avance ♥

Bonjour,

Remplacez le code du QEEL par :

Code:: 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><div class="GQEEL">{GROUP_LEGEND}</div><div id="QEEL"><div class="QEEL"><div class="boxQEEL" style="margin-left:10px;"><div class="tlPQEEL"><p><span id="tPOSTS"><b>{TOTAL_POSTS}</b></span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," ") .replace(/messages/," ");</script><br/>messages</p></div><div class="tlMQEEL"><p><span id="tUSERS"><b>{TOTAL_USERS}</b></span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," ") .replace(/membres enregistrés/," ") .replace(/membre enregistré/," ");</script><br/>membres</p></div><div class="voteQEEL"><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a></div></div><div class="boxQEEL"><div class="onlineQEEL"><div id="onLINE"><span id="TLUS">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('TLUS').innerHTML=document.getElementById('TLUS').innerHTML.replace(/Il y a en tout/,"");</script><br/><br/>{LOGGED_IN_USERS_LIST}</div><script type="text/javascript">document.getElementById('onLINE').innerHTML=document.getElementById('onLINE').innerHTML.replace(/Utilisateurs enregistrés :/," ")</script></div><div class="lstQEEL"><b>Bienvenue</b><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script></div></div><div class="dayQEEL"><div><table>{L_CONNECTED_MEMBERS}</table></div></div></div></div>
</td></tr></table>

Partie CSS :

Code:: /* BLOC GROUPES QEEL */
.GQEEL {
margin:5px auto; width:800px;
color:rgba(0,0,0,0); text-align:center; text-transform:uppercase;
}
/* LIEN GROUPE QEEL */
.GQEEL a{
font-size:12px; /* MODIFIABLE */
}
/* CADRE QEEL */
#QEEL {
width:798px; padding:12px 0;
background:#DEDEDE; border:1px solid lightgrey; /* MODIFIABLE */
}
/* QEEL */
.QEEL {
margin:auto; width:770px; padding:10px 0 6px; text-align:center;
background:white; border:1px solid lightgrey; /* MODIFIABLE */
}
/* BLOC POSITIONNEMENT */
.boxQEEL {
display:inline-block; vertical-align:top;
}
/* CADRE TOTAL MESSAGES QEEL */
.tlPQEEL {
margin-right:10px; margin-bottom:6px;
width:113px; height:60px; padding:5px;
text-align:center; text-transform:uppercase; font-size:16px;
background:#DEDEDE; border:1px solid lightgrey; /* MODIFIABLE */
}
/* TOTAL MESSAGES QEEL */
.tlPQEEL p{
margin:0; height:48px; padding-top:10px;
background:white; border:1px solid lightgrey; color:black; /* MODIFIABLE */
}
/* CADRE TOTAL MEMBRES QEEL */
.tlMQEEL {
width:113px; height:60px; padding:5px;
text-align:center; text-transform:uppercase; font-size:16px;
background:#DEDEDE; border:1px solid lightgrey; /* MODIFIABLE */
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL p{
margin:0; height:48px; padding-top:10px;
background:white; border:1px solid lightgrey; color:black; /* MODIFIABLE */
}
/* IMAGES TOP-SITES */
.voteQEEL {
margin-top:10px; width:125px;
}
.voteQEEL a:nth-child(2) {
margin-left:5px;
}
.voteQEEL a:nth-child(3) {
margin-top:5px;
}
.voteQEEL a:nth-child(4) {
margin-top:5px; margin-left:5px;
}
/* CADRE MEMBRES CONNECTES */
.onlineQEEL {
width:308px; height:185px;
background:#DEDEDE; border:1px solid lightgrey; color:black; /* MODIFIABLE */
}
/* MEMBRES CONNECTES */
.onlineQEEL div{
margin:10px auto 0; width:278px; height:153px; padding:5px; overflow:auto;
font-size:12px; text-align:justify; text-transform:uppercase;
background:white; border:1px solid lightgrey; /* MODIFIABLE */
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
margin-top:12px;
width:310px; height:65px; padding-top:20px;
background:#64B3AC; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-size:14px;
}
/* BIENVENUE DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL b{
display:block;
font-size:24px; color:white; /* MODIFIABLE */
}
/* CADRE 24H QEEL */
.dayQEEL {
display:inline-block; vertical-align:top; margin:0 10px; width:290px; height:282px;
background:#DEDEDE; border:1px solid lightgrey; /* MODIFIABLE */
}
/* 24H QEEL */
.dayQEEL div{
margin:10px auto 0; width:260px; height:250px; padding:5px; overflow:auto;
font-size:12px; text-align:justify; text-transform:uppercase;
background:white; border:1px solid lightgrey; /* MODIFIABLE */
}
.dayQEEL .row1 {
background:none; padding:0 !important;
}
.dayQEEL .gensmall {
font-size:12px; color:black; /* MODIFIABLE */
}

Remplacez la partie CSS concernant la liste des sujets par :

Code:: /* PRESENTATION LISTE SUJETS */
/* BLOC LISTE SUJETS */
#LSBJ {
width:800px; margin:auto;
background:none; /* MODIFIABLE */
}
/* BLOC SUJET */
.SBJ {
width:800px; margin:10px auto 0; text-align:center;
}
/* OUTIL MODERATION */
.modSBJ {
position:absolute; z-index:3; margin-left:-15px; margin-top:55px;
}
/* BLOC ICÔNES / VUES & REPONSES LISTE SUJETS */
#ivrSBJ {
display:inline-block; vertical-align:top;
width:50px; height:50px;
}
.ivrSBJ {
position:relative;
width:50px; height:50px; overflow:hidden;
}
/* ICÔNES LISTE SUJETS */
.imgSBJ {
width:50px; height:50px;
}
/* VUES LISTE SUJETS */
.vuesSBJ {
position:absolute; z-index:2; margin-top:-100px;
width:50px; height:20px; padding-top:5px;
background:rgba(250,250,250,0.8); color:black; /* MODIFIABLE */
font-size:11px; text-align:center;
opacity:0; transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
.ivrSBJ:hover .vuesSBJ {
margin-top:-50px; opacity:1;
}
/* REPONSES LISTE SUJETS */
.repSBJ {
position:absolute; z-index:2; margin-top:0px;
width:50px; height:20px; padding-top:5px;
background:rgba(250,250,250,0.6); color:black; /* MODIFIABLE */
font-size:11px; text-align:center;
opacity:0; transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
.ivrSBJ:hover .repSBJ {
margin-top:-25px; opacity:1;
}
/* BLOC TITRE / DESCRIPTION / AUTEUR LISTE SUJETS */
.tleSBJ {
display:inline-block; vertical-align:top;
width:450px; height:45px; padding:5px 5px 0; overflow:hidden;
font-family:Arial; background:black; color:#C1BFB7; /* MODIFIABLE */
text-align:center; text-transform:uppercase; font-size:14px;
}
/* TITRE LISTE SUJETS */
.tleSBJ a {
color:#C1BFB7 !important; /* MODIFIABLE */
}
/* DESCRIPTION LISTE SUJETS */
.descSBJ {
font-size:9px; font-style:italic;
}
/* AUTEUR TITRE LISTE SUJETS */
.nameSBJ {
font-size:11px;
}
/* DERNIER MESSAGE LISTE SUJETS */
.lmsgSBJ {
display:inline-block; vertical-align:top;
width:275px; height:45px; padding:5px 0 0; overflow:hidden;
font-family:Arial; background:#242424; color:#C1BFB7; /* MODIFIABLE */
text-align:center; font-size:10px; text-transform:uppercase;
}
/* AUTEUR DERNIER MESSAGE LISTE SUJETS */
.lmsgSBJ .gensmall {
font-size:12px;
}
/* LISTE DES PAGES */
.gotoSBJ {
width:790px; text-align:right; font-size:9px;
}

Bonsoir Skaemp :) C'est parfait pour le deuxième code, je vous remercie ♥ Concernant le premier, je ne rencontre qu'un léger soucis : il n'y a plus d'espace entre les images des top-sites. Est-ce normal ? Et avez-vous besoin de mon css complet ?

Remplacez :

Code:: /* IMAGES TOP-SITES */
.voteQEEL {
margin-top:10px; width:125px;
}
.voteQEEL a:nth-child(2) {
margin-left:5px;
}
.voteQEEL a:nth-child(3) {
margin-top:5px;
}
.voteQEEL a:nth-child(4) {
margin-top:5px; margin-left:5px;
}

Par :

Code:: /* IMAGES TOP-SITES */
.voteQEEL {
margin-top:10px; width:125px; line-height:4px;
}

Remplacez :

Code:: <div class="voteQEEL"><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a></div></div><div class="boxQEEL">

Par :

Code:: <div class="voteQEEL"><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><a style="margin-left:5px;" href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><br/><br/><a href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a><a style="margin-left:5px;" href="lien" target="_blank"><img src="http://www.aht.li/2860873/6060C.png" /></a></div></div><div class="boxQEEL">

Superbe, maintenant tout fonctionne à merveille. Infiniment merci Skaemp et je suis désolé de ce léger retard de réponse, je n'étais pas disponible avant :s

Sinon, pouvez-vous me dire d'où venait le problème ? Je vous avoue être assez curieuse :o (enfin, si cela ne vous déranges pas de me l'expliquer, sinon zappez ma question :) )

L'application du CSS diffère selon les navigateurs ; un visuel optimal sur Firefox ne le demeure nécessairement sur Chrome.