Encadrer « Derniers Message »

[*angiesworld*]

Avant tout.. Bien le bonjour à vous.
Ce message parce que je rencontre un petit problème vis-à-vis de ce que je voudrais.
En effet j’aimerai encadrer la cellule « Derniers messages » comme sur ce forum : http://douceolympe.1fr1.net/

En modifiant le template Index_box et le CSS, j’ai réussi à faire à peu prés ce que je voulais.
Or comme vous le constaterez le Nombre de Messages et Sujets ne sont pas intégrés dans le cadre en question..


Dans le Template Index_box j’ai modifié :


Puis dans ma fiche CSS j’ai ajoutée ce code :


Je ne sais pas si j'y arriverai mais merci par avance à tout ceux qui tenteront de m'aider.
Amicalement, Angie

[SoraNoHime]

Coucou

puis-je ravoir votre index_box complet

Cordialement

Ps : C'est moi qui est fait celui de ce forum en plus ^^

[*angiesworld*]

Comme on se retrouve.. Les grands esprits se rencontrent.. Encore. Lol
Bon « grands », pour mon cas, c’est pas tellement ça.. Mais tu m’as comprise.. Enfin je suppose quoi.

Voila le fameux Index_Box.

PS: Ah oui?! Ah bah je suis tombée sur la personne qu’il fallait dans ce cas.. Héhé
La chanceuse que je fais..

[SoraNoHime]

Repérez ceci ^^

Code:

        <td class="row3 over" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.TOPICS} Sujets || {catrow.forumrow.POSTS} Messages</span>

    <br/>
        <span class="gensmall"><div class="arrondi">{catrow.forumrow.LAST_POST}</div></span>
              </td>

déplacez tout betement votre div "arrondi"

Code:

        <td class="row3 over" align="center" valign="middle" height="50"><div class="arrondi">
                <span class="gensmall">{catrow.forumrow.TOPICS} Sujets || {catrow.forumrow.POSTS} Messages</span>

    <br/>
        <span class="gensmall">{catrow.forumrow.LAST_POST}</div></span>
              </td>

Petit plus, si vous désirez que vos derniers sujets soient moins regroupés, rajoutez ceci dans votre css :

Code:

    .arrondi {
    border: 2px solid #a49896;
    background-color: #FFFBAB;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomleft: 6px;
width: 150px;}

Cordialement ^^

[*angiesworld*]

Ah Génial.. J’adore!

Mais comment on fait pour, comme le montre l’exemple du forum donné précédemment, différencier le Nombre de Messages et Sujets à celui du poste du Derniers Message.
Ce que je veux dire, c’est que sur l’exemple donné, on les voit se diverger par 2 cadres différents en plus d’être séparé par un petit trait blanc.
S’agit t il vraiment de 2 cadres différents qu’on aurait « collé » ou s’agit il du même cadre mais avec un design différencié?!
J’aimerai pouvoir diverger mon cadre ainsi.
Bon pas totalement comme celui la hein.. Les bordures ne seront sûrement pas les mêmes ni la couleur.. Mais vis-à-vis de la structure générale plutôt..

[SoraNoHime]

Il s'agit de deux cadres différents oui ^^. Faites ainsi :

Code:

            <td class="row3 over" align="center" valign="middle" height="50"><div class="messuj">
                    <span class="gensmall">{catrow.forumrow.TOPICS} Sujets || {catrow.forumrow.POSTS} Messages</span></div>
            <span class="gensmall"><div class="arrondi">{catrow.forumrow.LAST_POST}</div></span>
                  </td>

et en css :

Code:


        .messuj {
        border: 2px solid #a49896;
        background-color: #FFFBAB;
        -moz-border-radius-topleft: 6px;
        -moz-border-radius-topright: 6px;
        width: 150px;}

        .arrondi {
        border: 2px solid #a49896;
        background-color: #FFFBAB;
        -moz-border-radius-bottomright: 6px;
        -moz-border-radius-bottomleft: 6px;
    width: 150px;}

Adapter ensuite à vos besoin ^^

[*angiesworld*]

Whaoo.. J’en perds les mots.
Merci encore une fois pour tout ça! ^_^

J’aurais encore un ptit truc à demander et après j’arrête d’embêter.
Je voulais savoir comment faire pour que l’encadré soit plus « large ».. Je ne veux pas dire par la que je le veux plus « grand » mais plus « profond..
Comment dire?!
Qu’il gagne un peu en hauteur pour que l’écris soit plus espacé à l’intérieur.
J’sais pas si ce que je dis est très compréhensible -_-"

[SoraNoHime]

essaie de placer ceci dans ta css .

padding : 5px

ajuste au besoin ^^

[*angiesworld*]

J’ai ajoutée à mon code CSS, ce qui donne donc :

Code:

.messuj {
border: 1px solid #a49896;
background-color: #FFFBAB;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
padding : 5px
width: 150px;}

.arrondi {
border: 1px solid #a49896;
background-color: #FFFBAB;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
padding : 5px
width: 150px;}

Mais je ne sais pas si cela a ponctionnée vu que l’encadré s’est « rétracté ». Il a rétréci de largeur.. =//
http://becrazy.forumactif.org/
Aurais je fait une faute dans le codage?! Possible..

Puis pour ce qui est de la couleur des encadré.. Comment ça se passe?!
Ca se modifie toujours par le biais des « Couleurs » ou il faudra passer par le CSS?!

[SoraNoHime]

.messuj {
border: 1px solid #a49896;
background-color: #FFFBAB;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
padding : 5px;
width: 150px;}

.arrondi {
border: 1px solid #a49896;
background-color: #FFFBAB;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
padding : 5px;
width: 150px;}

Pour séparer des codes css toujours mettre ";" à la fin.

[*angiesworld*]

La fille pas douée se fait sentir xD
Merci donc pour la rectification.

Mais concernant le changement de couleur.. Comment ça se passe?!

[SoraNoHime]

la couleur des encadrés ce fait par les codes css quoiqu'il arrive.

Je vous invite à parcourir ceci ^^ Les Codes CSS et leurs propriétés

Vous y trouverez la plupart des codes correspondant aux changements en design dont ceux de vos encadrés

Cordialement.

[*angiesworld*]

Le Boulet. -_-"
background-color Pend sous mon nez.
En plus je le savais puisque j’ai modifiée bon nombre de couleur par le biais de la page CSS.
Des fois j’refléchi vraiment pas.. (On ne demande pas de confirmation tention! xD)

Quoiqu’il en soit.. Histoire de me répéter. Merci encore pour toute l’aide apportée!
Vraiment ♥

[SoraNoHime]

Je vous en prie, bonne journée

[*angiesworld*]

Bonne Journée..
Et peut etre à une prochaine fois qui sait..
Enfin, me connaissant, je ne vous le souhaite pas en tout cas. Lol

Avec Respect et Amitié.
Angie