Page Html qui ne s'affiche pas comme voulue

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

Résolu Page Html qui ne s'affiche pas comme voulue

Message par Thalierya le Mer 21 Nov 2012 - 13:29

Bonjour,

J'essaye depuis quelques temps déjà de créer une page HTML, mais le soucis, c'est que je n'y arrive absolument pas >< J'ai essayé de suivre divers infos, trouvées ci et là sur internet, mais je ne parviens pas à résoudre mon soucis. Au début, j'ai souhaité créer un deuxième tableau à onglets dans un premier existant. Or, ce deuxième je ne voulais pas qu'il ait les même propriétés que le premier. Bon, vu que ça ne marchait pas trop, j'ai cherché des infos sur FA, et j'ai appris qu'il fallait pour cela que je crée des pages HTML. Donc, j'essaye, mais là... Ça ne marche pas ! Voilà ce que j'ai rentré dans ma page html :

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* .systab .tab => les onglets */
.systab .tab {
  padding: 2px 10px;
  font-variant:small-caps;
  margin-right: 5px;
  color: #000;
  background: #e2eaed;
  border: 1px solid #000;
  cursor: pointer;
  border-radius: 8px;
  text-shadow: 0 0 5px #fff;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
  background: lightskyblue;
  color: steelblue;
  font-variant:small-caps;
  font-weight:bold;
  border-color: #000000;
  border-radius: 8px;
  text-shadow: 0 0 5px #fff;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  color: steelblue ;
  background: #000;
  border-radius: 8px;
  text-shadow: 0 0 5px #fff;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {
  margin-top: 1px;
  margin-bottom: 1px;
  color: steelblue;
  background: #e2eaed;
  border: 1px solid #000;
  padding: 10px;
  border-radius: 20px;
  }
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
}
</style>

<script type="text/javascript" src="http://lilya.forumsgratuits.fr/11114.js"></script>

</head><body>
<div class="systab"><div>
<span>Votes et partenaires</span>
Votes et partenaires
  </div>
 
  <div>
    <span>Staff</span>
    <a href="http://planete-lilya.forumgratuit.org"><img src="http://i48.servimg.com/u/f48/17/48/52/27/pandor10.png"></a>  <img src="http://i48.servimg.com/u/f48/17/48/52/27/amadeu10.png"></div><div>
    <span>Contexte</span>
    Autrefois Lilya, créée de toutes parts par les trois déesses primaires, Matrynialle, Vixa et Perei, coulait des jours heureux, baignée de lumière, de paix et d'harmonie. Hélas, cette lumière si pure qui éclairait les humains, les elfes et les fées se ternit par l'arrivée progressive des vampires sur la planète divine. Les concepts de paix, de tranquillité ne furent plus alors que de vagues souvenirs dans tous les esprits des Lilyens. Pour rétablir l'ordre entre les humains, les elfes, les fées et les vampires, les déesses mirent au monde deux nouvelles races : les nains, chargés de veiller sur les entrailles de Lilya, et les dragons à qui revint la surveillance des cieux. Seulement les dragons étaient des créatures trop tumultueuses et imprévisibles, ainsi, les anges les remplacèrent dans leur tâche. L'équilibre était alors parfait. Cependant, il ne dura qu'un temps, car des zones d'ombre et de ténèbres apparurent à la surface de Lilya. Il s'agissait d'une invasion de la part de Nog'ather, maître des ombres. Cette conquête de la planète fut possible grâce à l'apparition des drows, des émissaires du démon, des ombres ayant l'apparence d'elfes à la peau grise ou noire. Les Lilyens privés alors de leur lumière divine commencèrent peu à peu à se transformer en de simples esprits, dont l'enveloppe charnelle n'était plus visible, faute de lumière pour la faire briller. En plus de cela, Nog'ather immisça le vice, la folie ou le péché dans les esprits des habitants de la planète qui se mirent alors à s'unir à des animaux, donnant ainsi naissance à des hybrides, des créatures mi-animales, mi-humains, elfes ou fées. Les Lilyens prirent peur et certains se tournèrent vers le culte du démon dans l'espoir que celui-ci les épargnât. On observa petit à petit la division des peuples en trois sortes de camps : les Luxyos, partisans de la lumière, les Umbros qui vouaient leur vie aux ombres, et les Neutres, indécis entre les deux partis opposés.<br><br>Aujourd'hui, chacun vit dans la crainte de se réveiller sans enveloppe charnelle ou d'être devenu fou à lier ou tout simplement d'être tué par son voisin... Les temps sont durs, les ténèbres gagnent du terrain chaque jour, repoussant un peu plus la lumière au fur et à mesure. Finiront-elles par l'emporter totalement ? Ou bien la lumière récupérera-t-elle ses terres perdues ?<br><br>La réponse ne dépend que de toi Pandora ! Alors rejoins-nous vite et choisis ton camp en mêlant ton destin à celui des Lilyens !<br><img src="http://i39.servimg.com/u/f39/16/39/76/87/dasire10.png"><br><img src="http://i39.servimg.com/u/f39/16/39/76/87/lois10.png"> <img src="http://i39.servimg.com/u/f39/16/39/76/87/biblio10.png"> <img src="http://i39.servimg.com/u/f39/16/39/76/87/pantha10.png"> <img src="http://i39.servimg.com/u/f39/16/39/76/87/races10.png">
  </div>

    <div class="selected"><span>Bienvenue à Lilya</span>
    Bienvenue à toi Pandora sur Lilya !<br><br>

