topic body en trois images (effet parchemin)

2 participants

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

Résolu topic body en trois images (effet parchemin)

Message par Reidarr Jeu 8 Fév 2018 - 21:38

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour/bonsoir,

Je progresse très bien dans le développement de mon forum et je cherche à encore l'améliorer. je souhaite rajouter un fond pour chaque message quand on lit un sujet et qui intégrerait si possible le titre du message (re: ... par posteurduforum).

Il me semble avoir bien compris qu'il fallait modifier le template viewtopic_body, couper mon image en trois (haut, corps répétable et bas) et rajouter les css correspondant. J'ai voulu suivre les démarches préconisées => ici

Mais hélas il s'adresse à un phpbb2 et les codes du template ne sont pas bien identiques (j'ai essayé d'adapter à l'oeil mais je découvre encore et c'est un echec, j'ai donc supprimé les modifications et remis de base).

Je m'excuse si le sujet allait dans la partie script plutot qu'apparence, j'ai hésité.

Merci d'avance
Reidarr

Reidarr
Nouveau membre

Messages : 13
Inscrit(e) le : 04/02/2018

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

Résolu Re: topic body en trois images (effet parchemin)

Message par Reidarr Sam 10 Fév 2018 - 19:36

Up.
Reidarr

Reidarr
Nouveau membre

Messages : 13
Inscrit(e) le : 04/02/2018

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

Résolu Re: topic body en trois images (effet parchemin)

Message par Reidarr Lun 12 Fév 2018 - 9:19

up
Reidarr

Reidarr
Nouveau membre

Messages : 13
Inscrit(e) le : 04/02/2018

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

Résolu Re: topic body en trois images (effet parchemin)

Message par Reidarr Mer 14 Fév 2018 - 5:27

up, il s'agit bien du .postbody, j'ai installé une image qui se répète pour le corps et mon fond de .post est transparent, bien nickel.

Il me manque plus que le moyen de séparer le postbody en trois avec en-tête, corps répétable et fin.

Merci d'avance de votre bienveillance.
Reidarr

Reidarr
Nouveau membre

Messages : 13
Inscrit(e) le : 04/02/2018

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

Résolu Re: topic body en trois images (effet parchemin)

Message par Reidarr Jeu 15 Fév 2018 - 13:25

bonjour et up
Reidarr

Reidarr
Nouveau membre

Messages : 13
Inscrit(e) le : 04/02/2018

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

Résolu Re: topic body en trois images (effet parchemin)

Message par MasDan Ven 16 Fév 2018 - 0:40

Bonjour Reidarr,

À votre template viewtopic_body, rechercher
Code:
<div>{postrow.displayed.MESSAGE}</div>
(ligne 177 du template par défaut)

et remplacer par
Code:
<div class="haut_post"></div>
<div class="centre_post">
  <div class="contenu_post">{postrow.displayed.MESSAGE}</div>
</div>
<div class="bas_post"></div>

Pour votre CSS, utiliser le code du tuto mais remplacer les id par des class.
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

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

Résolu Re: topic body en trois images (effet parchemin)

Message par Reidarr Ven 16 Fév 2018 - 8:11

Merci Masdan, c'est impeccable pour l'image du centre mais je n'ai pas le haut ni le bas.
Je me permet de vous partager mes codes au cas où. J'ai modifié les "#" des codes css du tutoriel par des " . ", si c'est bien ce que vous entendiez par mettre des CLASS à la place des ID.

Idéalement je souhaiterait que le centre respecte la hauteur minimal de 300 pixel même si le texte est plus court, actuellement il coupe brutalement après la dernière ligne du message

En vous remerciant pour votre assistance.

"viewtopic_body template
Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };

$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
 {
 if( $(this).is(":visible") )
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 }
 else
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    }
    catch(e) { }

 return false;
};

//]]>
</script>

<h1 class="page-title">
 <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
<div class="topic-actions">
 <div class="buttons">

 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
 <!-- END switch_user_authpost -->

 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>

 <div class="pathname-box">
 <p>
            <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
            <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC}
        </p>
 </div>

 <p class="right">
        <!-- BEGIN switch_twitter_btn -->
        <span>
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </span>
        <!-- END switch_twitter_btn -->
 <!-- BEGIN switch_fb_likebtn -->
 <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
 <!-- END switch_fb_likebtn -->
 </p>

 <div class="pagination">
 {PAGE_NUMBER}
 &nbsp;•&nbsp;
        <a class="addthis_button" href="#">{L_SHARE}</a>
 <!-- BEGIN switch_plus_menu -->
 &nbsp;•&nbsp;
 <script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
 <!-- END switch_plus_menu -->
 </div>
 <div class="clear"></div>
