Codes divers!

Messages : 21 Date d'inscription : 13/02/2012

Voici le codage que j'ai trouver pour la barre de navigation sur le coté:

A mettre dans le CSS:

Code:: ul#bouton {
position: fixed; /* On fixe les boutons */
margin: 0px; /* marge extérieure */
padding: 0px; /* marge intérieure */
top: 0px; /* positionné à 0px du haut */
left: 50px; /* positionné à 50px du bord gauche */
list-style: none; /* pas de style pour la liste */
z-index: 999; /* place les boutons au dessus de tout le reste */
width: 130px; /* largeur du bouton */
}
ul#bouton a {
display: block; /* défini en bloc */
width: 130px; /* largeur */
height: 25px; /* hauteur */
background-repeat:no-repeat; /* répétition du fond */
background-position:center center; /* position du fond */
border:1px solid #323630; /* bordure */
margin-bottom: 4px; /* marge inférieure */
}

ul#bouton .menu a{
background-image: url(http://img15.hostingpics.net/pics/551204Navigation.png);
}
ul#bouton .image a{
background-image: none;
}

Et remplace l'image marquée "navigation" par celle qui se trouvera derrière les textes.

Dans le template "overall_header", chercher :

Code:: <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Juste après, coller ce code:

Code:: <ul id="bouton">

<li class="menu"><center><a href="/forum">Le forum</a>
<a href="/search">Chercher</a>
<a href="/faq">FAQ</a>
<a href="/memberlist">Membres</a>
<a href="/groups">Groupes</a>

<a href="/profile?mode=editprofile">Profil</a>
<a href="/privmsg?folder=inbox" id="mp">MP</a>
<a href="/login?logout">Déconnexion</a>


<a href="/register">Rejoins-nous</a>
<a href="/login">Connexion</a>

</center></li>
<li class="image"><center><img src="http://img15.hostingpics.net/pics/413610NavigationBas.png"></center></li>
</ul>

<script type="text/javascript">
$(function() {
$('#bouton a').stop().animate({'marginTop':'-30px'},1000);

$('#bouton > li').hover(
function () {
$('a',$(this)).stop().animate({'marginTop':'-2px'},1500);
},
function () {
$('a',$(this)).stop().animate({'marginTop':'-30px'},1500);
}
);
});
</script>

Enfin chercher ça:

Code:: <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>

Et le supprimer!

Autre note: l'image de fond doit être couper en deux. ce qui va se trouver derrière les textes, et l'image du bas.
Dans le template, l'image à mettre et celle pour le bas de la navigation.

Messages : 21 Date d'inscription : 13/02/2012

Ceci est le codage du bestiaire de DB
A mettre dans une page HTML

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>

<title>bestiaire dol baran</title>

<link href="http://ctmaloney.github.com/fwslider/css/fwslider.css" media="screen" rel="Stylesheet" type="text/css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ctmaloney.github.com/fwslider/fwslider.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#slider').fwslider({
auto: false, //auto start
speed: 800, //transition speed
panels: 1, //number of image panels
width: 400,
height: 550,
nav: true //show navigation
});
});
</script>

<style type="text/css" media="screen">

body {
width:400px;
margin-left:0px;
margin-right:0px;
background:transparent;
}

#fw-wrapper {
overflow:visible;
margin:0 auto;
position:relative;
}
#fw-slider {
position:absolute;
}
#fw-slider div {
float:left;
}
#fw-nav-next,
#fw-nav-prev {
position:absolute;
top:0;
right:0;
height:100%;
background:#fff;
width:15px;
opacity:0.5;
/* IE */
filter: alpha(opacity=50);
}
#fw-nav-prev {
left:0px;
right:auto;
}
#fw-nav-next a,
#fw-nav-prev a {
display:block;
height:100%;
text-indent:-9999px;
}
#fw-nav-next a {
background:url(http://ctmaloney.github.io/fwslider/images/fw-slider-arrow-right.png) no-repeat center center;
}
#fw-nav-prev a {
background:url(http://ctmaloney.github.io/fwslider/images/fw-slider-arrow-left.png) no-repeat center center;
}
</style>

</head>

<body>

<div id="slider">
<div><img src="http://img11.hostingpics.net/pics/826621livrebestiaireDAcheri.png" alt="Acheri" /></div>
<div><img src="http://img11.hostingpics.net/pics/616209livrebestiaireDCyclope.png" alt="Cyclope" /></div>
<div><img src="http://img11.hostingpics.net/pics/258081livrebestiaireDDrugam.png" alt="Drugam" /></div>
<div><img src="http://img11.hostingpics.net/pics/419648livrebestiaireDFreezdal.png" alt="Freezdal" /></div>
<div><img src="http://img11.hostingpics.net/pics/811424livrebestiaireDGueurki.png" alt="Gueurki" /></div>
<div><img src="http://img11.hostingpics.net/pics/449977livrebestiaireDHerselwr.png" alt="Herselwr" /></div>
<div><img src="http://img11.hostingpics.net/pics/120204livrebestiaireDPhantomera.png" alt="Phantomera" /></div>
<div><img src="http://img11.hostingpics.net/pics/625678livrebestiaireDRunmus.png" alt="Runmus" /></div>
<div><img src="http://img11.hostingpics.net/pics/359745livrebestiaireDTankqs.png" alt="Tankqs" /></div>
<div><img src="http://img11.hostingpics.net/pics/923634livrebestiaireDTrpasss.png" alt="Trpasss" /></div>
<div><img src="http://img11.hostingpics.net/pics/568744livrebestiaireGarachnide.png" alt="Arachnide" /></div>
<div><img src="http://img11.hostingpics.net/pics/244332livrebestiaireGdardargan.png" alt="Dardargan" /></div>
<div><img src="http://img11.hostingpics.net/pics/468240livrebestiaireGdragon.png" alt="Dragon" /></div>
<div><img src="http://img11.hostingpics.net/pics/385196livrebestiaireGgerloos.png" alt="Gerloos" /></div>
<div><img src="http://img11.hostingpics.net/pics/621346livrebestiaireGharak.png" alt="Harak" /></div>
<div><img src="http://img11.hostingpics.net/pics/914301livrebestiaireGhomkar.png" alt="Homkar" /></div>
<div><img src="http://img11.hostingpics.net/pics/325511livrebestiaireGJarlaxe.png" alt="Jarlaxe" /></div>
<div><img src="http://img11.hostingpics.net/pics/171928livrebestiaireGkhromax.png" alt="Khromax" /></div>
<div><img src="http://img11.hostingpics.net/pics/657412livrebestiaireGVelkomor.png" alt="Velkomor" /></div>
<div><img src="http://img11.hostingpics.net/pics/325655livrebestiaireGmordirath.png" alt="Mordirath" /></div>
<div><img src="http://img11.hostingpics.net/pics/479614livrebestiaireGorque.png" alt="Orque" /></div>
<div><img src="http://img11.hostingpics.net/pics/452573livrebestiaireGsliverpoth.png" alt="Sliverpoth" /></div>

</div>

</body>
</html>

Code:: <center><iframe src="URL DE LIFRAME" name="bestiaire" width="410px" height="570px" frameborder=no></iframe></center>