Aide au HTML - Libre Service et Petit Cours

Oui moi aussi j'aimerais bien le savoir 8D

Au pif je met ça : http://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil

Merci beaucoup Soni' !

de rien et merci forumactif et Twitter.

Oui merci, c'est pas mal, Mais encore ? ^^"

*fait sa chiante....*

bah après c'est le début, le suite c'est plus compliqué : http://www.school-of-pub.net/t4620-faire-une-en-tete-sous-forme-d-onglets

Miettes explique super bien ses tuto *w*

mouais elle et moi on sympathise pas trop...

Bah, vas sur le Chat tu pourra peut être la croiser =)

Sinon j'ai eu envie de faire un petit tuto vus que je suis entrain d'en faire pour BF:

Les div class
A quoi ça sert? : C'est très simple, à faire moins de codes Xx Avec une div tu peux perdre par exemple 2lignes de codes!
Ca à l'air cool mais comment on fait?: C'est très simple, tu vas dans ta feuille de style CSS[panneau d'administration=>affichage=>Couleurs et images=>Images]. Maintenant c'est très simple -ou pas-

Tu commence à écrire ton CSS ça doit se présenter un peu comme ça:

Code:: .nomdetadiv{
Propriétés de ta div ;
}

Note: La ou il y a marqué propriété de la div les chose doivent se présenter un peu comme ça:

Code:: .cadre{
background-image : url('http://img11.hostingpics.net/pics/475902Fond.png');
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
border: 1px solid black;
}

Et voilà! t'as créé t div! Maintenant t'es content! -ou pas- =D

Bon OK et comment on le met dans un message? : C'est surement la partie la plus simple du tuto =D

Code:: <div class="nomdetadiv">Texte</div>

Note: Tu peux donner le nom que tu veux à ta div, tu peux même l'appeler patatebleu si tu veux Xx

Merci mais non on s'entend pas trop bien, sinon bon tuto, tu a un exemple ?

merci c'est Super bien Silia !

Et merci Soni' pour le site ^^

de rien, j'ai mit ça... au pif.

Ba c'est deja ça ! Merci tout ses bon tutoooo *O* Yah

Merci beaucoup pour toutes ces informations, depuis le temps que je bataille avec le HTML !

Yeah !! C'est la classe ! =D

Je pose la question vu que je suis dessus ♪

Es-ce que la signature en onglets intéresse quelqu'un ici ?

Age : 25 Messages : 1591 Arrivé(e) sur MMD le : 09/04/2011

Moi Tsuki ça m'intérésserait bien :3

D'accord, donc déjà, ça ressemble à un truc comme ça :

[ma signature en cours]
(j'ai encore un problème avec les deux bordures grises)

Bonjour à tous et à toutes

Aujourd’hui je vais vous apprendre à créer une signature en onglets, ce n’est pas extra, il faut l’avouer, mais c’est déjà mieux que rien, les onglets ne sont pas supers, je ne suis pas une pro dans ce domaine, j’ai encore un peu de mal, enfin enfin, voici le tuto :

Niveau : Difficile, il faut tout de même des connaissances dans le domaine
Vous aurez besoin de : Page HTML – utiliser une Iframe – CSS – Javascript

1. LE CODE JAVASCRIPT

Le code Javascript, je ne vais pas revenir dessus étant assez compliqué.

Je l’ai installé sur le forum, donc vous n’avez pas besoin de l’ajouter, il sert uniquement à ceux qui veulent l’utiliser sur les forums dont ils ont accès. (en sachant qu’il faut créer une nouvelle page Javascript dans ‘Modules’ du PA)

Code:: function changeOnglet(_this){
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('span');
for(var i = 0; i < getOnglets.length; i++){
if(getOnglets[i].id){
if(getOnglets[i].id == _this.id){
getOnglets[i].className = 'mon_onglet_selected';
document.getElementById('c' + _this.id).style.display = 'block';
}
else{
getOnglets[i].className = 'mon_onglet';
document.getElementById('c' + getOnglets[i].id).style.display = 'none';
}
}
}
}

2. LE CODE DE LA SIGNATURE

C’est l’Iframe, le code que vous collez dans la signature pour faire marcher votre page HTML, vous pouvez la coller sur les posts ou sur les signatures.

Code:: <iframe src="URL DE VOTRE PAGE HTML" style="overflow: hidden;" width="LARGEUR" frameborder="no" height="HAUTEUR"></iframe>

3. LA PAGE HTML

C’est le plus complet, l’endroit où vous aurez sûrement le plus de mal, pour remplir le contenu, je vous conseille de remplir d’abord le contenu sur le PA d’un forum, passer en HTML (en vert) et copier le code, le rajouter dans code ‘contenu’ et ça ira, je vous conseille cette méthode pour ceux qui ont vraiment des problèmes.

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
<title>Simple Javascript Accordions - by www.dezinerfolio.com</title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin:10px;
}

#basic-accordian{
border:5px solid #eee;
padding:5px;
width:375px;
height: 100px;
position:absolute;
left:50%;
top:50%;
margin-left:-175px;
z-index:2;
margin-top:-100px;
}

