Aide pour page d’accueil ^^
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
Aide pour page d’accueil ^^
Bonjour, Sur mon forum, j'ai réussi a faire un tableau de deux colonnes en HTML comme ca :
Mais je ne suis pas satisfaite de mes "bulles" que je voudrais comme ca :
Je souhaiterais aussi savoir si il est possible, sur mon forum, de faire des onglets, et de rajouter une image au-dessus (comme ci-dessus) (j'ai vu qu'il existait quelques posts demandant le même style de chose que moi, mais je suis une pure novice dans se domaine :$ et je n'y comprend rien >,< )
Ma page d’accueil HTML :
Mais je ne suis pas satisfaite de mes "bulles" que je voudrais comme ca :
Je souhaiterais aussi savoir si il est possible, sur mon forum, de faire des onglets, et de rajouter une image au-dessus (comme ci-dessus) (j'ai vu qu'il existait quelques posts demandant le même style de chose que moi, mais je suis une pure novice dans se domaine :$ et je n'y comprend rien >,< )
Ma page d’accueil HTML :
- Code:
<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>
<table width="100%">
<tr>
<td width="50%">
Bienvenue sur Graph Addict !<br>Comme son nom l'indique c'est un site de graphisme ;D <br> Venez rencontrer ici des professeurs, qui vous apprendront a bien grapher, ou tout du moins a connaître les bases, des amis, etc..<br> Inscris toi vite ! (Nouveau Forum avec Admins super motivées ! ;P) <br> <br>Nous recherchons des moderateurs, des graphistes LS (Libre-Service), et un(e) administrateurs de plus ;D
</td>
<td width="50%">
<table width="100%">
<tr><div style="text-align:center;"><img src="http://i66.servimg.com/u/f66/15/96/27/97/green11.gif"></img></div>
<td>
<img src="http://i66.servimg.com/u/f66/15/96/27/97/1_bmp11.jpg" title=Midona,Fondatrice >
</td>
<td>
<img src="http://i66.servimg.com/u/f66/15/96/27/97/2_bmp11.jpg" title=Pom',Fondatrice n°2>
</td>
<td>
<img src="http://i66.servimg.com/u/f66/15/96/27/97/blabla10.jpg" title=LiLy,Admin >
</td>
</tr>
</table>
</td>
</tr>
</table>
Dernière édition par Sugaar964 le Dim 19 Déc 2010 - 21:18, édité 1 fois
Re: Aide pour page d’accueil ^^
Bonjour,
Il y a un sujet très similaire au votre: https://forum.forumactif.com/t292715-help-pour-page-d-accueil .
Pour vos infobulles, essayez avec ceci dans votre message d'accueil:
Cordialement.
Il y a un sujet très similaire au votre: https://forum.forumactif.com/t292715-help-pour-page-d-accueil .
Pour vos infobulles, essayez avec ceci dans votre message d'accueil:
- Code:
<div class="infobulle"><img src="lien image ou apparait l'infobulle">
<span>Contenu de la bulle</span></div>
- Code:
.infobulle{position: relative;z-index: 0;}
.infobulle:hover{background-color: transparent;z-index: 50;}
.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
.infobulle span img{border: 1px;padding: 5px;}
.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 150px ;
color:#000;
border: 2px solid #fff;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}
Cordialement.
Invité- Invité
Re: Aide pour page d’accueil ^^
Pour le tableau a onglet, c'est juste que je suis une vraie débutante et je ne sais donc absolument pas comme faire x)
Re: Aide pour page d’accueil ^^
Ok,
Donc , pour commencer il faut la structure du tableau à onglets:
-copiez le code vierge sur le bloc note,
-faites chaque contenu séparément sur votre forum test
-insérez le contenu une fois qu'il est complet et qu'il vous convient dans le code vierge sur le bloc note.
La deuxième étape est la feuille de style CSS - à personnaliser:
Donc , pour commencer il faut la structure du tableau à onglets:
Remplacez ce qui est en bleu par les titres et les contenus voulus. Vous pouvez tout à fait faire des petits tableaux, insérer des images ou des liens ...Si vous avez un forum test:<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">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>
-copiez le code vierge sur le bloc note,
-faites chaque contenu séparément sur votre forum test
-insérez le contenu une fois qu'il est complet et qu'il vous convient dans le code vierge sur le bloc note.
La deuxième étape est la feuille de style CSS - à personnaliser:
- Code:
ul, li{
list-style: none;
}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border: 1px solid #ff0000;
cursor: pointer;}
.mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #ffffff;
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-left: 1px solid #ff0000;
border-bottom: 1px solid #ffffff;
cursor: pointer;}
.clear{
clear: both;}
.mon_contenu{
color: #000;
background: #ffffff;
border: 1px solid #ff0000;
padding: 10px;}
#mes_contenus, #mes_onglets{
width: 100%;}
- Code:
<script src="http://sd-2.archive-host.com/membres/up/86411517957321821/onglet.js
"></script>
Invité- Invité
Re: Aide pour page d’accueil ^^
Merci, c'est exactement ce que je voulais ^^
Dernière question : Comment personnaliser tout ca ? Ex : Je voudrais juste mettre une couleur de fond, une couleur de contour (au lieu du rouge qui encadre mes onglets) et remplacer les onglets 1 , 2 , 3 et 4 par des images.
Merci encore d'avance pour votre aide (:
Dernière question : Comment personnaliser tout ca ? Ex : Je voudrais juste mettre une couleur de fond, une couleur de contour (au lieu du rouge qui encadre mes onglets) et remplacer les onglets 1 , 2 , 3 et 4 par des images.
Merci encore d'avance pour votre aide (:
Re: Aide pour page d’accueil ^^
La personnalisation passe par la feuille de style CSS. Je vous ai annoté le code pour préciser à quoi cela correspond. Attention, ne l'utilisez pas ainsi sur votre forum, ça créerait des bug. Pour les couleurs, il suffit de remplacer les codes couleurs par ceux que vous désirez.
En ce qui concerne les images à la place de "onglet 1,2,3 ..." remplacez le texte par:ul, li{
list-style: none;
}
.mon_onglet{ gère les onglets non sélectionnés
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000; couleur d'écriture
background: #fff; couleur de fond
border: 1px solid #ff0000; épaisseur style et couleur des bordures
cursor: pointer;}
.mon_onglet:hover{ gère l'onglet que l'on survole
background: #b8efa1;
}
.mon_onglet_selected{ gère l'onglet sélectionné
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000; couleur du texte
background: #ffffff; couleur du fond
border-top:1px solid #ff0000; épaisseur style et couleur de la bordure du haut
border-right: 1px solid #ff0000; épaisseur style et couleur de la bordure droite
border-left: 1px solid #ff0000; épaisseur style et couleur de la bordure gauche
border-bottom: 1px solid #ffffff; épaisseur style et couleur de la bordure du bas
cursor: pointer;}
.clear{
clear: both;}
.mon_contenu{ gère les contenus
color: #000; couleur du texte
background: #ffffff; couleur de fond
border: 1px solid #ff0000; épaisseur style et couleur des bordures
padding: 10px;}
#mes_contenus, #mes_onglets{
width: 100%;}
- Code:
<img src="url de l'image" />
Invité- Invité
Re: Aide pour page d’accueil ^^
Merci beaucoup, c'est exactement ce que je voulais =D
Une dernière question (:$) J'ai cherché, cherché, mais je ne trouve toujours pas comment changer la taille de la police a l’intérieur des onglets x)
Merci encore pour votre aide et pour votre réponse a ma dernière (enfin, je l’espère) question ;D
Une dernière question (:$) J'ai cherché, cherché, mais je ne trouve toujours pas comment changer la taille de la police a l’intérieur des onglets x)
Merci encore pour votre aide et pour votre réponse a ma dernière (enfin, je l’espère) question ;D
Re: Aide pour page d’accueil ^^
Bonjour,
On peut modifier la taille de la police en passant par la feuille CSS. par exemple, dans la partie ".mon_contenu" ajoutez:
Cordialement.
On peut modifier la taille de la police en passant par la feuille CSS. par exemple, dans la partie ".mon_contenu" ajoutez:
- Code:
font-size: 20px;
- Spoiler:
- Code:
.mon_contenu{
color: #000;
font-size: 20px;
background: #ffffff;
border: 1px solid #ff0000;
padding: 10px;}
Cordialement.
Invité- Invité
Sujets similaires
» Besoin d'aide pour Page d'accueil
» Aide pour la création d'une page d'accueil
» Aide page d'accueil
» Aide pour tableau en page d'accueil
» Aide de creation d'une page d'accueil
» Aide pour la création d'une page d'accueil
» Aide page d'accueil
» Aide pour tableau en page d'accueil
» Aide de creation d'une page d'accueil
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