</div>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;
    <!-- END switch_isconnect -->
    <a href="#bottom">{L_GOTO_DOWN}</a>
</p>
<div class="clear"></div>
{POLL_DISPLAY}

<!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_COUNT}">
 <div class="inner">
 <span class="corners-top"><span></span></span>
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 <div class="clear"></div>
 <span class="corners-bottom"><span></span></span>
 </div>
 </div>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
 <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
 <div class="inner"><span class="corners-top"><span></span></span>
            <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
 <div class="postbody">

 <ul class="profile-icons">
 <li>{postrow.displayed.THANK_IMG}</li>
 <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
 <li>{postrow.displayed.QUOTE_IMG}</li>
 <li>{postrow.displayed.EDIT_IMG}</li>
 <li>{postrow.displayed.DELETE_IMG}</li>
 <li>{postrow.displayed.IP_IMG}</li>
 <li>{postrow.displayed.REPORT_IMG_NEW}</li>
 </ul>

 <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
 <p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" />&nbsp;{L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
 <div class="clearfix"></div>

 <!-- BEGIN switch_vote_active -->
 <div class="vote gensmall">
 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
 <!-- END switch_vote -->

 <!-- BEGIN switch_bar -->
 <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
 <!-- BEGIN switch_vote_plus -->
 <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
 <!-- END switch_vote_plus -->

 <!-- BEGIN switch_vote_minus -->
 <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
 <!-- END switch_vote_minus -->
 </div>
 <!-- END switch_bar -->

 <!-- BEGIN switch_no_bar -->
 <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
 <!-- END switch_no_bar -->

 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
 <!-- END switch_vote -->
 </div>
 <!-- END switch_vote_active -->
                          
 <div style="display:none"></div>
 <div class="content clearfix">

 <div class="haut_post"></div>
                                        <div class="centre_post">
  <div class="contenu_post">{postrow.displayed.MESSAGE}</div>
</div>
                                        <div class="bas_post"></div>
 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd class="attachments">
 <!-- BEGIN switch_post_attachments -->
 <dl class="file clearfix">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
 </dt>
 <dd>
 <!-- BEGIN switch_dl_att -->
 <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_dl_att -->

 <!-- BEGIN switch_no_dl_att -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_no_dl_att -->

 <!-- BEGIN switch_no_comment -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
 <!-- END switch_no_comment -->

 <!-- BEGIN switch_no_dl_att -->
 <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
 <!-- END switch_no_dl_att -->

 <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
 </dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->
 </div>
 {postrow.displayed.EDITED_MESSAGE}
 <!-- BEGIN switch_signature -->
 <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>

 <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <!-- div class="online2"></div-->
 <dl>
 <dt>
 {postrow.displayed.POSTER_AVATAR}
 <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
 </dt>
 <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
 <dd><br /></dd>
 <dd>
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </dd>
 <dd><br /></dd>
 <dd>
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </dd>
 </dl>
 </div>

 <div class="clear"></div>

 <p class="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a></p>
 <span class="corners-bottom"><span></span></span></div>
 </div>
 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
 <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->

<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;
    <!-- END switch_isconnect -->
    <a href="#top">{L_BACK_TO_TOP}</a>
</p>

<div class="clear"></div>

<div class="noprint">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<p class="right">{S_WATCH_TOPIC}</p>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>

<!-- BEGIN promot_trafic -->
<div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
 <span class="corners-top"><span></span></span>
 <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
 <span class="ptrafic">&nbsp;{PROMOT_TRAFIC_TITLE}</span>
 <span class="corners-bottom"><span></span></span>
</div>
<div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
 <span class="corners-top"><span></span></span>
 <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
 <span class="ptrafic">&nbsp;{PROMOT_TRAFIC_TITLE}</span>
 <div class="clear"></div>
 <div>
 <!-- BEGIN link -->
 »&nbsp;<a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </div>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
 <span class="corners-top"><span></span></span>
 <div class="h3">&nbsp;{L_FORUM_RULES}</div>
 <div class="clear"></div>
 <table class="postbody">
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules content">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<hr />