Lilya est un forum Rpg heroic fantasy ouvert à toutes et à tous.<br>
L'univers dans lequel il s'inscrit a été créé et imaginé de toutes pièces par sa fondatrice, Pandora, même si on y retrouve les classes et races classiques des forums Rpgs : elfes, anges, humains, guerriers, prêtres, mages etc...<br>
Les propos sexuels sont totalement proscrits, pour ce genre de choses, d'autres forums existent.<br>
Bonne entente et amusement sont mots d'ordre !<br>
Maintenant, à vos plumes, crayons, stylos ou claviers, écrivez, faites-nous pleurer, rire, rager en suivant les aventures de votre personnage !<br><br>-> <a href="http://lilya.forumsgratuits.fr/login">Connexion</a><br>-> <a href="http://lilya.forumsgratuits.fr/register">S'inscrire</a><br><br><br><br><embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.imabox.fr/u17/1205051042ou9fqa01.swf" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit" height="200" width="200" align="center">
  </div><div>
<span>Liens utiles</span>
Liens vers Bibliothèque, Panthéon, Lois etc...
</div><div><span>Quêtes</span>
Liste des quêtes</div><div><span>Dirigeants de Lilya</span></div>
</div>
</body>
</html>

Seulement, voilà ce que j'observe : http://lilya.forumsgratuits.fr/h1-onglets

Pas très joli, déjà avec tous les accents modifiés T__T Et puis ensuite, normalement, ce que j'aurais du avoir, c'est ceci : http://lilya.forumsgratuits.fr/ (le tableau à onglets du message d'accueil).

Donc, si vous pouviez m'aider à résoudre ceci, ce serait gentil de votre part ^^

Et ensuite ! Je préfère le demander de suite, comme ça, je n'aurais pas à revenir une deuxième fois ♪ Bon, je pense que j'aurais le même soucis que là pour créer ma deuxième page HTML avec des onglets, mais lorsque ce problème sera résolu, comment faire en sorte que les onglets de ce deuxième tableau soient intégrés dans un certain onglet ? Et non pas n'importe où.

Merci d'avance,
Bonne journée,
Thalierya ♪


Dernière édition par Thalierya le Mer 21 Nov 2012 - 19:45, édité 1 fois

Thalierya
**

Féminin
Messages : 67
Inscrit(e) le : 03/09/2011

http://planete-lilya.forumgratuit.org/
Thalierya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page Html qui ne s'affiche pas comme voulue

Message par Ea le Mer 21 Nov 2012 - 16:37

Bonjour,


Pour l'encodage, il faut le même que le forum.

Si je fais CTRL + U sur http://lilya.forumsgratuits.fr/ puis que je cherche charset, je trouve :

Code:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Dans votre page html vous devez utiliser ça plutôt que :

Code:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Ensuite, le script considère que la librairie javascript est utilisable.

Cette librairie est ajoutée automatiquement à toutes les pages du forum, à part les pages html sans le haut et le bas du forum ( vu que la page est vide au départ, il faut tout y ajouter soi-même ).

Pour l'ajouter sur la page html, il vous suffit de mettra après la balise <meta ... /> ceci :

Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Pour l'autre question je n'ai pas trop compris, mais pour inclure une page html dans une page html, il faut mettre la balise :

Code:
<iframe src="http://adresse-de-la-page-html-qui-se-trouve-a-la-place-de-cette-balise" style="width:400px;height:200px;"></iframe>
Cordialement.

Ea
Aidactif
Aidactif

Messages : 23428
Inscrit(e) le : 04/04/2008

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

Résolu Re: Page Html qui ne s'affiche pas comme voulue

Message par Thalierya le Mer 21 Nov 2012 - 16:44

Bonjour,

Merci de votre réponse rapide. Cependant, malgré les modifications que vous m'avez dit de faire, je n'obtiens toujours pas ce que je souhaite :/

Voici mon code modifié :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">$(function(){
  var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?
"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d)
});</script>

<style type="text/css">
/* .systab .tab => les onglets */
.systab .tab {
  padding: 2px 10px;
  font-variant:small-caps;
  margin-right: 5px;
  color: #000;
  background: #e2eaed;
  border: 1px solid #000;
  cursor: pointer;
  border-radius: 8px;
  text-shadow: 0 0 5px #fff;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
  background: lightskyblue;
  color: steelblue;
  font-variant:small-caps;
  font-weight:bold;
  border-color: #000000;
  border-radius: 8px;
  text-shadow: 0 0 5px #fff;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  color: steelblue ;
  background: #000;
  border-radius: 8px;
  text-shadow: 0 0 5px #fff;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {
  margin-top: 1px;
  margin-bottom: 1px;
  color: steelblue;
  background: #e2eaed;
  border: 1px solid #000;
  padding: 10px;
  border-radius: 20px;
  }
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
}
</style>

</head><body>
<div class="systab"><div>
<span>Votes et partenaires</span>
Votes et partenaires
  </div>
 
  <div>
    <span>Staff</span>
    <a href="http://planete-lilya.forumgratuit.org"><img src="http://i48.servimg.com/u/f48/17/48/52/27/pandor10.png"></a>  <img src="http://i48.servimg.com/u/f48/17/48/52/27/amadeu10.png"></div><div>
    <span>Contexte</span>
    Autrefois Lilya, créée de toutes parts par les trois déesses primaires, Matrynialle, Vixa et Perei, coulait des jours heureux, baignée de lumière, de paix et d'harmonie. Hélas, cette lumière si pure qui éclairait les humains, les elfes et les fées se ternit par l'arrivée progressive des vampires sur la planète divine. Les concepts de paix, de tranquillité ne furent plus alors que de vagues souvenirs dans tous les esprits des Lilyens. Pour rétablir l'ordre entre les humains, les elfes, les fées et les vampires, les déesses mirent au monde deux nouvelles races : les nains, chargés de veiller sur les entrailles de Lilya, et les dragons à qui revint la surveillance des cieux. Seulement les dragons étaient des créatures trop tumultueuses et imprévisibles, ainsi, les anges les remplacèrent dans leur tâche. L'équilibre était alors parfait. Cependant, il ne dura qu'un temps, car des zones d'ombre et de ténèbres apparurent à la surface de Lilya. Il s'agissait d'une invasion de la part de Nog'ather, maître des ombres. Cette conquête de la planète fut possible grâce à l'apparition des drows, des émissaires du démon, des ombres ayant l'apparence d'elfes à la peau grise ou noire. Les Lilyens privés alors de leur lumière divine commencèrent peu à peu à se transformer en de simples esprits, dont l'enveloppe charnelle n'était plus visible, faute de lumière pour la faire briller. En plus de cela, Nog'ather immisça le vice, la folie ou le péché dans les esprits des habitants de la planète qui se mirent alors à s'unir à des animaux, donnant ainsi naissance à des hybrides, des créatures mi-animales, mi-humains, elfes ou fées. Les Lilyens prirent peur et certains se tournèrent vers le culte du démon dans l'espoir que celui-ci les épargnât. On observa petit à petit la division des peuples en trois sortes de camps : les Luxyos, partisans de la lumière, les Umbros qui vouaient leur vie aux ombres, et les Neutres, indécis entre les deux partis opposés.<br><br>Aujourd'hui, chacun vit dans la crainte de se réveiller sans enveloppe charnelle ou d'être devenu fou à lier ou tout simplement d'être tué par son voisin... Les temps sont durs, les ténèbres gagnent du terrain chaque jour, repoussant un peu plus la lumière au fur et à mesure. Finiront-elles par l'emporter totalement ? Ou bien la lumière récupérera-t-elle ses terres perdues ?<br><br>La réponse ne dépend que de toi Pandora ! Alors rejoins-nous vite et choisis ton camp en mêlant ton destin à celui des Lilyens !<br><img src="http://i39.servimg.com/u/f39/16/39/76/87/dasire10.png"><br><img src="http://i39.servimg.com/u/f39/16/39/76/87/lois10.png"> <img src="http://i39.servimg.com/u/f39/16/39/76/87/biblio10.png"> <img src="http://i39.servimg.com/u/f39/16/39/76/87/pantha10.png"> <img src="http://i39.servimg.com/u/f39/16/39/76/87/races10.png">
  </div>

    <div class="selected"><span>Bienvenue à Lilya</span>
    Bienvenue à toi Pandora sur Lilya !<br><br>

Lilya est un forum Rpg heroic fantasy ouvert à toutes et à tous.<br>
L'univers dans lequel il s'inscrit a été créé et imaginé de toutes pièces par sa fondatrice, Pandora, même si on y retrouve les classes et races classiques des forums Rpgs : elfes, anges, humains, guerriers, prêtres, mages etc...<br>
Les propos sexuels sont totalement proscrits, pour ce genre de choses, d'autres forums existent.<br>
Bonne entente et amusement sont mots d'ordre !<br>
Maintenant, à vos plumes, crayons, stylos ou claviers, écrivez, faites-nous pleurer, rire, rager en suivant les aventures de votre personnage !<br><br>-> <a href="http://lilya.forumsgratuits.fr/login">Connexion</a><br>-> <a href="http://lilya.forumsgratuits.fr/register">S'inscrire</a><br><br><br><br><embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.imabox.fr/u17/1205051042ou9fqa01.swf" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit" height="200" width="200" align="center">
  </div><div>
<span>Liens utiles</span>
Liens vers Bibliothèque, Panthéon, Lois etc...
</div><div><span>Quêtes</span>
Liste des quêtes</div><div><span>Dirigeants de Lilya</span></div>
</div>
</body>
</html>

Thalierya ♪

Thalierya
**

Féminin
Messages : 67
Inscrit(e) le : 03/09/2011

http://planete-lilya.forumgratuit.org/
Thalierya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page Html qui ne s'affiche pas comme voulue

Message par Ea le Mer 21 Nov 2012 - 16:59

Où le testez-vous le code modifié ?

Et il fallait juste ajouter :

Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Pas le fusionner avec l'autre script d'une façon étrange =p

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23428
Inscrit(e) le : 04/04/2008

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

Résolu Re: Page Html qui ne s'affiche pas comme voulue

Message par Thalierya le Mer 21 Nov 2012 - 18:25

Bon, j'ai modifié en enlevant l'autre script inutile. Mais... J'obtiens toujours la même chose : C'est-à-dire, aucun onglet :/

Voilà ce que j'ai :

http://lilya.forumsgratuits.fr/

C'est ce qu'il y a sous le message d’accueil.

Thalierya
**

Féminin
Messages : 67
Inscrit(e) le : 03/09/2011

http://planete-lilya.forumgratuit.org/
Thalierya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page Html qui ne s'affiche pas comme voulue

Message par Ea le Mer 21 Nov 2012 - 19:31

Donc sur la page :
http://lilya.forumsgratuits.fr/h1-

Au départ vous aviez le script des onglets :

Code:
<script src="/11114.js" type="text/javascript"></script>
et pas la librairie jquery.

Maintenant vous avez la librairie jquery mais plus le script des onglets.

Enfin il faut ajouter après :

Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Le code pour les onglets :

Code:
<script src="/11114.js" type="text/javascript"></script>
Cordialement.

Ea
Aidactif
Aidactif

Messages : 23428
Inscrit(e) le : 04/04/2008

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

Résolu Re: Page Html qui ne s'affiche pas comme voulue

Message par Thalierya le Mer 21 Nov 2012 - 19:45

Ah, d'accord !!! Merci beaucoup, maintenant, cela marche à merveille ! Very Happy

Et j'ai même réussi à intégrer mon deuxième tableau à onglets, comme vous pourrez le voir ici : http://lilya.forumsgratuits.fr/h1-onglets (dans l'onglet "Dirigeants de Lilya")

Problème résolu ! Yahoo

Thalierya
**

Féminin
Messages : 67
Inscrit(e) le : 03/09/2011

http://planete-lilya.forumgratuit.org/
Thalierya 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