Avec Hover et image descriptive [1]
Page 1 sur 1 • Partagez
Eli-a
- Codeur
-
Le code (affichage -> templates -> général ->index_box ) :
- 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}<br />
{CURRENT_TIME}<br />
</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><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="cate_head"><div id="titre_cate">{catrow.tablehead.L_FORUM}</div></div>
<div class="cate_body">
<span style="display: block; height: 1px; clear: both;"></span>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="forum_bloc">
<div class="forum">{catrow.forumrow.FORUM_DESC}<div id="nom_forum"><a href="{catrow.forumrow.U_VIEWFORUM}" id="lien_forum">{catrow.forumrow.FORUM_NAME}</a></div>
<div id="stat_forum">{catrow.forumrow.TOPICS} sujets / {catrow.forumrow.POSTS} message</div>
<div id="last_poste">{catrow.forumrow.LAST_POST}</div>
<div class="sous_f">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
<div id="imgN_forum"><img id="imgn02" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<span style="display: block; height: 1px; clear: both;"></span>
</div>
<div class="cate_foot"></div>
<!-- END tablefoot --><!-- END catrow -->
CSS :
- Code:
/*----------------------- CATEGORIE PAR ELI-A ---------------------*/
.forum_bloc
{
width: 800px;
margin: auto;
}
.forum
{
width: 380px;
float: left;
height: 275px;
margin: 8px;
overflow:hidden;
background: white;
border:2px solid white;
-moz-box-shadow: 5px 5px 5px 0px #656565;
-webkit-box-shadow: 5px 5px 5px 0px #656565;
-o-box-shadow: 5px 5px 5px 0px #656565;
box-shadow: 5px 5px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
}
.forum:hover #nom_forum {
top:-400px;
width:380px;
text-align:center;
transition:0.5s;
}
#nom_forum {
position:relative;
top:-310px;
width:380px;
text-align:center;
transition:0.5s;
}
#lien_forum {
text-align:left;
font-size:25px;
text-shadow : 1px 1px #000000;
color:white !important;
transition:0.5s;
}
#lien_forum:hover {
color:grey !important;
transition:0.5s;
}
#imgN_forum {
position:relative;
top:-400px;
width:380px;
text-align:center;
transition:0.5s;
}
.forum:hover #imgN_forum {
top:-270px;
transition:0.5s;
}
#imgn02 {
width:250px;
height:40px;
transition:0.5s;
}
.forum:hover #imgn02 {
width:80px;
height:13px;
transition:0.5s;
}
#description01 {
position:relative;
width:380px;
height:105px;
background-image:url('http://zupimages.net/up/16/06/q5pk.png');
top:-200px;
left:-380px;
transition:0.7s;
overflow:auto;
text-align:justify;
font-size:13px;
}
.forum:hover #description01 {
left:0px;
transition:0.7s;
}
#last_poste {
position:relative;
top:-392px;
font-size:11px;
width:380px;
height:16px;
overflow:hidden;
text-align:center;
background-image:url('http://zupimages.net/up/16/06/abwc.png');
right:-380px;
transition:0.7s;
}
.forum:hover #last_poste {
right:0px;
transition:0.7s;
}
#last_poste br {
display: none;
}
#stat_forum {
position:relative;
top:-397px;
font-size:15px;
font-weight: bold;
width:380px;
text-align:center;
text-shadow: -3px -1px 7px rgba(255, 255, 255, 1);
left:-380px;
color:black;
transition:0.5s;
}
.forum:hover #stat_forum {
left : 0px;
transition:0.5s;
}
.sous_f {
position:relative;
top:-275px;
background-image:url('http://zupimages.net/up/16/06/abwc.png');
width:380px;
height:65px;
overflow:hidden;
right:-380px;
transition:0.7s;
}
.sous_f a {
font-size:15px;
background:white;
border-radius:5px;
padding:2px 5px;
margin:5px;
}
.forum:hover .sous_f {
right:0px;
transition:0.7s;
}
.cate_head
{
clear: both;
width: 800px;
margin: auto;
height: 140px;
background: url(http://zupimages.net/up/16/06/p9j0.png);
}
.cate_body
{
width: 800px;
margin: auto;
background: url(http://zupimages.net/up/16/06/rgpo.png) repeat-y;
}
.cate_foot
{
width: 800px;
height: 36px;
margin: auto;
background: url(http://zupimages.net/up/16/06/o5yr.png);
}
#titre_cate {
position: relative;
width: 800px;
text-align: center;
top:25px;
}
#titre_cate h2 {
font-size:35px;
color:#57321A;
font-weight:normal;
}
/*----------------------- FIN CATEGORIES -----------------------*/
Code à mettre dans la description :
- Code:
<img id="img_description" src="lien image 380*275" />
<div id="description01">
Texte
</div>
Affichage, structure et hiérarchie : Séparer les catégories sur l'index : Moyen
Lien vers les niveaux inférieurs : Oui (SANS image)
Dernière édition par Eli-a le Lun 21 Mar - 3:14, édité 1 fois
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|