Problème avec l'affichage de ma page d'accueil
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème avec l'affichage de ma page d'accueil
Bonjour !
J'utilise un code en libre service pour ma PA et je n'avais pas vraiment de problème avec jusqu'à aujourd'hui. Alors que je changeais simplement son contenue, elle a décidé de ne plus m'afficher le bas de la page d'accueil sur mon forum. Pourtant lorsque je visualise ma page html ce problème ne survient pas.
HTML :
Merci d'avance pour votre aide !
J'utilise un code en libre service pour ma PA et je n'avais pas vraiment de problème avec jusqu'à aujourd'hui. Alors que je changeais simplement son contenue, elle a décidé de ne plus m'afficher le bas de la page d'accueil sur mon forum. Pourtant lorsque je visualise ma page html ce problème ne survient pas.
- Spoiler:
HTML :
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" /> <title>PA grise/rose + scrollbar personnalisée.</title> <link href="http://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" type="text/css" /> <style>
body {
background: none;
}
#pa h1, #pa h2, #pa h3, #pa h4, #pa h5, #pa h6, #pa p {
margin: 0; padding: 0; font-weight: normal;
}
#pa {
width: 800px;
min-height: 350px;
border-radius: 10px;
background: #FFE0FF;
margin: 75px auto 20px;
position: relative;
padding-top: 50px;
font-family: "abeatbykai", sans-serif;
font-size: 12px;
letter-spacing: 1px;
color: #fff;
}
#pa a {
color: rgba(209,42,97,1);
text-decoration: none;
}
#pa a, #pa h2, .news p {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#pa a:hover {
color: #D66FDE;
}
#pa h1 {
width: 347px;
height: 70px;
background: url("http://img15.hostingpics.net/pics/694341nuage.png") no-repeat;
position: absolute;
top: -68px;
left: 50%;
margin-left: -173.5px;
text-indent: -9999px;
}
ul#ticker01, ul#concours, ul.groupes, ul#staff
{
list-style-type: none;
margin: 0;
padding: 0;
}
#pa h2 img {
position: absolute; top:0;
}
#pa table td {
min-height: 50px;
border-radius: 10px;
position: relative;
padding-top: 25px;
}
#pa table td.withbg {
background: #EDB6EC;
}
#pa h2 {
height: 34px;
position: absolute;
top: -12.5px;
z-index: 3;
font-size: 34px;
font-family: 'Covered By Your Grace', cursive;
}
#pa h2:hover {
color: );
}
/* CONCEPT */
.concept {
height: 192px; max-height: 192px;
overflow-y: scroll;
padding: 1px;
}
.concept p {
margin-bottom: 20px !important;
padding-right: 20px !important;
}
.concept p:last-child {
margin-bottom: 0px !important;
}
/* GROUPES */
.groupes {
height: 60px; max-height: 60px;
text-align: center;
}
.groupes li {
display: inline-block;
margin: 0 10px;
}
/* NEWS */
.news {
height: 87px; max-height: 87px;
overflow-y: scroll;
}
.news strong {
color: #fff;
font-family: sans-serif;
text-transform: uppercase;
font-weight: normal;
}
.news p {
border-bottom: 0px solid lightgray;
padding: 2px 0 !important; margin: 2px 0 !important;
}
.news p:hover {
border-bottom: 0px solid lightgray;
padding: 2px 0 2px 20px !important; margin: 2px 0 !important;
}
/* CONCOURS */
ul#concours {
width: 280px;
height: 114px; max-height: 114px;
margin: 0px auto 0;
text-align: center;
}
ul#concours li {
width: 97px;
margin: 0 5px;
display: inline-block;
position: relative;
z-index: 4;
}
ul#concours li span {
display: none;
width: 150px;
padding: 10px;
position: absolute;
bottom: 60px; right: 50%; margin-right: -75px;
background: #EFDFDF;
color: #fff;
z-index: 5;
border-radius: 10px;
border-bottom: 1px solid #d74e77;
}
ul#concours li:hover span {
display: block;
}
ul#concours li span img {
max-width: 150px;
height: auto;
}
.fleche {
width: 26px;
height: 12px;
background: url("http://img15.hostingpics.net/pics/941083fleche11.png");
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -13px;
}
/* STAFF */
#staff img, ul#concours li img.mini {
-webkit-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
-moz-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
-ms-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
-o-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
}
#staff li {
display: inline-block;
width: 125px; max-width: 150px;
}
#staff li:hover {
cursor: help;
}
.staff p {
padding: 10px 0 10px !important;
}
.staff{
text-align: center;
}
.staff .pseudo
{
display: inline-block;
color: rgba(209,42,97,1);
}
/* PARTENAIRES */
td.partenaires {
padding-top: 15px !important;
}
.tickercontainer { /* the outer div with the black border */
width: 750px;
height: 31px;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: relative;
z-index: 2;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 0px;
top: 0px;
width: 750px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
width: 88px;
margin: 0 2px;
padding: 0;
}
/* CREDITS */
#credits {
position: absolute;
padding: 0px 10px;
bottom: -20px;
right: 0px;
height: 20px;
line-height: 20px;
font-size: 8px;
color: gray;
text-transform: uppercase;
text-shadow: 1px 1px 0px #ffffff;
}
/* SCROLLBAR */
::-webkit-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-webkit-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-webkit-scrollbar-corner{background:none;}
::-moz-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-moz-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-moz-scrollbar-corner{background:none;}
::-ms-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-ms-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-ms-scrollbar-corner{background:none;}
::-o-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-o-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-o-scrollbar-corner{background:none;}
::-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
::-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
::-scrollbar-corner{background:none;}
</style>
<div id="pa">
<h1>
bienvenue !
</h1>
<table style="width: 800px;" id="contenu-general" cellpadding="10px" cellspacing="15px">
<tbody>
<tr>
<td style="width: 300px;" class="withbg" valign="top" rowspan="2">
<h2>
<span style="color: rgba(209,42,97,1);">The legend</span>
</h2>
<div class="concept">
<p>
« La légende du massacre des zooanthropes raconte que voyant leur peuple se faire décimer un par un par l'espèce humaine, les dieux zooanthropes se seraient mit à verser des larmes de sang, exprimant toute leur peine et leur colère.
</p>
<p>
<em>Uminokami</em>, le dieu de la mer. <em>Chikyünokami</em>, le dieu de la terre. Et <em>Kükinokami</em>, le dieu de l'air.
</p>
<p>
Toute leur haine envers le peuple humain et toute leur tristesse pour le leur auraient pris la forme d'une pluie rougeoyante, s'abattant avec violence sur le lieu du massacre. De cette pluie serait alors née <em>Chinoame</em>, la déesse vengeresse. On raconte d'elle qu'elle serait descendue sur terre sous la forme d'une magnifique kitsune, aux yeux d'un rouge aussi profond qu'effrayant. Elle était d'une beauté divine et brillait en véritable brasier dans l'obscurité. En voyant le sort qu'avaient infligé les humains à ses congénères, elle aurait alors poussé un hurlement strident qui provoqua une onde de choc suffisamment puissante pour tout détruire sur plusieurs centaines de kilomètres, annihilant tout sur son passage ; du sol furent arrachés plus de 400 mètres de profondeur. Après l'intervention de la déesse destructrice ne restait plus qu'un énorme canyon. Il fut baptisé par la légende le canyon Aka, pour que les zooanthropes se souviennent de tout le sang qui fut versé par la cruauté de l'être humain. »
</p>
</div>
</td>
<td style="width: 450px;" valign="top">
<ul class="groupes">
<li>
<a style="color: #636161; font-family: 'Covered By Your Grace', cursive; font-size: 17px; text-align: justify;" href="">Citoyens</a>
</li>
<li>
<a style="color: #568DDE; font-family: 'Covered By Your Grace', cursive;font-size: 17px; text-align: justify;" href="">Zooanthropes humanoïdes</a>
</li>
<li>
<a style="color: #B32E39; font-family: 'Covered By Your Grace', cursive;font-size: 17px; text-align: justify;" href="">Zooanthropes animoïdes</a>
</li>
<li>
<a style="color: #8D2AC7; font-family: 'Covered By Your Grace', cursive;font-size: 17px; text-align: justify;" href="">Zooanthropes polymorphiques</a>
</li>
</ul>
</td>
</tr>
<tr>
<!-- <td>lol</td> on supprime cette ligne, car rowspan -->
<td class="withbg" valign="top">
<h2>
<span style="color: rgba(209,42,97,1);">News </span>
</h2>
<div class="news">
<p>
<strong> /05/16 : </strong><span style="color: rgba(209,42,97,1);">Zooanthrope ouvre ses portes !</span>
</p>
</div>
</td>
</tr>
<tr>
<td class="withbg" valign="top">
<h2>
<a style="color: rgba(209,42,97,1)">Membres du mois</a>
</h2>
<ul id="concours">
<li>
<br /> <br /><br /><br /><img class="mini" alt="AOTM" src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" />
<!-- miniature concours 84*37px --> <a style="color: rgba(209,42,97,1)">PSEUDO </a> <a href="">PROFIL</a> • <a href="">MP</a>
</li>
<li>
<img class="mini" alt="AOTM" src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" />
<!-- miniature concours 84*37px -->
<div class="titre-concours">
<div class="pseudo">
<a style="color: rgba(209,42,97,1)"> PSEUDO </a>
</div>
<a href="">PROFIL</a> • <a href="">MP</a>
</div>
<!-- titre concours -->
</li>
<!--
BLOC A DUPLIQUER SI 3 OU 4 CONCOURS :
<li>
<img src="staff.png" alt="AOTM" class="mini">
<div class="titre-concours"><div class="pseudo">
<span style="color: rgba(209,42,97,1);">PSEUDO</span>
</div>
<a href="">PROFIL</a> <a href="">MP</a></div>
</li> -->
</ul>
</td>
<td class="withbg" valign="top">
<h2>
<span style="color: rgba(209,42,97,1);">Staff </span>
</h2>
<ul id="staff">
<center>
<li onmouseover="javascript:staff1()">
<img alt="" src="http://img11.hostingpics.net/pics/639594NanaseHarukaFreefull1823926.jpg" />
</li>
<li onmouseover="javascript:staff2()">
<img alt="" src="http://img11.hostingpics.net/pics/608546KuzeHibikifull1518049.jpg" />
</li>
</center>
</ul>
<div class="staff">
<div id="staff1">
<p>
Alias la tortionnaire. Sous ses airs de gamines au visage joufflu votre chère fonda a bien des humeurs assez lunatiques. Tantôt elle vous fera des câlins, tantôt elle jouera les petites pestes en se plaignant qu'elle déteste tout le monde, mais que tout le monde l'aime. Malgré son fort caractère elle reste tout de même amicale et prête à vous guider vers le droit chemin. <br /> <span style="color: #D66FDE;"><em>" Tu veux un cookie ? ~ "</em></span>
</p>
<div class="pseudo">
Joshua M. Meroham
</div>
• <a href="http://zooanthrope.forumactif.org/u3">PROFIL</a> • <a href="http://zooanthrope.forumactif.org/privmsg?mode=post&u=3">MP</a>
</div>
<div style="display:none;" id="staff2">
<p>
Votre chère admin est parfois capable de prononcer des paroles dignes d'une fugitive d'asile. Ne vous affolez pas pour autant elle ne mord plus une fois qu'on sait comment l'amadouer. Sous ses airs un peu barj' se cache peut-être un cœur tendre ? Ou bien un cœur de pierre, à voire... Quoi qu'il en soit n'hésiter pas à lui demander de l'aide, elle ne mord que la première fois... héhé. <br /> <span style="color: #D66FDE;"><em>" You know what I like most about people ? ...They die. "</em></span>
</p>
<div class="pseudo">
Micah M. Meroham
</div>
• <a href="http://zooanthrope.forumactif.org/u2">PROFIL</a> • <a href="http://zooanthrope.forumactif.org/privmsg?mode=post&u=2">MP</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="withbg partenaires" colspan="2" valign="top">
<h2>
<span style="color: rgba(209,42,97,1);">Partenaires </span>
</h2>
<ul id="ticker01">
<li>
<a href=""><img alt="" src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" /></a>
</li>
<li>
<a href=""><img alt="" src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" /></a>
</li>
<li>
<a href=""><img alt="" src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" /></a>
</li>
<!-- eccetera -->
</ul>
</td>
</tr>
</tbody>
</table>
<div id="credits">
PA réalisée par Henrykiki sur <a target="_blank" href="http://www.never-utopia.com/t52871-henrykiki-pa-grise-rose-pale">Never-Utopia</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript">
/*!
* liScroll 1.0
* Examples and documentation at:
* http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
* 2007-2010 Gian Carlo Mingati
* Version: 1.0.2.1 (22-APRIL-2011)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires:
* jQuery v1.2.x or later
*
*/
jQuery.fn.liScroll = function(settings) {
settings = jQuery.extend({
travelocity: 0.07
}, settings);
return this.each(function(){
var $strip = jQuery(this);
$strip.addClass("newsticker")
var stripWidth = 1;
$strip.find("li").each(function(i){
stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
});
var $mask = $strip.wrap("<div class='mask'></div>");
var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
var containerWidth = $strip.parent().parent().width(); http://a.k.a. 'mask' width
$strip.width(stripWidth);
var totalTravel = stripWidth+containerWidth;
var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye
function scrollnews(spazio, tempo){
$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
}
scrollnews(totalTravel, defTiming);
$strip.hover(function(){
jQuery(this).stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
});
};
</script> <script>
$(function(){
$("#ticker01").liScroll();
});
function staff1() {
document.getElementById('staff1').style.display='block';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';}
function staff2() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='block';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';}
function staff3() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='block';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';}
function staff4() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='block';
document.getElementById('staff5').style.display='none';}
function staff5() {
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='block';}
</script>
Merci d'avance pour votre aide !
Dernière édition par ChiNoAmePower le Mar 10 Mai 2016 - 19:45, édité 1 fois
Re: Problème avec l'affichage de ma page d'accueil
Bonjour @ChiNoAmePower, puis je voir à quoi ressemble actuellement la page sur votre forum ?
Sur le forum qui me sert un peu de cobaye, j'ai mis votre code et il fonctionne :
http://monkeytest.forumactif.org/h1-test-pour-chinoamepower
Qu'est ce que vous voulez changer sans être indiscret ?
Cordialement
Sur le forum qui me sert un peu de cobaye, j'ai mis votre code et il fonctionne :
http://monkeytest.forumactif.org/h1-test-pour-chinoamepower
Qu'est ce que vous voulez changer sans être indiscret ?
Cordialement
Re: Problème avec l'affichage de ma page d'accueil
Sur la capture d'écran que j'ai mise en spoiler on voit que le bas de la page est coupé et j'ignore à quoi c'est du :/
Re: Problème avec l'affichage de ma page d'accueil
Bonjour,
Des balises sont ouvertes et jamais refermées et il manque la balise <body>.
Repérer et remplacer
Ajouter à la fin de votre code
et idéalement les <script> devraient être déplacés de la section head à la section body.
Des balises sont ouvertes et jamais refermées et il manque la balise <body>.
Repérer et remplacer
- Code:
</style>
<div id="pa">
- Code:
</style>
</head>
<body>
<div id="pa">
Ajouter à la fin de votre code
- Code:
</body>
</html>
et idéalement les <script> devraient être déplacés de la section head à la section body.
Re: Problème avec l'affichage de ma page d'accueil
J'ai changé les balises par celles que vous m'avez donné, mais il n'y a aucun changement.
Qu'entendez-vous par "les <script> devraient être déplacés de la section head à la section body" ?
Qu'entendez-vous par "les <script> devraient être déplacés de la section head à la section body" ?
Re: Problème avec l'affichage de ma page d'accueil
Bonjour,
Il est recommandé de placer le CSS (balises <style>) et le code javascript(balise script) dans la section head et ne conserver que le HTML dans la section body.
Un point important : Avez-vous cocher oui ou non à Voulez-vous utiliser le haut et le bas de page de votre forum ?
Votre capture (premier message)
est différente du code HTML fourni (capture d'écran suivant).
Oups cela aurait dû être le contraire : de la section body à la section head.ChiNoAmePower a écrit:Qu'entendez-vous par "les <script> devraient être déplacés de la section head à la section body" ?
Il est recommandé de placer le CSS (balises <style>) et le code javascript(balise script) dans la section head et ne conserver que le HTML dans la section body.
Un point important : Avez-vous cocher oui ou non à Voulez-vous utiliser le haut et le bas de page de votre forum ?
Votre capture d'écran n'indique pas le bas mais plutôt le milieu de votre page (selon votre barre de défilement).ChiNoAmePower a écrit:Alors que je changeais simplement son contenue, elle a décidé de ne plus m'afficher le bas de la page d'accueil sur mon forum. Pourtant lorsque je visualise ma page html ce problème ne survient pas.
Votre capture (premier message)
est différente du code HTML fourni (capture d'écran suivant).
Est-ce possible d'avoir une capture des deux options (forum et prévisualisation)?ChiNoAmePower a écrit: elle a décidé de ne plus m'afficher le bas de la page d'accueil sur mon forum. Pourtant lorsque je visualise ma page html ce problème ne survient pas.
Re: Problème avec l'affichage de ma page d'accueil
J'ai coché non.MasDan a écrit:Un point important : Avez-vous cocher oui ou non à Voulez-vous utiliser le haut et le bas de page de votre forum ?
Voici les deux résultats.
Quand je prévisualise :
- Spoiler:
Sur le forum :
- Spoiler:
Re: Problème avec l'affichage de ma page d'accueil
Bonjour ChiNoAmePower.
Avez-vous changer la hauteur (height) dans votre iframe ? C'est peut-être cela qui fait que la PA se coupe à la fin.
Avez-vous changer la hauteur (height) dans votre iframe ? C'est peut-être cela qui fait que la PA se coupe à la fin.
- Code:
<iframe src="PLACER_LURL_DE_VOTRE_LIEN" width="XXpx" height="XXpx" border="none" frameborder="no"></iframe>
Re: Problème avec l'affichage de ma page d'accueil
Effectivement, le problème venait bien de là ! En rajoutant le texte sur ma PA j'ai agrandie les blocs et j'avais oublié d'augmenter la taille de l'iframe. Merci pour votre aide ! ^^
Re: Problème avec l'affichage de ma page d'accueil
De rien. ^^ Pour mettre faite avoir un nombre incalculable de fois, j'ai vite comprit d'où ça pouvait provenir.
Sujets similaires
» Affichage des visiteurs sur la page daccueil.
» Problème avec Page HTML
» Problème avec Page d'acceuil :(
» Problème avec le pied de page
» Probléme avec ma Page d'accueil
» Problème avec Page HTML
» Problème avec Page d'acceuil :(
» Problème avec le pied de page
» Probléme avec ma Page d'accueil
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum