Image de fond des titres + espacement {L_LASTPOST}

Page 2 sur 3 Précédent  1, 2, 3  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Dim 15 Jan 2012 - 3:58

Rappel du premier message :

Bonsoir !

Après avoir réecrit une bonne partie de mon CSS avec dur labeur, je viens vous voir ( parce que je suis accro' à vous ! ) parce que je souhaiterais avec une image de catégorie.
Comment ça elle sait pas rajouter une image catégorie ?!
Attendez attendez! En ajoutant une image qui est une fleur par exemple, je ne vois qu'un pétale. Ce que je souhaiterais, c'est que mon image fasse cela :



Et comme vous le voyez, je souhaiterais aussi un espacement de la catégorie {L_LASTPOST}.
J'ai tenté par tout les moyens que je connais en le mettant en <br><tr isolé> et j'en passe...

Merci d'avance à celui, celle ou ceux qui m'aideront!
-> Je ne demande pas un code tout fait mais aussi des explications pour apprendre ! ::fete:: <-
( http://lanfear.forumactif.com )

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Mar 24 Jan 2012 - 7:35

Up. Mr. Green

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 9:17

Hiiiiiiiiiiiiiiii, trop eu de travail ces derniers temps, d'où un "léger" retard...

Reprenons.

Les trois url image me paraissent être quasi les mêmes images.
En fait, je ne comprends pas (ou plus) où tu voudrais ces images.

Si c'est pour séparer des catégories, voilà ce que je te propose :
1°- Compresser les catégories sur l'index en "Moyen" >> Affichage >> Structure et Hiérarchie
2°- Dans le template index_box, créer une nouvelle ligne "tr" avant celle des 3 colonnes (td) des forums:
Code:
<!-- BEGIN forumrow -->
<tr>
<td colspan="3" align="center"><img src="http://img543.imageshack.us/img543/9493/bloque.png" border="0" alt="spacer" /></td>
</tr>
 
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->

<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
 
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> 
<table class="indexfofo" align="center" width="100%"><tr>
<td valign="top" width="100%" height="50"> 
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td></tr></table>
</td>

<td>
<table align="center" class="lastmessopac" style="width: 200px; margin-left: 10px;"><tr><td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td></tr></table>
</td>

</tr>
<!-- END forumrow -->

C'est bien ce que tu voulais ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 9:47

C'est exactement ce que je voulais à l'exception près que les images sont les icones qui permettent de dire si il y a un nouveau message, un message bloqué ou pas de nouveaux messages. En somme, les icones jaunes que tu vois à côté des catégories, j'aimerais qu'elles soient remplacés par les images au dessus des catégories. Si elles ne sont pas assez différentes , c'était simplement pour un exemple ! ^^

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 10:17

Oui, je venais de comprendre (lente avec ça !).
En plus, il y a une erreur dans la fusion des colonnes "colspan".

Alors essayons ainsi :
Code:
<!-- BEGIN forumrow -->
<tr>
<td colspan="3" width="100%" class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
</tr>
 
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
 
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> 
<table class="indexfofo" align="center" width="100%"><tr>
<td valign="top" width="100%" height="50"> 
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td></tr></table>
</td>

<td>
<table align="center" class="lastmessopac" style="width: 200px; margin-left: 10px;"><tr><td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td></tr></table>
</td>
Ici nous avons fusionner les 3 colonnes restantes dans celle "folder", que nous avons remonter dans la ligne créée précédemment.

- Là, il faut que tu mettes tes images dans les champs >> Icônes du forum
- Ensuite, dans Général >> Messages et Emails > Configuration > Afficher la légende des statuts des messages : Non

EDIT : Il faut supprimer le colspan="3" du td "folder". Bien que Opera et Firefox l'acceptent, Google Chrome souligne l'erreur, lui ! C'est en effet une erreur.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 10:56

C'est exactement ça ! Mais petit souci ... Il y a un encadré autour de l'image qui déforme en quelque l'esthétique.



kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 11:12

As-tu lu mon EDIT plus haut ?

Oui, là il faut ajouter un peu de CSS.
Tout d'abord, ajouter un identifiant au class déjà existant de la cellule "folder" :
<td width="100%" class="{catrow.forumrow.INC_CLASS} myfolder" align="center" valign="middle">
Dans le CSS on reprend en supprimant ce que l'on ne veut pas et qui se trouve dans la variable du premier "class" comme:
td.myfolder {
background: transparent;
width: auto;
border: none;
padding: 3px;
margin: 3px auto;
box-shadow: none;
}

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 11:16

Apparemment ça ne marche pas ...
Sinon oui j'ai lu ton EDIT et j'ai supprimé !

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 11:36

Peux-tu redonner le CSS que tu as mis concernant cette partie du forum ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 11:37

Code:
.lastmessopac {
opacity : 0.6;
-moz-opacity : 0.6;
-khtml-opacity: 0.6;
-ms-filter: "alpha(opacity=60)"; /* IE 8 */
filter : alpha(opacity=60); /* IE < 8 */
transition: opacity 1.7s linear;
-moz-transition: opacity 1.7s linear;
-o-transition: opacity 1.7s linear;
-webkit-transition: opacity 1.7s linear;
-htm-transition: opacity 1.7s linear;
}
.lastmessopac:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
-webkit-transition: opacity 0.5s ease-in;
-htm-transition: opacity 0.5s ease-in;
}

td.myfolder {
background: transparent;
width: auto;
border: none;
padding: 3px;
margin: 3px auto;
box-shadow: none;
}

Voilà le contenu du CSS concernant cette partie !

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 11:41

Quand je dis "cette partie", je veux dire toute la partie des forums sur l'index.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 11:42

En gros, rajouter "myfolder" dans toutes le HTML concernant les folder?

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 11:46

Nenni, que nenni.

Je veux tout le CSS concernant toute la partie des sections sur l'index.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 11:53

Bah euh... C'est que mon CSS je m'y perd facilement... T_T ...

Spoiler:
.postdetails.poster-profile a img {
width:160px;
height:220px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 4px solid #101A24;
}
/* boite connexion Tchatbox */

.bouton_ouverture{ /* se connecter (partie texte)*/
font-family:Verdana, Helvetica, sans-serif;
text-align: center;
font-size: 14px;
text-decoration: none !important;
color: #70a400 !important;
uppercase: 1px;
text-shadow: 5px 0px 5px #000000;
}
.bouton_ouverture:hover { /* se connecter (partie texte) au survol */
color: #9de00c !important;
uppercase: 2px;
text-decoration: none !important;
text-shadow: 10px 0px 10px #000000;
}
.bouton_ouverture{ /* est le bouton se connecter */
background: url(https://i47.servimg.com/u/f47/12/57/30/22/mm1211.jpg) #31185C center ;
width: 120px;
height: 25px;/min-height: 10px;
border: 1px solid #707070;
border-top: 0px;
display: block;
margin: 0 auto;
padding: 4px;
-webkit-border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
-moz-box-shadow: 0px 1px 5px #000000;
-webkit-box-shadow: 0px 1px 5px #000000;
box-shadow: 0px 1px 5px #000000;
}

/** _______________________________________TB **/

#chatbox{
background-color: #trans;
border: 1px solid #couleur;
}

#chatbox_header{
background-color: #couleur;
background-image: url();
border: 1px solid #couleur;
}

