Help pour page d'accueil *^*
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Help pour page d'accueil *^*
Sur mon forum test, j'ai réussi a faire une page d'accueil en onglet
Ma feuille CSS :
- Spoiler:
- Spoiler:
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
Re: Help pour page d'accueil *^*
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) :
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:
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.
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é
Re: Help pour page d'accueil *^*
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 ?
Re: Help pour page d'accueil *^*
Bonjour
Vous avez oubliez une parenthèse a la fin du css
Vous avez oubliez une parenthèse a la fin du css
Re: Help pour page d'accueil *^*
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:
Cordialement.
Edit; exact Tupac, je vais corriger ça merci
Si vous voulez placer une image mettez tout au début du message d'accueil:
- Code:
<img src="adresse de la bannière" /><br />
- Code:
<a href="url de la page"><img src="adresse de la bannière" /></a><br />
Cordialement.
Edit; exact Tupac, je vais corriger ça merci
Invité- Invité
Re: Help pour page d'accueil *^*
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) !
Re: Help pour page d'accueil *^*
Bonjour et Bienvenue Vu que vous êtes nouveau, voici quelques sujets importants :sur le Forum des Forums ForumActif 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 |
Bonjour, Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre :
- 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 de votre premier message. A bientôt sur ForumActif |
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 |
Re: Help pour page d'accueil *^*
Bonjour,
Cordialement.
En parlant de colonnes, vous avez donné la réponse dans la question . A la place de "mon contenu" insérez un tableau. Pour 2 colonnes et 2 lignes: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"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:
- Spoiler:
- Code:
<table><tr><td>titre 1 </td><td>titre 2</td></tr>
<tr><td>texte 1</td><td>texte 2</td></tr></table>
Cordialement.
Invité- Invité
Re: Help pour page d'accueil *^*
La c'est vraiment la dernière question : comment je fait pour centrer le contenu de chacun de mes tableaux ?
Re: Help pour page d'accueil *^*
Pour center le contenu, ajoutez une class à votre tableau. Par exemple:
Cordialement.
- 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>
- Code:
.tablo {text-align:center;}
Cordialement.
Invité- Invité
Re: Help pour page d'accueil *^*
Merci Isolde d'avoir consacré ton temps pour mon problème de PA, je t'en suis très reconnaissante
Sujets similaires
» Affichage des visiteurs sur la page daccueil.
» Fond de page différent pour une page html + appliquer un fond transparent
» Ajout d'un bouton pour ouvrir une page html (script fait mais erreur dans l'ouverture de la page)
» pour ma page d'accueil
» Aide pour page HTML
» Fond de page différent pour une page html + appliquer un fond transparent
» Ajout d'un bouton pour ouvrir une page html (script fait mais erreur dans l'ouverture de la page)
» pour ma page d'accueil
» Aide pour page HTML
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum