Sa'
{ Membre }
Messages : 48
| Bonjour, je suis en train de coder un forum pour m'entraîner et j'ai voulut modifier l'affichage d'un sujet, j'ai enregistré le template et le css. Lorsque j'ai voulût voir le résultat, un trait est apparût et barre ainsi le titre du sujet. Lien du bug Voici mon css(c'est assez brouillon): - Code:
-
/****************************CATEGORIE***************************/ .fondcat{ background: url('http://img11.hostingpics.net/pics/238426Sanstitre1.png'); height: 200px; width: 846px; text-align: center; } .fondfo{ background: #dfc1b5; } .cadcol{ border: 1px solid lavender; background: lavender; border-radius: 20px; padding: 5px; margin: 5px; height: 110px; overflow-y: auto; } a.forumlink{ display: block; text-align: center; } /*onglets catégories*/ #cat-onglets { padding: 5px; margin: 5px; text-align: center; width: 150px; position: absolute; top: 65%; left: 20px; display: block; } .co-item { background: #fff; color: #000; border: 1px solid #fdf; cursor: pointer; margin: 5px; padding: 3px; border-radius: 10px; } .co-item:hover{ background: #fdf; border: 1px solid 000; color:#fff; cursor: pointer; margin: 5px; padding: 3px; border-radius: 10px; } .co-actif { background: #000; color: #fdf; border:1px solid #fff; } /*****************************FIN*****************************/
/*********************************PARTIE AFFICHAGE DU SUJET******/ .topictitle{ align: center; valign: middle; font-family: Arial; font-size: 24px; color: #341100; }
.topicauteur{ font-family: Arial; }
.reponseetvue{ position: absolute; float: left; font-family: Arial; color: #341100; }
.dernierereponse{ position: relative; float: right; font-family: Arial; color: #341100; }
.sujets{ position: absolute; align: center; margin-top: -12px; margin-left: 115px; } /********************************************fin********************/ /*******************PROFIL********************/
/* Code par Hiro pour CSSACTIF Merci de ne pas supprimer cette mention (http://www.css-actif.com) */
#englob { /* Encadrement global des 2 divs */ position:relative; width:100px; height:100px; overflow:hidden; /* Permet de cacher ce qui dépasse */ }
.imgp { background:blue; /* le bg de la div qui contient l'avatar */ position:absolute; /* Laissez comme ceci */ top:0;/* Laissez comme ceci */ left:0;/* Laissez comme ceci */ width:100%;/* Laissez comme ceci */ height:100%;/* Laissez comme ceci */ z-index:1;/* La position par rapport à l'autre div qui contient les infos */ -webkit-transition:all 0.5s;/* Laissez comme ceci */ -moz-transition:all 0.5s;/* Laissez comme ceci */ -o-transition:all 0.5s;/* Laissez comme ceci */ -ms-transition:all 0.5s;/* Laissez comme ceci */ transition:all 0.5s;/* Laissez comme ceci */ }
#englob:hover > .imgp { margin-top:200px; /* Lorsque la souris passe sur la div #englob, on fait glisser l'image vers le bas de 200px */ }
.infosp { background:white; /* le bg de la div qui contient les infos*/ position:absolute;/* Laissez comme ceci */ top:0;/* Laissez comme ceci */ left:0;/* Laissez comme ceci */ width:100%;/* Laissez comme ceci */ height:100%;/* Laissez comme ceci */ z-index:0;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/ opacity:0;/* on met l'opacité à zero pour un effet stylé */ margin-left:-200px;/* on décale la div de 200px, elle est invisible grâce a l'overflow:hidden de #englob */ -webkit-transition:all 0.5s;/* Laissez comme ceci */ -moz-transition:all 0.5s;/* Laissez comme ceci */ -o-transition:all 0.5s;/* Laissez comme ceci */ -ms-transition:all 0.5s;/* Laissez comme ceci */ transition:all 0.5s;/* Laissez comme ceci */ }
#englob:hover > .infosp { opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */ margin-left:0px;/* et on décale cette div à 0px (position par défaut) */ } /******************FIN*************/ /* QEEL ONGLETS LATERAUX HOVER */
.qeelnu31_titre { display: block; width: 800px; height: 100px; background: url(http://img15.hostingpics.net/pics/579333qeeltitre.png); margin: auto; } #qeelnu31 { width: 950px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 5px; height: 200px; padding: 10px; background: #b9a085; border: 1px solid #ccbdad; border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -htm-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 0px 0px 5px #7b6751; -moz-box-shadow: 0px 0px 5px #7b6751; -o-box-shadow: 0px 0px 5px #7b6751; -htm-box-shadow: 0px 0px 5px #7b6751; -webkit-box-shadow: 0px 0px 5px #7b6751; } #qeelnu31_content { width: 950px; height: 200px; overflow: hidden; } #qeelnu31_links { float: left; } .qeelnu31_link1, .qeelnu31_link2, .qeelnu31_link3 { width: 150px; height: 48px; margin-bottom: 2px; opacity: 0.6; -moz-opacity: 0.6; -khtml-opacity: 0.6; filter: alpha(opacity=60); transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .qeelnu31_link1 { background: url(http://img15.hostingpics.net/pics/272286bouton1.jpg); } .qeelnu31_link2 { background: url(http://img15.hostingpics.net/pics/437826bouton2.jpg); } .qeelnu31_link3 { background: url(http://img15.hostingpics.net/pics/474878bouton3.jpg); } .qeelnu31_link1:hover, .qeelnu31_link2:hover, .qeelnu31_link3:hover { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .qeelnu31_contenu1 { width: 800px; height: 200px; margin-left: 150px; background: #e3d9cf; border: 1px solid #f2eee9; box-shadow: 0px 0px 3px #c1b1a0; -moz-box-shadow: 0px 0px 3px #c1b1a0; -o-box-shadow: 0px 0px 3px #c1b1a0; -webkit-box-shadow: 0px 0px 3px #c1b1a0; -htm-box-shadow: 0px 0px 3px #c1b1a0; color: #776047; } .qeelnu31_contenu2 { position: absolute; width: 0px; height: 200px; margin-left: 150px; overflow: hidden; background: #e3d9cf; border: 1px solid #f2eee9; box-shadow: 0px 0px 3px #c1b1a0; -moz-box-shadow: 0px 0px 3px #c1b1a0; -o-box-shadow: 0px 0px 3px #c1b1a0; -webkit-box-shadow: 0px 0px 3px #c1b1a0; -htm-box-shadow: 0px 0px 3px #c1b1a0; color: #776047; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .qeelnu31_contenu3 { position: absolute; width: 0px; height: 200px; margin-left: 150px; margin-top: -50px; overflow: hidden; background: #e3d9cf; border: 1px solid #f2eee9; box-shadow: 0px 0px 3px #c1b1a0; -moz-box-shadow: 0px 0px 3px #c1b1a0; -o-box-shadow: 0px 0px 3px #c1b1a0; -webkit-box-shadow: 0px 0px 3px #c1b1a0; -htm-box-shadow: 0px 0px 3px #c1b1a0; color: #776047; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .qeelnu31_contenu4 { position: absolute; width: 0px; height: 200px; margin-left: 150px; margin-top: -100px; overflow: hidden; background: #e3d9cf; border: 1px solid #f2eee9; box-shadow: 0px 0px 3px #c1b1a0; -moz-box-shadow: 0px 0px 3px #c1b1a0; -o-box-shadow: 0px 0px 3px #c1b1a0; -webkit-box-shadow: 0px 0px 3px #c1b1a0; -htm-box-shadow: 0px 0px 3px #c1b1a0; color: #776047; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0); transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .qeelnu31_link1:hover .qeelnu31_contenu2, .qeelnu31_link2:hover .qeelnu31_contenu3, .qeelnu31_link3:hover .qeelnu31_contenu4 { width: 800px; height: 200px; overflow: auto; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .qeelnu31_contenu { display: block; padding: 5px; color: #776047; font-size: 10px; text-align: justify; }
.qeelnu31_stats { font-size: 12px; text-shadow: -1px -1px 0px #e8e1d9; letter-spacing: 2px; font-weight: bold; } .usernu31_online { display: block; font-size: 12px; text-shadow: -1px -1px 0px #e8e1d9; letter-spacing: 2px; font-weight: bold; text-align: center; } .gr1, .gr2, .gr3, .gr4, .gr5, .gr6, .gr7, .gr8, .gr9, .gr10, .gr11 { font-size: 18px; font-weight: bold; text-shadow: -1px -1px 0px #e8e1d9; text-transform: uppercase; } a.gr1 { color: #494949 !important; } .gr2 { color: #787878 !important; } .gr3 { color: #b2b2b2 !important; } .gr4 { color: #e12727 !important; } .gr5 { color: #e3bb41 !important; } .gr_description { font-size: 10px; line-height: 9px; text-align: justify; color: #aa9a89; text-shadow: 1px 1px 0px #e8e1d9; } /**************************************************AUTRE****************************************************/
.navi { background-color: #4ba291; /*FOND*/ border: 1px solid #37bcd9; padding: 3px; /*ESPACER DES BORDS*/ -moz-border-radius: 5px; /*ARRONDIR LES COINS*/ -webkit-border-radius: 5px; position:absolute ; left: 0px; top: 0px; right: 0px; z-index: 999; width: 100%; } /******************************************FIN***********************************************************/
/*------------------------------------TAG MODO------------------------------------------------------------*/ .corbeille { background-image: url('http://i58.servimg.com/u/f58/18/59/37/79/suppri10.png'); /*--- Image de la corbeille ---*/ background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/ background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/ background-color: #DDD; /*--- Couleur de fond ---*/ border: 1px solid #888888; /*--- Taille, type et couleur de la bordure ---*/ color: #444444; /*--- Couleur du texte ---*/ padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/ min-height: 60px; /*--- On donne une hauteur minimale de 60px au tableau ---*/ } .avertissement{ background-image: url('http://i58.servimg.com/u/f58/18/59/37/79/import10.png'); /*--- Image de la corbeille ---*/ background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/ background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/ background-color: #FFBEAC; /*--- Couleur de fond ---*/ border: 1px solid #B83A1B; /*--- Taille, type et couleur de la bordure ---*/ color: #B83A1B; /*--- Couleur du texte ---*/ padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/ min-height: 60px; /*--- On donne une hauteur minimale de 60px au tableau ---*/ } .fichevalidé { background-image: url('http://i58.servimg.com/u/f58/18/59/37/79/accept10.png'); /*--- Image de la corbeille ---*/ background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/ background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/ background-color: #B0CC99; /*--- Couleur de fond ---*/ border: 1px solid #677E52; /*--- Taille, type et couleur de la bordure ---*/ color: #677E52; /*--- Couleur du texte ---*/ padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/ min-height: 60px; /*--- On donne une hauteur minimale de 60px au tableau ---*/ } .autres { background-image: url('http://i58.servimg.com/u/f58/18/59/37/79/consei10.png'); /*--- Image de la corbeille ---*/ background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/ background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/ background-color: #FFEFB6; /*--- Couleur de fond ---*/ border: 1px solid #FF5B2B; /*--- Taille, type et couleur de la bordure ---*/ color: #FF5B2B; /*--- Couleur du texte ---*/ padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/ min-height: 60px; /*--- On donne une hauteur minimale de 60px au tableau ---*/ } et le template modifier : - Code:
-
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection --> <script type="text/javascript"> function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() { var all_checked = true; for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) { if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') { all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked; } } document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked; } function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() { for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) { if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') { document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked; } } } </script> <!-- END multi_selection --> <table class="forumline" width="800px" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap" height="50px"></th> <!-- BEGIN multi_selection --> <th align="center" nowrap="nowrap" width="20" height="50px"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th> <!-- END multi_selection --> </tr> <!-- BEGIN pagination --> <tr> <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td> </tr> <!-- END pagination --> <!-- END header_table --><!-- BEGIN header_row --> <tr> <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td> </tr> <!-- END header_row -->
<!-- BEGIN topic --> {topics_list_box.row.END_TABLE_STICKY} <tr> <!-- BEGIN single_selection --> <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20" bgcolor="#00EACB"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td> <!-- END single_selection --> <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td> <!-- BEGIN icon -->
<!-- END icon --> <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%" ><div> <center><div class="topictitle"> {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE} <h2 class="topic-title"> <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> ○ <span class="topicauteur">Rédigé par {topics_list_box.row.TOPIC_AUTHOR}</span> </h2> </div></center>
<div class="topicdescription">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}</div> <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span> <div><img class="sujets" src="http://image.noelshack.com/fichiers/2013/37/1378742511-sujet.png"/></div> <div class="reponseetvue"><span class="postdetails">A reçu {topics_list_box.row.REPLIES} réponses et a été lu {topics_list_box.row.VIEWS} fois.</span></div><div class="dernierereponse"><span class="postdetails">{topics_list_box.row.LAST_POST_TIME} • {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></div></div></td> </tr> <!-- END topic --><!-- BEGIN no_topics --> <tr> <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td> </tr> <!-- END no_topics --><!-- BEGIN bottom --> <tr> <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <span class="gensmall">{PAGINATION}</span></td> <td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td> </tr> </table> </td> </tr> <!-- END bottom --><!-- BEGIN footer_table --> </table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box --> Je vous remercie en avance de m'aider ! |
Dernière édition par Sa' le Ven 01 Nov 2013, 13:38, édité 1 fois | |
|
Nihil
{ Modérateur }
Messages : 1216
| Le problème vient de cette partie là : - Code:
-
<div><img class="sujets" src="http://image.noelshack.com/fichiers/2013/37/1378742511-sujet.png"/></div> L'image fait 1px de hauteur, elle fait donc un trait . | | |
|
Sa'
{ Membre }
Messages : 48
| Merci beaucoup, ça marche ! | | |
|