forum de design fruité
 
AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  
bonjour je suis une annonce test

Partagez | 
 

 Code pour page d'accueil

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Grenadine
Admin
avatar

Nombre de messages : 34
Date d'inscription : 03/06/2007

MessageSujet: Code pour page d'accueil    Mer 12 Oct - 21:46

<script type="text/javascript">
//<!--
// La fonction Javascript va permettre de changer d'onglet lorsque l'on clique sans recharger la page.
// Le principe est simple. Le cadre g�rant le contenu que l'on souhaite voir recoit la calver onglet_actif alors que les autres recoivent onglet_inactif pour les cacher.
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_inactif bloc_general_onglet';
document.getElementById('onglet_'+name).className = 'onglet_actif bloc_general_onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->
</script>
<style type="text/css">
body
{
width:800px;
margin:auto;
}
img
{
border:none;
}
.systeme_onglets
{
margin-top:5px;
margin-left:5px;
width:57%;
float:left;
}
.bloc_general_onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px solid black;
cursor:pointer;
}
.onglet_inactif
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_actif
{
background:#eeeeee;
border-top:1px solid #eeeeee;
}
.contenu_onglet
{
background-color:#eeeeee;
border:1px solid black;
margin-top:1px;
padding:5px;
display:none;
-moz-border-radius: 10px 10px 10px 10px ;
height:200px;
}
.titre
{
text-align:center;
text-decoration:underline;
}

/* Le css suivant permet de mettre l'info bulle... */
a.info_bulle
{
text-decoration : none;
padding : 2px 16px 2px 2px; /*D�finition des marges int�rieures de notre lien */
position : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
}
a.info_bulle:hover
{
border : 0; /* ligne qui corrige le bug d'IE6 et inf�rieur */
}
/* Rend invisible tout notre bloc span */
a.info_bulle span.info_bulle
{
position : absolute;
top : -2000em;
left : -2000em;
width : 1px;
height : 1px;
overflow : hidden;
}

/* Rend visible tout notre bloc span et lui attribue une taille */
a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle
{
top : auto;
left : auto;
height : auto;
overflow : visible;
}
span.contenu
{
display : block;
padding : 0 8px;
}

</style>

<div style="width:800px;margin:auto;height:250px;">
<div class="systeme_onglets">

<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_premier">
Contenu du premier onglet !
</div>


<div class="contenu_onglet" id="contenu_onglet_deuxieme">
Contenu du deuxieme onglet !
</div>


<div class="contenu_onglet" id="contenu_onglet_troisieme">
Contenu du troisieme onglet !
</div>
</div>

/* C'est ici que nous allons changer le titre des onglets pour pouvoir g�rer plus facilement la navigation sur la PA ^^ */

<div class="onglets" style="padding-left:10px;">
<span class="onglet_inactif bloc_general_onglet" id="onglet_premier" onclick="javascript:change_onglet('premier');">Onglet 1</span>
<span class="onglet_inactif bloc_general_onglet" id="onglet_deuxieme" onclick="javascript:change_onglet('deuxieme');">Onglet 2</span>
<span class="onglet_inactif bloc_general_onglet" id="onglet_troisieme" onclick="javascript:change_onglet('troisieme');">Onglet 3</span>
</div>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = 'premier'; // Cette ligne informe qu'on va en premier voir l'onglet 1
change_onglet(anc_onglet);
//-->
</script>

<!-- Ci dessous le cadre du staff -->
<div style="width:39%;float:right;border:1px solid black;height:200px;padding:5px;margin-right:5px;margin-top:5px;">
<div class="titre">STAFF</div>
<!-- Pour l'info bulle, copies le code d'ici -->
/* Mettre l'url du l'image ici... */
<span class="info_bulle">
<span class="contenu">
<img src="http://graph-style.forumn.biz/users/2515/81/28/17/avatars/3154-29.png" alt="" />
</span>
</span>
</a>
<!-- Jusqu'a ici !
Attention ! Les deux images (en petit et grand) doivent �tre de la taille que tu souhaites l'infobulle -->
</div>
</div>
<!-- Fin du cadre du staff -->


<!-- Debut du cadre des infos importantes -->
<div style="width:40%;border:1px solid black;height:200px;float:left;margin-top:5px;overflow:auto;">
<div class="titre">Contenu...Informations importantes...etc</div>
Bcp de texte...

Bcp de texte...

Bcp de texte...

Bcp de texte...

Bcp de texte...

Bcp de texte...

Bcp de texte...

Bcp de texte...

Bcp de texte...

Bcp de texte...

Bcp de texte...

Bcp de texte...

Bcp de texte...


</div>
<!-- Fin informations importantes -->


<!-- D�but cadre en bas � droite -->
<div style="width:58%;border:1px solid black;height:225px;margin-top:-20px;float:right;">

<!-- player de musique (dewplayer pour faire un exemple) -->
<div style="margin-left:10px;margin-top:10px;">
<object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/flashswf/dewplayer.swf" width="200" height="60" id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="http://www.alsacreations.fr/flashswf/dewplayer.swf" />
<param name="flashvars" value="mp3=la_musique.mp3&showtime=1" />
</object>
</div>

Image....
</div>
<!-- Fin... -->
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://fruits-design.fruitsandco.com
 
Code pour page d'accueil
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Page d’accueil "personnalisé" et "personnalisable" !
» Code pour 10 % chez Séphora !
» [suite de] Personnalisation de la page d'accueil
» [résolu]Personnaliser la page d'accueil d'H12 - Windows 7
» Une Grille pour Planning d'Accueil PMI

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Fruits Design :: le coin codage :: codage pour les forums actif-
Sauter vers: