Help pour page d'accueil *^*

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

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

Message par Shiooooo le 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
**

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é le 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

Invité
Invité


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

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

Message par Shiooooo le 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
**

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 le Ven 17 Déc 2010 - 12:39

Bonjour

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

tupac
+ Hyperactif +

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

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

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

Message par Invité le 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

Invité
Invité


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

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

Message par Shiooooo le 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
**

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 le 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
**

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 le 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 :
Sécurité : Mail de fondation - Ce qu'il ne faut pas faire
Listing - Questions/Réponses fréquentes
Listing - Trucs et astuces
La fonction Rechercher
La FAQ de Forumactif.com

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

Bonjour,

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

Bonjour,

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
+ Hyperactif +

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

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

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

Message par Invité le 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.

Invité
Invité


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

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

Message par Shiooooo le 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
**

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é le 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.

Invité
Invité


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

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

Message par Shiooooo le 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
**

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


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum