Help pour page d'accueil *^*

3 participants

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

Résolu Help pour page d'accueil *^*

Message par Shiooooo Ven 17 Déc 2010 - 2:52

Sur mon forum test, j'ai réussi a faire une page d'accueil en onglet
Spoiler:
Mais je souhaiterez faire une page d'accueil dans le style de http://forum-theme.forumperso.com/forum
Spoiler:
Quelqu'un pourrait-il me donner les codes pour en réaliser une dans le meme genre ? Et dans le contenu de la page d'accueil, que dois-je mettre ?

Ma feuille CSS :
Code:
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  border: 1px solid #68ce3e;
  border-radius:20px;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  cursor: pointer;
  margin: 2px;}
.mon_onglet:hover{
  background: #b8efa1;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #b8efa1;
  border: 1px solid #68ce3e;
  border-radius:20px;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  cursor: pointer;
  margin: 2px;}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #b8efa1;
  border: 1px solid #68ce3e;
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  padding: 10px;   
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

































/* Chatbox-------------------------------------------------------------*/body.chatbox {
  background-image: none;
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  }
#chatbox_header {
  height: 30px;
  }
#chatbox_header.main-head {
  padding: 0 1.3em;
  color: #dedfdf;
  background-color: #000000;
  }
.chatbox-title,.chatbox-title a.chat-title {
  color: #dedfdf;
  text-decoration: none;
  }
.chatbox-title {
  float: left;
  margin: 0;
  padding: 2px 5px 0 5px;
  width: 15em;
  }
.chatbox-options {
  float: right;
  list-style: none;
  font-size: 11px;
  margin: 0.7em 0.5em 0.5em 0.5em;
  }
.chatbox-options li {
  display:inline;
  }
.chatbox-options li,.chatbox-options li a,.chatbox-options li label {
  color: #dedfdf;
  }
#chatbox_members {
  position: absolute;
  top: 30px;
  bottom: 30px;
  width: 180px;
  overflow: auto;
  background-color: #ffffff;
  border-right: 1px  solid #000000;
  }
#chatbox_messenger_form {
  margin: 10px 0 0 0;
  }
#chatbox_members .member-title {
  text-align: center;
  padding: 0.5em 0.25em;
  background-image: none;
  font-size: 12px;
  background-color: #ffffff;
  color : #11470E;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  }
#chatbox_members ul {
  list-style: none;
  margin: 0 0 0 1em;
  }
#chatbox_members ul li {
  margin: 0.5em 0.5em 0.5em 0;
  }
#chatbox {
  position: absolute;
  top: 30px;
  left: 181px;
  right: 0;
  bottom: 30px;
  overflow: auto;
  line-height: 10px;
  }
#chatbox p {
  line-height: 1.2em;
  }
.chatbox_row_1 {
  padding: 4px;
  background-color: #ffffFF;
  }
.chatbox_row_2 {
  padding: 4px;
  background-color: #ffffff;
  }
.chatbox_row_3 {
  padding: 4px;
  background-color: #ffffFF;
  }
#chatbox .user {
  font-weight: bold;
  }
.memberlist_row_1 {
  background-color: #ffffff;
  }
#chatbox_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px  solid #000000;
  }
#message,#submit_button{
  border-width: 1px;
  }
.fontbutton {
  padding: 1px;
  cursor: pointer;
  text-align: left;
  }
.fontbutton_normal {
  background: #E1E1E2;
  }
.fontbutton_selected {
  background: #BBC7CE;
  border: 1px solid #000000;
  }
.fontbutton_clicked {
  background: #959595;
  border: 1px solid #000000;
  }
.fontbutton_hover {
  background: #E1E1E2;
  border: 1px solid #000000;
  }
.fontbutton {
  background:#E1E1E2 none repeat scroll 0%;
  border:medium none;
  color:#000000;
  float:left;
  margin-right:10px;
  padding:1px;
  }

/*Internet Explorer fixers and hacks for Chatbox *
/* html #chatbox-members {
   
/* IE expressions helping IE work in Standards mode */
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
  }
* html #chatbox {
   
/* IE expressions helping IE work in Standards mode */
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
  width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 10) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 1) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 1.3) ) + "px");
  }
* html #chatbox-footer {
 
/* IE expressions helping IE work in Standards mode */
width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
  }
#chatbox_contextmenu {
  border: 2px solid black;
  background-color: #f3c4ff;
  }
#chatbox_contextmenu p {
  margin:0;
  padding: 1px 4px;
  font-family: verdana, arial, sans-serif;
  background: #ffd6fe;
  border-bottom:1px solid #777;
  }
#chatbox_contextmenu p.hover {
  background: #ecc5ff;
  }
#chatbox_contextmenu p.close {
  padding: 1px;
  font-size: 95%;
  color:#fff;
  background: url('');
  }
#chatbox_contextmenu p.close img {
  vertical-align: middle;
  padding-left: 20px;
  }
#chatbox_contextmenu a {
  color: #b225ff;
    text-decoration: none;
    font-size: 95%;
  }
#chatbox_contextmenu a:hover {
  color: ;
  }

.pun table.table td {
  padding: 0.6em 0 0.7em;
  border-width: 2px;
  border-style: dotted none none dotted;
  line-height: 130%;
  background-color: #DDDDFF;
  border-color: #FFFFFF;
  }
#pun-about {
  border-style: dotted;
  border-width: 2px;
  border-color: #FFFFFF;
  text-align: right;
  line-height: 150%;
  padding: 0.6em 1em;
  background-color: #DDDDFF;
  }
.pun .paged-head, .pun .paged-foot {
  border: 2px dotted #FFFFFF;
  background-color: #;
  background-image : none;
  background-repeat:no-repeat;
                margin: 0px;padding: 0px;
}
#onlinelist {
  border-top: 2px dotted #FFFFFF;
  padding: 0.6em 1em;
  background-color: #DDDDFF;
  }


Dernière édition par Shiooooo le Dim 19 Déc 2010 - 0:20, édité 1 fois
Shiooooo

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par Invité Ven 17 Déc 2010 - 9:57

Bonjour,

La page que vous donnez en exemple ne part peut-être pas du même système d'onglet. Mais on peut tenter de faire quelque chose d'approchant.
Le message d'accueil (Le code en bleu permet de remplacer le nom des onglets par une image sur fond transparent) :
<script src="ADRESSE_DU_FICHIER.js"></script><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="adresse de l'image onglet 1" /></li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="adresse de l'image onglet 2" /></li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="adresse de l'image onglet 3" /></li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><img src="adresse de l'image onglet 4" /></li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Mon contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></ul>

Dans la feuille CSS, ôtez les couleurs de fonds, de survol, pour les onglets et remplacez la couleur de fond des contenus par une image. Changez les dimension du contenu pour qu'il fasse la largeur de la page. Voici la CSS avec les modifications à personnaliser:
Code:
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  cursor: pointer;
  margin: 2px;}

.mon_onglet:hover{
  background: #transparent;}
       
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
 margin: 2px;}
         
.clear{
  clear: both;}

.mon_contenu{
  color: #666;
  background: url('adresse de l'image de fond');
  border: 1px solid #68ce3e;
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  padding: 10px;}

#mes_contenus, #mes_onglets{
  width: 100%;}

J'espère que j'ai bien compris ce que vous souhaitez faire, sinon n'hésitez pas à préciser ce qui ne va pas.

Cordialement.


Dernière édition par Isolde le Ven 17 Déc 2010 - 12:44, édité 1 fois
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par Shiooooo Ven 17 Déc 2010 - 12:34

Merci beaucoup, c'est exactement ce que je voulais j'ai juste encore une petit question peut être un peu stupide... comment fait-on pour mettre une bannière au dessus de mes onglet ?
Shiooooo

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par tupac Ven 17 Déc 2010 - 12:39

Bonjour

Vous avez oubliez une parenthèse a la fin du css
tupac

tupac
Membre actif

Masculin
Messages : 2551
Inscrit(e) le : 13/10/2010

http://codactif.monalliance.com/
tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par Invité Ven 17 Déc 2010 - 12:43

Tout dépend ce que vous voulez comme bannière:
Si vous voulez placer une image mettez tout au début du message d'accueil:
Code:
<img src="adresse de la bannière" /><br />
Si vous voulez placer une image cliquable qui renvoie vers une page précise mettez tout au début du message d'accueil:
Code:
<a href="url de la page"><img src="adresse de la bannière" /></a><br />
Vous pouvez ajouter autant de <br /> que vous voulez pour espacer la bannière des onglets.

Cordialement.

Edit; exact Tupac, je vais corriger ça Very Happy merci
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par Shiooooo Ven 17 Déc 2010 - 12:56

Merci infiniment à vous deux (c'est vrai qu'il manquait une parenthèse mais comme je l'avait remarqué et ajoutée, ça ne m'a pas posé de problème) !
Shiooooo

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par Shiooooo Ven 17 Déc 2010 - 21:35

Désolé du double-post et désolé de vous déranger encore une fois mais comment faire pour que le contenue de mon onglet soit en "deux colonnes"
Spoiler:
Et que pour la présentation du staff, ça donne un truc du genre (pas besoin de m'expliquer pour les infobulles, je sais le faire ^^) :
Spoiler:

Shiooooo

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par Anzu Ven 17 Déc 2010 - 23:33

Bonjour et Bienvenue
sur le Forum des Forums ForumActif
Vu que vous êtes nouveau, voici quelques sujets importants :
Help pour page d'accueil *^* Attention2 Sécurité : Mail de fondation - Ce qu'il ne faut pas faire
Help pour page d'accueil *^* Fleche10Listing - Questions/Réponses fréquentes
Help pour page d'accueil *^* Fleche10Listing - Trucs et astuces
Help pour page d'accueil *^* Fleche10 La fonction Rechercher
Help pour page d'accueil *^* Fleche10 La FAQ de Forumactif.com

N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse Wink

Help pour page d'accueil *^* Search10Bonjour,

Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre :
    - doit-être explicite (qui explique brièvement le problème),
    - ne doit pas être en majuscules,
    - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"...

Merci de le modifier en cliquant sur le bouton :editer: de votre premier message. Wink

A bientôt sur ForumActif Smile

Help pour page d'accueil *^* Send_210Bonjour,

Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné.

Je vous invite à lire :

A bientôt sur ForumActif Smile
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par Invité Sam 18 Déc 2010 - 12:03

Bonjour,

Shiooooo a écrit:Désolé du double-post et désolé de vous déranger encore une fois mais comment faire pour que le contenue de mon onglet soit en "deux colonnes"
Spoiler:
Et que pour la présentation du staff, ça donne un truc du genre (pas besoin de m'expliquer pour les infobulles, je sais le faire ^^) :
Spoiler:
En parlant de colonnes, vous avez donné la réponse dans la question Smile . A la place de "mon contenu" insérez un tableau. Pour 2 colonnes et 2 lignes:
Code:
<table><tr><td>titre 1 </td><td>titre 2</td></tr>
<tr><td>texte 1</td><td>texte 2</td></tr></table>
Pour la présentation du staff c'est le même principe.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par Shiooooo Sam 18 Déc 2010 - 21:36

La c'est vraiment la dernière question : comment je fait pour centrer le contenu de chacun de mes tableaux ?
Shiooooo

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par Invité Sam 18 Déc 2010 - 22:17

Pour center le contenu, ajoutez une class à votre tableau. Par exemple:
Code:
<table class="tablo"><tr><td>titre 1 </td><td>titre 2</td></tr>
<tr><td>texte 1</td><td>texte 2</td></tr></table>
Dans la feuille de style on ajoute:
Code:
.tablo {text-align:center;}
J'ai mis tablo, mais vous pouvez choisir ce que vous voulez, l'important c'est que le nom soit le même dans la feuille CSS et dans le code du tableau.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Help pour page d'accueil *^*

Message par Shiooooo Dim 19 Déc 2010 - 0:20

Merci Isolde d'avoir consacré ton temps pour mon problème de PA, je t'en suis très reconnaissante
Shiooooo

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo 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