Aide pour page d’accueil ^^

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

Résolu Aide pour page d’accueil ^^

Message par Sugaar964 le Sam 18 Déc 2010 - 14:35

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 :

Code:
<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><iframe src="/chatbox/chatbox.forum?page=front&amp;" 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>
Merci d'avance de votre aide pour une novice comme moi Smile


Dernière édition par Sugaar964 le Dim 19 Déc 2010 - 21:18, édité 1 fois

Sugaar964
Nouveau membre

Féminin
Messages : 5
Inscrit(e) le : 18/12/2010

http://graph-addict.forumgratuit.org
Sugaar964 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour page d’accueil ^^

Message par Invité le Sam 18 Déc 2010 - 18:27

Bonjour,

Il y a un sujet très similaire au votre: http://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>
+ceci dans votre feuille CSS:
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;}
Pour le tableau à onglets, où bloquez-vous?

Cordialement.

Invité
Invité


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

Résolu Re: Aide pour page d’accueil ^^

Message par Sugaar964 le Sam 18 Déc 2010 - 18:30

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)

Sugaar964
Nouveau membre

Féminin
Messages : 5
Inscrit(e) le : 18/12/2010

http://graph-addict.forumgratuit.org
Sugaar964 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour page d’accueil ^^

Message par Invité le Sam 18 Déc 2010 - 19:13

Ok,

Donc , pour commencer il faut la structure du tableau à onglets:
<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>
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:
-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%;}
Dernière étape, il faut un script pour "animer" les onglets. Insérez ceci au début de votre message d'accueil:
Code:
<script src="http://sd-2.archive-host.com/membres/up/86411517957321821/onglet.js
"></script>
Cordialement.

Invité
Invité


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

Résolu Re: Aide pour page d’accueil ^^

Message par Sugaar964 le Sam 18 Déc 2010 - 19:24

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 (:

Sugaar964
Nouveau membre

Féminin
Messages : 5
Inscrit(e) le : 18/12/2010

http://graph-addict.forumgratuit.org
Sugaar964 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour page d’accueil ^^

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

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.
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%;}
En ce qui concerne les images à la place de "onglet 1,2,3 ..." remplacez le texte par:
Code:
<img src="url de l'image" />
Cordialement.

Invité
Invité


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

Résolu Re: Aide pour page d’accueil ^^

Message par Sugaar964 le Dim 19 Déc 2010 - 1:50

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

Sugaar964
Nouveau membre

Féminin
Messages : 5
Inscrit(e) le : 18/12/2010

http://graph-addict.forumgratuit.org
Sugaar964 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour page d’accueil ^^

Message par Invité le Dim 19 Déc 2010 - 10:25

Bonjour,

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;}
Faites un tour sur ce site , vous y trouverez les propriétés CSS les plus courantes Wink .

Cordialement.

Invité
Invité


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