.accordion_headings{
float: left;
padding:5px;
background:#1B8DD0;
color:#FFFFFF;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}

.accordion_headings:hover{
background:#D0E2EB;
}

.accordion_child{
padding:15px;
background:#EEE;
}

.header_highlight{
float: left;
background:#D0E2EB;
}

</style>
<script type="text/javascript" src="http://sd-5.archive-host.com/membres/up/86411517957321821/menuaccordeon.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">

<div id="basic-accordian" >

<table>
<tr>
<td><div style="width:250px;">
<div id="test1-header" class="accordion_headings header_highlight" >ONGLET 1</div>
<div id="test2-header" class="accordion_headings" >ONGLET 2</div>
<div id="test3-header" class="accordion_headings" >ONGLET 3</div>
</div></td></tr>
<tr>
<td><div style="width:350px;">
<div id="test1-content">
<div class="accordion_child">
CONTENU 1
</div>

<div id="test2-content">
<div class="accordion_child">
CONTENU 2

</div>

<div id="test3-content">

<div class="accordion_child">
CONTENU 3
</div>
</div>
</div>
</td></tr>
</table></div>


</body>
</html>

Si quelqu'un en a besoin, je rajouterais les endroits où changer pour les couleurs.

Voilà, pour une question, demandez =3

wow, je comprend mieux, ce tuto répond à une de mes questions.

Merci tsuki tu explique vachement bien tes tuto *o* !!!!

Merci c'est super !!!

Age : 28 Messages : 172 Arrivé(e) sur MMD le : 25/07/2011

Super mais idem je comprends rien xD

Le plus simple ce serait de dire : copié collé ça et c'est tout (° w °)

Invité

SOS Tsuki ♪

J'voudrais utiliser ton code pour le carnet de voyage de Remi' et Blair.

J'ai c/c le code et l'est remplis aux endroits indiqué ( " CONTENU 1 " 2 et 3 ).
Le premier onglet affiche son contenu mais les onglets suivant non.
Pourquoi? D8

Spoiler:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
<title>Simple Javascript Accordions - by www.dezinerfolio.com</title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin:10px;
}

#basic-accordian{
border:5px solid #eee;
padding:5px;
width:375px;
height: 100px;
position:absolute;
left:50%;
top:50%;
margin-left:-175px;
z-index:2;
margin-top:-100px;
}

.accordion_headings{
float: left;
padding:5px;
background:#1B8DD0;
color:#FFFFFF;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}

.accordion_headings:hover{
background:#D0E2EB;
}

.accordion_child{
padding:15px;
background:#EEE;
}

.header_highlight{
float: left;
background:#D0E2EB;
}

</style>
<script type="text/javascript" src="http://sd-5.archive-host.com/membres/up/86411517957321821/menuaccordeon.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">

<div id="basic-accordian" >

<table>
<tr>
<td><div style="width:250px;">
<div id="test1-header" class="accordion_headings header_highlight" >Remilia Scarlet</div>
<div id="test2-header" class="accordion_headings" >Relation</div>
<div id="test3-header" class="accordion_headings" >Rp's</div>
</div></td></tr>
<tr>
<td><div style="width:350px;">
<div id="test1-content">
<div class="accordion_child">
Remilia Scarlet, ce nom fait frissoner plus d'un.
Jeune reine du royaume de carreau, elle n'hesite pas a trancher tête et prendre quelconque vie.
Elle ne connaît aucune limite.
C'est la reine, après tout.
</div>

<div id="test2-content">
<div class="accordion_child">
<font color="blue"> Sakuya Izayoi</font>, la maid en chef. Sa maid en chef.
Remilia ne l'avouera jamais mais lors des combats un peu risqué,
elle se fait un sang d'encre pour elle.
On dit qu'une sorte de dette les lient, est-ce vrai?

<font color="green">Hong Meiling-China</font>, paresseuse, petite amie de Sakuya.
C'est la camarade de "chamaillerie" de Remilia.
Notre reine se sent bien en sa compagnie, pourquoi?
On dit que, lorsqu'elle joue avec la gardienne,
ses deux souvenirs du temps où elle était avec sa soeur refont surface.
La nostalgie mais aussi son âme d'enfant reviennent alors à la surface..
C'est ce qu'on dit...

<font color="black">Arias T. Sora</font>, cet horrible gamin.
Ce répugnant personnage, Remilia le déteste.
Si elle pouvait, elle le tuerait une bonne fois pour toute mais...
Pourquoi tuer un jouet?

</div>

<div id="test3-content">

<div class="accordion_child">
<a href="http://ahswonderland.forumgratuit.org/t108-promenade-royale">Promenade royale.</A>
Avec Sakuya Izayoi et Alysse.
Alysse, intéresse la reine lors d'un combat dans la rue.
La reine souhaite en faire une apprentie pour Sakuya,
un test est organisé en l'occassion...
</div>
</div>
</div>
</td></tr>
</table></div>


</body>
</html>

Requête 2:
Comment agrandir le tableau?

Répond si tu veux, si tu veux, si tu as le temps et si tu as envie >.<

Tu colles bien le code dans une nouvelle page HTML ? (PA > Modules > Créer une page HTML)
L'iframe elle ira dans le sujet, tout doit se passer dans la page HTML, tu peux la créer via Broken Flower.

Sinon, pour agrandir le tableau, c'est :

Code:: <td><div style="width:250px;">

Invité

D'accord, merci ♥