<div class="topic-actions">
 <div class="buttons">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
 <!-- END switch_user_authpost -->

 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>

 <div class="pathname-box">
 <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
 </div>

 <div class="pagination">
 {PAGE_NUMBER}
 </div>
</div>
<div class="clear"></div>

<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="jumpbox">
 <label>{L_JUMP_TO}:&nbsp;</label>
 {S_JUMPBOX_SELECT}&nbsp;
 <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
<fieldset class="quickmod">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
 <label>{L_MOD_TOOLS}:&nbsp;</label>
 {S_SELECT_MOD}&nbsp;
 <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<div class="clear"></div>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
 <div class="h3">{L_TABS_PERMISSIONS}</div>
 {S_AUTH_LIST}
<!-- END show_permissions -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>



CSS
Code:
body {
  background-size: cover;
}
/*Image_fond_cellules_accueil-------------------------------------------------*/
ul.forums {
background-repeat: repeat;
background-image: url('https://i62.servimg.com/u/f62/19/84/90/85/grande22.png');
      background-color:transparent;
}
#chatbox .chatbox_row_1 span[title],#chatbox .chatbox_row_2 span[title]{
    display:none;
}
#av_quickreply img {
    left: 15px;
    position: relative;
    top: 35px;
}
#av_quickreply {
    float: left;
    position : absolute;
}
.name {
    background: #bee4fa;
    color: #7d786f; /* couleur de la police */
    font-family: verdana,Brush Script MT; /* type de la police */
    font-size: 13px; /* taille de la police */
    text-align: center;
    text-shadow: 0 0 1px #fff;
}
div.panel.introduction {
    background: #;
  background-color:transparent;
}
 
.module{
background-color: orange;
    background-color:transparent;
}
div.myself em textarea {
display: block;
}
#right{
width:0px !important;
}
.row1{
background-color: #E6D3AC
}
.row2{
background-color: #E6D3AC
}
.forumline, .forumline td {
  background-color:transparent;
}
.post{
background-color: orange;
    background-color:transparent;
}
.postprofile{
  background-repeat: no-repeat;
  background-image: url('https://i62.servimg.com/u/f62/19/84/90/85/profil13.png');
        background-color:transparent;
}
.haut_post{
height:--100px;
width:---860px;
background-image: url('https://image.noelshack.com/fichiers/2018/07/5/1518762604-1parchhaut2.png');
 background-repeat:no-repeat;
}
.centre_post{
min-height:--300px;
width:--860px;
background-image: url('https://image.noelshack.com/fichiers/2018/07/5/1518762360-1parchccenttre5.png');
   background-repeat:repeat;
}
.bas_post{
height:--100px;
width:---860px;
background-image: url('https://image.noelshack.com/fichiers/2018/07/5/1518762616-1pachbas2.png');
background-repeat:no-repeat;
}
 .contenu_post{
  padding:35px;
   text-align:justify;
}
Reidarr

Reidarr
Nouveau membre

Messages : 13
Inscrit(e) le : 04/02/2018

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

Résolu Re: topic body en trois images (effet parchemin)

Message par MasDan Ven 16 Fév 2018 - 18:01

Bonjour Reidarr,

Le problème provient du CSS. Il ne faut pas inclure de tiret pour les attribut height et width
Code:
height:--100px;

Remplacer le CSS pour les class haut_post, centre_post et bas_post par
Code:
.haut_post{
  height: 100px;
  width: 860px;
  background-image: url('https://image.noelshack.com/fichiers/2018/07/5/1518762604-1parchhaut2.png');
  background-repeat: no-repeat;
}
.centre_post{
  min-height: 300px;
  width: 860px;
  background-image: url('https://image.noelshack.com/fichiers/2018/07/5/1518762360-1parchccenttre5.png');
  background-repeat: repeat;
}
.bas_post{
  height: 100px;
  width: 860px;
  background-image: url('https://image.noelshack.com/fichiers/2018/07/5/1518762616-1pachbas2.png');
  background-repeat: no-repeat;
}
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

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

Résolu Re: topic body en trois images (effet parchemin)

Message par Reidarr Ven 16 Fév 2018 - 18:27

Bonsoir,

C'est formidable, un grand merci,
Problème résolu.
Reidarr

Reidarr
Nouveau membre

Messages : 13
Inscrit(e) le : 04/02/2018

http://totaljdr.forumactif.com/
Reidarr 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