#chatbox_members{
background-color: #couleur;
background-image: url(http://img338.imageshack.us/img338/892/fondforumb1.png);
border: 1px solid #couleur;

}

.chatbox-title{
font: 18px Arial;
color: #ffffff !important;
}

body.chatbox {
background-image: url(http://img828.imageshack.us/img828/4965/fondforumb1g.png);}

#chatbox_members .member-title{
background-color: #couleur;
background-image: url(http://img19.imageshack.us/img19/892/fondforumb1.png);
border: 1px solid #couleur;
}

#chatbox .chatbox_row_1 {
background-color: transparent;
}

#chatbox .chatbox_row_2{
background-color: transparent;
}

#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: " Manoir de la guilde Lanfear"; }



#chatbox, .post{
background-color: transparent;
border: url(http://img19.imageshack.us/img19/892/fondforumb1.png);
text-align: left;

}

/** ______________________________Couleur du texte forum **/

.postbody{
color: #ffffff}

/** _________________________Couleur de la barre de séparation **/

hr {
clear: both;
width: 95%;
border: 0; /* enleve toute bordure */
border-bottom: 1px darkred solid; /* une seule bordure (sinon firefox met une bordure en haut ET en bas mais pas IE */
height: 1px; /* pour IE */
}

/** TCHATBOW **/


.quote, .code{
background-color: #trans;
border: 2px dotted #E77980;
-moz-border-radius: 11px;
border-square: 11px;
-webkit-border-radius: 11px;}

.lastmessopac {
opacity : 0.6;
-moz-opacity : 0.6;
-khtml-opacity: 0.6;
-ms-filter: "alpha(opacity=60)"; /* IE 8 */
filter : alpha(opacity=60); /* IE < 8 */
transition: opacity 1.7s linear;
-moz-transition: opacity 1.7s linear;
-o-transition: opacity 1.7s linear;
-webkit-transition: opacity 1.7s linear;
-htm-transition: opacity 1.7s linear;
}
.lastmessopac:hover {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
-webkit-transition: opacity 0.5s ease-in;
-htm-transition: opacity 0.5s ease-in;
}

td.myfolder {
background: transparent;
width: auto;
border: none;
padding: 3px;
margin: 3px auto;
box-shadow: none;
}
/*----------------------------------------image angles -------*/
.imgbas1 {
background:transparent url(http://img7.imageshack.us/img7/6011/pilliergauche.png)
background-repeat : no-repeat;
width : 320px;
height : 1000px;
position : fixed;
bottom : 0px;
left : -10px;
}
.imgbas2 {
background:transparent url(http://img839.imageshack.us/img839/6885/pillierdroite.png);
background-repeat : no-repeat;
width : 320px;
height : 1000px;
position : fixed;
bottom : 0px;
right : -10px;
}

/*----------------------------------------image droite-------*/


/*--------------------- code CSS pour centrer les titres des categories ****/
a.cattitle {
display:block;
text-align:center;
}

/*---------------------------------------OMBRE AUTOUR DU CADRE FORUM----------------- ****/

.row1{
box-shadow: 0px 0px 10px #BFB4B5;
-moz-box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-o-box-shadow: 0px 0px 10px #BFB4B5; /*Opera + version 9 bien qu'il le lise, mais c'est valable pour le CSS3* hormis le radius*/
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome, Safari, Opera */
border-radius: 10px; /* Opera et format standard */
}
.row2{
-moz-box-shadow: 0px 0px 10px #BFB4B5;
box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-o-box-shadow: 0px 0px 10px #BFB4B5;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Chrome, Safari, Opera */
border-radius: 20px; /* Opera et format standard */
}
.row3{
-moz-box-shadow: 0px 0px 10px #BFB4B5;
box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-o-box-shadow: 0px 0px 10px #BFB4B5;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Chrome, Safari, Opera */
border-radius: 20px; /* Opera et format standard */
}
.row3Right{
-moz-box-shadow: 0px 0px 10px #BFB4B5;
box-shadow: 0px 0px 10px #BFB4B5;
-webkit-box-shadow: 0px 0px 10px #BFB4B5;
-o-box-shadow: 0px 0px 10px #BFB4B5;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Chrome, Safari, Opera */
border-radius: 20px; /* Opera et format standard */
}

/* ------------------------Banderole qui défile avec le texte de bienvenue. */
.catHead {
-moz-border-radius: 15px;
-webkit-border-radius:15px;
border-radius: 15px;
}
/*-----------------------------------------couleur zone de texte-------*/

input, select, textarea {
background-color: #140C01;
}

/*-------------------------------------------FOND ENCRAN-------*/

body{

background-repeat: no-repeat;
background-position: top center;}

/*------------------------Position de la barre de navigation ( monter ou descendre )-------*/

#i_logo {

margin-bottom: 0px;
margin-top: -200px;
}

.barre_nav{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
z-index: 999;}

table.bodylinewidth {
position:relative;
top: -7px;
}

/*-----------------------------------------QEEL-------------------------------------------------*/
.qeel_start{
background-image: url(http://img812.imageshack.us/img812/3290/qeelb.png);
border:0px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
height: 300px;
}
.groupes{
background-color:#000000;
opacity: .7;
border: 1px #8c8c8c dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;
padding-left:14px;
padding-bottom:3px;
font-size:15px;
font-weight: bold;
text-align:center;
text-decoration: none !important;
}

.colo{
border:1px
solid black;
width:900px;
-moz-box-shadow: 1px 1px 12px #F00000;
-webkit-box-shadow: 1px 1px 12px #BABABA;
box-shadow: 1px 1px 12px #BABABA;
margin-left:20px;}

/* ----------------------------------------LIEN OMBRE------------------------------------------------ */

a:hover { text-decoration: !important;
text-shadow: 3px 1px 10px #000000; }


.forumlink {text-shadow: #ffffff 3px 1px 10px;}
a.forumlink {text-shadow: #ffffff 3px 1px 10px;}
a.forumlink:hover {text-shadow: #BF5858 3px 1px 10px;}

{text-shadow: #ffffff 1px 3px 10px;}
a.forumlink {text-shadow:#ffffff 3px 1px 10px;}
a.forumlink:hover {text-shadow: #ffffff 3px 1px 10px;}

/*------------------------ -------------mots en gras ombrés---------------------------------------*/
i {
text-shadow: 1px 1px 10px #000000;
}

/*--------------------------------------- Liens ombrés--------------------------------------------------*/
a:link {
position: relative;
text-decoration:none;
text-shadow: 3px 1px 10px #000000;
}

a:hover {
text-decoration: #F00000;
text-shadow: 3px 1px 10px #BF5858;
color: #BF5858;
}

.line{
background-color: #CF8D1B2;
}

/* ---------------------------------Retrait du soulignement ---------------------------------- */
a
{
text-decoration: none;
}

a:active
{
text-decoration: none;
}

a:hover
{
text-decoration: none!important;
}

a.mainmenu:hover
{
font-size: 13px;
text-decoration:none!important;
}

.forumlink
{
text-decoration: none;
}


a.forumtitle
{
text-decoration:none;}


/*----------------------------------- Transparence des coins -------------------------------*/

.thLeft {border: 0px solid transparent !important; background-color:transparent !important;}
.thRight {border: 0px solid transparent !important; background-color:transparent !important;}
.thCornerL {border: 0px solid transparent !important; background-color:transparent !important;}
.thCornerR {border: 0px solid transparent !important; background-color:transparent !important;}
.thTop {border: 0px solid transparent !important; background-color:transparent !important;}
.catBottom {border: 0px solid transparent !important; background-color:transparent !important;}
.catHead {border: 0px solid transparent !important; background-color:transparent !important;}


/*------------------------------------------\* navig rapide /*------------ -------------------*/
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
z-index:999

}

#menu {
width:15em;
z-index:999
bottom: 0; left: 0;
position: fixed;
z-index: 90;
width:170px
background-color: #4B3659}

#smenu1 ul{
width:170px;
}

#menu dt {
cursor: pointer;
margin: 0px 0px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid gray;
z-index:999
}


#menu dt:hover{
box-shadow:0 0 20px rgba(255,255,255,0.Cool;
}

#menu dd {
border: 1px solid gray;
display: none;
z-index:999
width:170px}

#menu li {
text-align: center;
font-family: Verdana;
color: #ffffff
font-size: 80%;
z-index:999
width:170px
}

#menu li a, #menu dt a {
font-size: 75%;
text-decoration: none;
display: block;
border: 0 none;
z-index:999
}

#menu li a:hover, #menu dt a:hover {
color: #BB8888;
text-shadow: 1px 1px 10px #BFB4B5;
}

.cadre{
width:15em;
padding: 2px;
list-style-type: none;
position: fixed;
z-index:999}

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 12:02

Tout d'abord, il faut absolument que tu regroupe les codes entre eux par endroits où ils agissent.
cela dit, je ne comprends pas, parce que chez moi le code est bon, et me supprime bien tout.

Essaie de mettre le code à la fin de la feuille de style CSS...



EDIT : Donne aussi la partie du template là où commence et fini "forumrow". Tu dois avoir des class que je n'ai pas mis chez moi.


Dernière édition par Final-Blonde le Lun 30 Jan 2012 - 12:08, édité 1 fois

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 12:04

Faudrait-il que je me souviens où agissent les codes... :'(
Sinon, non ça ne fonctionne pas...

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 12:09

Up, j'ai édité en même temps que toi. Mr. Green

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 12:11

C'est malin ! Baston

Code:
<!-- BEGIN forumrow -->
        <tr>
        <td width="100%" class="{catrow.forumrow.INC_CLASS}" myfolder" align="center" valign="middle">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
        </td>
        </tr>
       
        <tr>
        <!-- BEGIN inc -->
        <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
        <!-- END inc -->
       
        <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <table class="indexfofo" align="center" width="100%"><tr>
        <td valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
        <span class="forumlink">
        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
        </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
        <!-- BEGIN switch_moderators_links -->
        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
        <!-- END switch_moderators_links -->
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
        </td></tr></table>
        </td>
       
        <td>
        <table align="center" class="lastmessopac" style="width: 200px; margin-left: 10px;"><tr><td class="row3 over" align="center" valign="middle" height="100">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
        </td></tr></table>
          </td></tr><!-- END forumrow -->

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 12:38

Nope, je ne vois rien qui devrait interféré avec le code css que je t'ai donné précédemment... Grrr
Bizarre que chez moi ça fonctionne et pas chez toi.

Bon, essayons de supprimer le premier identifiant de la cellule "folder" :
Ah mais euuuuh !!!
Tu n'as pas mis d'espace entre le premier identifiant et le second, en revanche tu as ajouté un espace entre le guillemet de gauche qui ne doit pas être, et le deuxième identifiant. Les deux identifiants sont entre les mêmes guillemets. Il suffisait de copier-coller mon code pourtant...
Essaie avec le bon code :
Code:
<td width="100%" class="{catrow.forumrow.INC_CLASS} myfolder" align="center" valign="middle"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 12:41

Ah bah je suis désolé !
C'est suuuuuuuuuuuuper !!!!! C'est exactement ça que je voulais !!!!!

Par contre d'être chieuse mais... N'y-a-t-il pas la possibilité de centre le folder sur les deux catégories ? Je parle bien entendu du last_post et du row 1

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 13:26

Là je ne vois pas pour l'instant, à part agir sur le margin de l'identifiant "myfolder" dans le CSS.

Ce qui devrait faire l'affaire c'est une fusion de cellules, mais je ne sais pas pourquoi, Google décale alors les cellules à chaque ligne...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 13:27

Hum je vois... Penses-tu que le décalage du margin fera l'affaire ?

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 14:05

Oui, il faut ajouter du margin-left et un display: block;:

Je vais encore voir avec ce colspan que Google refuse, mais là j'ai encore du boulot pour quelques heures.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 14:27

Pas de soucis, je t'attend sagement !
Par contre le margin-left est bien à mettre en CSS ?

PS : Par ailleurs, aurait-on la possibilité de rapproché un peu plus les images folder du cadre de la catégorie ?

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 20:48

Pour coller les images au cadre, supprime le padding et réduis le margin :
3px auto; veut dire top et bottom à 3px, right et left auto=centré
ceci n'est valable que si l'on attribue une largeur (width), même une largeur auto.

Ayé, j'ai trouvé pour le "colspan" sans en avoir besoin.
En fait, il faut que nous mettions chaque partie dans un tableau :
Le haut, les images "folder", le reste :
Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table align="center" width="100%" border="0" cellspacing="1" cellpadding="0"><tr style="display: none;">
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="150">{L_TOPICS}</th>
<th nowrap="nowrap" width="50"><div style="width: 50px";>{L_LASTPOST}</div></th>
</tr>
<!-- END tablehead -->
 
<!-- BEGIN cathead -->
<tr> 
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="40"><img src="{SPACER}" height="0" width="40" /></td>
<!-- END inc -->
 
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle"><a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a></span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"><div style="width:120px;"> </div></td>
</tr></table>
<!-- END cathead -->

<!-- BEGIN forumrow -->
<table align="center" border="0" cellspacing="1" cellpadding="0"><tr>
<td align="center" valign="middle">
<table class="myfolder" align="center" border="0" cellspacing="1" cellpadding="0"><tr><td width="818" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td></tr></table>
 
<table width="100%" align="center" border="0" cellspacing="1" cellpadding="0"><tr>
<td class="row1 over" valign="top" width="100%" height="50"> 
<table class="indexfofo" align="center" width="100%"><tr>
<td valign="top" width="100%" height="50"> 
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td></tr></table>
</td>

<td>
<table align="center" class="lastmessopac" style="width: 200px; margin-left: 10px;"><tr><td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td></tr></table>
</td>
 
</tr>
<!-- END forumrow -->
 
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
 
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> 
</tr>
<!-- END catfoot -->
 
<!-- BEGIN tablefoot --> 
</table>
 
<img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot -->
 
<!-- END catrow -->
On a aussi supprimé le colspan-variable de la description des forums, et le "spacer" qui se trouvait avant.

Dans le CSS :
.myfolder {
display: inline-block;
background: transparent;
box-shadow: none;
width: 818px;
margin: 1px auto;
border: none;
}

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Lun 30 Jan 2012 - 20:58

Niquel pour le décalage ! Je me demande ce que je ferais sans toi Final xD...
Sinon, impossible de coller l'image au cadre...

Mauvaise manip' dans mon CSS ou c'est autre chose ? Parce qu'avec -100, par exemple, de margin, il ne se passe rien. Puis, en fait, il y a eu une mésentente dés le départ je pense : Les images peuvent-t-elle se mettre UNIQUEMENT en catégorie sans être coupées par le fond des titres gauche, puis droite ?

Snifff

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Lun 30 Jan 2012 - 21:13

Peux-tu laisser ton forum tel quel avec les modifs le temps que l'on finisse.
Je me rends mieux compte si je vois le forum, que les images ou les explications.

Pour ce qui des images collées aux forums, as-tu bien modifié ainsi ?
.myfolder {
display: inline-block;
background: transparent;
box-shadow: none;
width: 818px;
margin: 1px auto -10px; /*top 1px, right et left auto, bottom -10px*/
border: none;
}
Si ce n'est pas bon, il faut que tu vérifies avec les class des autres cellules "forum" et "dernier message" qu'il n'y ai pas de margin top ou bottom.

Pas du tout compris pour le deuxième point...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Mar 31 Jan 2012 - 7:32

Effectivement, après vérification des codes tout allait bien. Il fallait sincèrement que je range mon CSS par tranche de template pour mieux m'y retrouver. Voilà une bonne chose de faite !

Pour le deuxième point, tu sais qu'il y a les catégories qui, généralement, est un en-tête pour la suite des forum qui suit comme l'exemple suivant :

" Nom de la catégorie "
- Charte
- Présentations
- Recrutements

Je me demandais donc : Comment pourrait-on faire pour que les fleurs, qui prennent toute la largeur du forum, viennent en titre des catégories sans être coupé par la séparation du Row1 et du row3/row3:over ?

kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Mar 31 Jan 2012 - 10:04

Je crois que je n'ai pas encore capté (je balise grave aujourd'hui) ce que tu veux.
Parles-tu des liens dans les forums et ensuite dans les sections ?
Tu voudrais au lieu des titres-texte les fleurs, ou bien les masquer ?

Je crois qu'un schéma s'impose.

J'ai constaté un petit défaut avec la fleur de droite sur le last_post qui avec l'effet de transparence passe derrière la cellule...
Pour y remédier, essayons d'ajouter un z-index au tableau déjà :
.myfolder {
display: inline-block;
background: transparent;
width: 818px;
border: none;
margin: 1px auto -10px; /*top 1px, right et left auto, bottom -10px*/
box-shadow: none;
z-index: 1;
}
Si cela ne suffit pas, il faudra aussi essayer de l'ajouter à l'image :
.myfolder img {
z-index: 2;
}
Si ce n'est toujours pas bon, alors il faudra ajouter le même fond que le forum afin de donner le change.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par kakale le Mar 31 Jan 2012 - 10:26


kakale
****

Féminin
Messages : 395
Inscrit(e) le : 28/10/2009

http://lanfear.forumactif.com/
kakale a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres + espacement {L_LASTPOST}

Message par Final-Blonde le Mar 31 Jan 2012 - 10:51

C'est dans une catégorie, c'est ça ? (peux-tu ouvrir la première catégorie et le premier forum, histoire de voir en vrai ?)

Je n'ai pas de cadre chez moi, là aussi...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 3 Précédent  1, 2, 3  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum