Code CSS

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

Résolu Code CSS

Message par Luuucee Sam 12 Mar 2011 - 12:10

Bonjour Smile.

Je remercie d'avance ceux qui répondront à ce sujet pour m'aider !
Je suis sous Phpbb2, le lien de mon forum est disponible sur mon profil si besoin.

Je navigue sous Google Chrome (Mac) et je suis la fondatrice du forum.
Je tiens à préciser que je ne m'y connais pas du tout en CSS donc si vous pouviez détailler les réponses ça serait sympa, merci Smile.

J'ai utilisé de nombreux tutoriels sous pleins de forums différents mais j'ai quand même quelques petits soucis pour m'y retrouver :S.

J'ai modifié le template Index_box, le voici :

Spoiler:

ainsi que viewtopic_body, que voici (mais je ne sais plus ce que j'avais modifié, je m'étais servie d'un tuto) :

Spoiler:

Et voilà mon Code CSS :
Code:
a {
text-decoration: none;
text-transform: uppercase;
text-align: center;
}

a:hover {
text-decoration: none !important;
border-bottom: 1px dotted}

text-transform:uppercase;
a.forumlink {
border-bottom: 1px #B32B34 dotted;
}


/*contour des catégories*/
.forumline{
      background-color: #;
border: 1px white solid;
-moz-border-radius-bottomleft: 28px;
-moz-border-radius-bottomright: 28px;
-moz-border-radius-topleft: 28px;
-moz-border-radius-topright: 28px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 5px;
border: 5px solid #935838;
border-top-left-radius: 28px 28px;
border-top-right-radius: 28px 28px;
border-bottom-right-radius: 28px 28px;
border-bottom-left-radius: 28px 28px;
}

/*titres des forums*/
.titresfora{
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      border: 1px solid #000;
      font-size: 11px;
      height: auto;
      padding: 3px;
      position: static;
      text-align: center;
      width: 200px;}


/*description dans les forums*/
.forum-description {
      margin: auto;
      padding: 10px;
      color: #000000;
      border: 1px solid #000;
text-align: center;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      font-size: 12px;
      }

/*derniers messages*/
.forum-stats {
      -moz-border-radius: 20px;
      webkit-border-radius: 20px;
      border-radius: 20px;
      border: 1px solid #000;
      font-size: 11px;
      padding: 3px;
      text-align: center;
      }

.bodyline {
background-color: #;
border: 1px white solid;
-moz-border-radius-bottomleft: 28px;
-moz-border-radius-bottomright: 28px;
-moz-border-radius-topleft: 68px;
-moz-border-radius-topright: 68px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 5px;
border: 5px solid #935838;
border-top-left-radius: 68px 68px;
border-top-right-radius: 68px 68px;
border-bottom-right-radius: 28px 28px;
border-bottom-left-radius: 28px 28px;
}


/*cadre des citer*/
.quote {
border: 2px white solid;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

/*cadre des liens des forums*/
span.forumlink {
display: block;
text-align: center;
background-image : url(http://i63.servimg.com/u/f63/14/73/13/17/talach11.jpg);
border-left:9px solid #;
border-right:9px solid #;
margin: 4px;
}

/*cadre de la description des forums*/
.genmed {
display: block;
text-align: center;
border: 2px white solid;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
margin: 4px;
}

Donc mon problème ce sont des détails (ne faites pas attention aux couleurs, j'ai pas du tout fini le design xD)
Les angles débordent sur la partie ronde en haut à gauche et à droite, ainsi que l'encadré des titres des catégories, que j'aimerais placé au centre de la barre (de l'image), comme ça là ça ne "déborderait" plus.
Code CSS Captur10

Ensuite, dans l'encadré où il y a des liens des images (que j'enlèverais, je faisais un test) j'aimerais y placer les "2 messages, dans 2 sujets.." ainsi que les liens des sous-forums, et au centre, avec l'image au dessus. J'vous ai fait un rapide schéma pour que ça soit clair :

Code CSS Sans_t19

C'est assez moche, je sais, excusez-moi… mais je l'ai fais vite ^^, juste histoire d'illustrer.

J'espère que je me suis faite comprendre Smile.
Merci à ceux qui répondront !


Luce.


Dernière édition par Luuucee le Mar 15 Mar 2011 - 20:36, édité 3 fois
Luuucee

Luuucee
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 12/03/2011

http://sixteenyearsold.forumsactifs.net/
Luuucee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS

Message par Invité Sam 12 Mar 2011 - 19:57

Bonsoir,

J'ai obtenu ceci:
Code CSS Captur27

En modifiant votre template index-box comme ceci:
Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
      <tr>
          <td valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <span class="gensmall">{LAST_VISIT_DATE}

            {CURRENT_TIME}

            </span>
            <!-- END switch_user_logged_in -->
            <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

            <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

            <!-- END switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
      </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
            <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">{catrow.tablehead.L_FORUM}</th>
            </tr>
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></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"> </td>
      </tr>
      <!-- END cathead -->
        <!-- BEGIN forumrow -->
        <tr>
            <!-- BEGIN inc -->
            <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
            <!-- END inc -->
          <!-- [ DÉBUT DES MODIFICATIONS ] -->
            <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50" align="center">
                        <table width="100%"><tr><td colspan="3" align="center"><span class="forumlink"><center><div class="titresfora">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                    </div></span></center></td></tr>
               
<tr><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="forum-description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</td>
<td class="forum-stats" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </td></tr></table></span>
    </div>
    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<br />
    <span class="gensmall">{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.<br />
            <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
            </span>
          </td>
          <!-- BEGIN forum_link_no -->
    <!-- [ FIN DES MODIFICATIONS ] -->
            <!-- END forum_link_no -->
            <!-- BEGIN forum_link -->
            <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
            <!-- END forum_link -->
        </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 -->
Et votre feuille CSS, comme ceci:
Code:
/*liens*/
a {
      text-decoration: none;
      text-transform: uppercase;
      text-align: center;}

a:hover {
      text-decoration: none !important;
      border-bottom: 1px dotted;
      text-transform:uppercase;}


/*contour des catégories*/
.forumline{
      border: 5px solid #935838;
      border-radius: 28px;
      -moz-border-radius: 28px 28px 8px 8px;
      -webkit-border-radius: 28px 28px 8px 8px;}


/*description dans les forums*/
.forum-description {
      margin: auto;
      padding: 10px;
      color: #000;
      border: 1px solid #000;
      text-align: center;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      border-radius: 14px
      font-size: 12px;
      width: 75%;}

/*cadre de la description des forums*/
.genmed {
      text-align: center;
      border: 2px white solid;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      margin: 4px;}

/*derniers messages*/
.forum-stats {
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      border: 1px solid #000;
      font-size: 11px;
      padding: 3px;
      text-align: center;
      width: 20%;}

/*cadre du forum*/
.bodyline {
      border: 1px white solid;
      -moz-border-radius: 28px;
      -webkit-border-radius: 28px;
      border-radius: 28px;
      border: 5px solid #935838;
}


/*cadre des citer*/
.quote {
      border: 2px white solid;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
}

/*cadre des liens des forums*/
span.forumlink {
      display: block;
      background-image : url('http://i63.servimg.com/u/f63/14/73/13/17/talach11.jpg');
      margin: 4px;
      padding: 3px;}

.titresfora{
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      border: 1px solid #000;
      font-size: 11px;
      height: auto;
      padding: 3px;
      width: 200px;
      }

/*arrondis des titres de catégories*/
.secondarytitle{
      -moz-border-radius-topleft: 28px;
      -moz-border-radius-topright: 28px;
      -webkit-border-top-right-radius: 28px;
      -webkit-border-top-left-radius: 28px;
      border-top-right-radius: 28px;
      border-top-left-radius: 28px;}

Pour les images vous pouvez les placer dans la description de chaque forum, en utilisant le code suivant:
Code:
<img src="adresse de l'image" />

Il est impossible de déplacer la date, l'heure et le pseudo, tout cela n'est géré que par une seule variable.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS

Message par Luuucee Sam 12 Mar 2011 - 20:11

Merci d'avoir répondu, je vais immédiatement tester ça.

Pour le template de l'index-box, je le remplace entièrement par ce que vous m'avez donné ?

EDIT : Oulah, ça ne donne pas du tout le résultat voulu !
Voilà un screen de ce que ça me donne, une fois le template de l'index-box et le CSS remplacé :

Code CSS Captur22

Les "... messages dans ... sujets" s'est correctement placé, ainsi que les sous-catégories (j'en avais plus bas) donc ça c'est bon, mais les images ont été remplacé…

EDIT 2 : Ah le forum avait dut bugger, en rafraîchissant la page ça a changé (décidément) :

Code CSS Captur23

Ici, l'arrondi a disparu, et il y a un décalage pour la colonne de droite lorsque le titre du sujet est trop long ._.' et en plus le cadre autour des titres des catégories ne s'affiche pas, décidément… C'est bizarre, sur ton screen tout s'est bien mis pourtant !


Dernière édition par Luuucee le Sam 12 Mar 2011 - 21:45, édité 1 fois
Luuucee

Luuucee
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 12/03/2011

http://sixteenyearsold.forumsactifs.net/
Luuucee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS

Message par Invité Sam 12 Mar 2011 - 21:45

Bonsoir,

Je viens de tester avec google chrome et je n'ai pas de soucis d'affichage ...
Code CSS Captur28
J'ai vidé l'historique dans le doute, mais je ne rencontre pas de soucis.
Je suis vraiment désolée, je ne sais pas trop comment vous aider. Essayez de vider le cache de votre navigateur (ou effacer l'historique, comme j’ai fait) puis de réinstaller le template et la feuille CSS.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS

Message par Luuucee Sam 12 Mar 2011 - 21:52

Effectivement, ça marche à présent ! Je vous remercie beaucouuup, je met en résolue ^^.
Luuucee

Luuucee
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 12/03/2011

http://sixteenyearsold.forumsactifs.net/
Luuucee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS

Message par Luuucee Sam 12 Mar 2011 - 22:08

Ah oups, enfaite non, je vais faire un peu ma chiante mais pour ce qui est des liens des sous-forums ainsi que des ".. messages dans .. sujets" je voulais que ça soit mis dans le cadre, le même cadre que celui de l'image, alors que là ils sont exclus mis au-dessous.

(Je ne comptais rien écrire comme description des catégories donc ça fait le petit trait blanc du cadre tout vite, et ces deux parties hors du cadre… D'ailleurs pour le cadre blanc, tu pourrais l'enlever ? Ça fait pas très beau, j'ai testé en écrivant dans la description et c'est bof, à part si j'y place les images … mais je préfèrerais l'enlever quand même :O )
Luuucee

Luuucee
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 12/03/2011

http://sixteenyearsold.forumsactifs.net/
Luuucee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS

Message par Invité Mar 15 Mar 2011 - 13:53

Bonjour,

Normalement ça devrait être bon comme ceci:
Le template Index-box complet:
Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
      <tr>
          <td valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <span class="gensmall">{LAST_VISIT_DATE}

            {CURRENT_TIME}

            </span>
            <!-- END switch_user_logged_in -->
            <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

            <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

            <!-- END switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
      </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
            <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">{catrow.tablehead.L_FORUM}</th>
            </tr>
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></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"> </td>
      </tr>
      <!-- END cathead -->
        <!-- BEGIN forumrow -->
        <tr>
            <!-- BEGIN inc -->
            <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
            <!-- END inc -->
          <!-- [ DÉBUT DES MODIFICATIONS ] -->
            <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50" align="center">
                        <table width="100%"><tr><td colspan="3" align="center"><span class="forumlink"><center><div class="titresfora">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                    </div></span></center></td></tr>
               
<tr><td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" width="5%">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            </td> <td class="forum-description" width="75%"><span class="genmed">{catrow.forumrow.FORUM_DESC}{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<br />
{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.<br /></td>
<td class="forum-stats" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </td></tr></table></span>
    </div>
              <!-- BEGIN switch_moderators_links --><span class="gensmall">
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
            </span>
          </td>
          <!-- BEGIN forum_link_no -->
    <!-- [ FIN DES MODIFICATIONS ] -->
            <!-- END forum_link_no -->
            <!-- BEGIN forum_link -->
            <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
            <!-- END forum_link -->
        </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 -->

La feuille CSS:
Code:
/*liens*/
a {
      text-decoration: none;
      text-transform: uppercase;
      text-align: center;}

a:hover {
      text-decoration: none !important;
      border-bottom: 1px dotted;
      text-transform:uppercase;}


/*contour des catégories*/
.forumline{
      border: 5px solid #935838;
      border-radius: 28px;
      -moz-border-radius: 28px 28px 8px 8px;
      -webkit-border-radius: 28px 28px 8px 8px;}


/*description dans les forums*/
.forum-description {
      margin: auto;
      padding: 10px;
      color: #000;
      border: 1px solid #000;
      text-align: center;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      border-radius: 14px
      font-size: 12px;
      width: 75%;}

/*derniers messages*/
.forum-stats {
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      border: 1px solid #000;
      font-size: 11px;
      padding: 3px;
      text-align: center;
      width: 20%;}

/*cadre du forum*/
.bodyline {
      border: 1px white solid;
      -moz-border-radius: 28px;
      -webkit-border-radius: 28px;
      border-radius: 28px;
      border: 5px solid #935838;
}


/*cadre des citer*/
.quote {
      border: 2px white solid;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
}

/*cadre des liens des forums*/
span.forumlink {
      display: block;
      background-image : url('http://i63.servimg.com/u/f63/14/73/13/17/talach11.jpg');
      margin: 4px;
      padding: 3px;}

.titresfora{
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      border: 1px solid #000;
      font-size: 11px;
      height: auto;
      padding: 3px;
      width: 200px;
      }

/*arrondis des titres de catégories*/
.secondarytitle{
      -moz-border-radius-topleft: 28px;
      -moz-border-radius-topright: 28px;
      -webkit-border-top-right-radius: 28px;
      -webkit-border-top-left-radius: 28px;
      border-top-right-radius: 28px;
      border-top-left-radius: 28px;}

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS

Message par Luuucee Mar 15 Mar 2011 - 20:36

Niquel ! Merci beaucoup pour ton aide :].
Je met le sujet en résolue.
Luuucee

Luuucee
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 12/03/2011

http://sixteenyearsold.forumsactifs.net/
Luuucee a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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