28172 sujets

CSS et mise en forme, CSS3

Le style ne s'affiche pas en entier

Salut, je comprends pas j'ai voulu tester un pen sur codepen et ça ne s'affiche pas correctement, il y a seulement la moitié de la page qui est stylisé, les boites sont pas ordonnées et pas de graphique ni de diagramme...

https://codepen.io/Darkman75/pen/ONYGZp

J'ai fait comme ci-dessous, avec le style dans paneladmin.css
J'ai ajouté des liens dans le head donné par l'auteur et ça a affiché le graphique mais c'est tout Smiley ohwell 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Content-Language" content="fr" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Darkman75" />
  <link rel="stylesheet" type="text/css" href="paneladmin.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <title>Rencontres</title>
</head>
 
<body>
 
  <div class="panel width1020">
    <div class="partie_gauche element">
        <div>Panel admin</div>
        <ul>
            <li class="active"><a><i class="material-icons">&#xE871;</i><span>Tableau de bord</span></a></li>
            <li><a><i class="material-icons">&#xE7EF;</i><span>Membres</span></a></li>
            <li><a><i class="material-icons">&#xE8A9;</i><span>État du site&lt;/t></span></a></li>
            <li><a><i class="material-icons">&#xE153;</i><span>Signalements</span></a></li>
            <li><a><i class="material-icons">&#xE065;</i><span>à faire</span></a></li>
            <li><a><i class="material-icons">&#xE40B;</i><span>Bannières</span></a></li>
    <li><a><i class="material-icons">&#xE801;</i><span>sondages</span></a></li>
            <li><a><i class="material-icons">&#xE838;</i><span>VIP</span></a></li>
            <li><a><i class="material-icons">&#xE86F;</i><span>Infos développeurs</span></a></li>
    </div><div>
        <div class="element">
            <div class="title middle"><i id="nav_panel" class="material-icons">&#xE5D2;</i><span>tableau de bord</span></div></div>
        <div class="element stat">
            <div class="title middle"><span>Inscrits</span></div>
            <div class="ct-inscrits chart ct-double-octave"></div>
        </div><div class="element stat">
            <div class="title middle"><span>Membres en ligne</span></div>
            <div class="ct-online chart ct-double-octave"></div>
        </div><div class="element stat">
            <div class="title middle"><span>Nombre de posts publiés</span></div>
            <div class="ct-posts chart ct-double-octave"></div>
        </div><div class="element stat">
        <div class="title middle"><span>Nombre de membres VIP</span></div><div class="result">23</div>
        </div><div class="element stat">
        <div class="title middle"><span>gains des dons PAYPAL</span></div><div class="result">540 $</div>
        </div>
    </div>
</div><div id="re"></div>
   
  <script>var data = {
  labels: ['L', 'M', 'M', 'J', 'V'],
  series: [
    [8, 3, 5, 2, 0]
  ]
};
 
var options = {
    showPoint: false,
    lineSmooth: false,
    showArea: true,
    fullWidth: true,
    axisX: {
    showGrid: false,
  },
    axisY: {
    showGrid: false,
        offset: 12
  }
};
new Chartist.Line('.ct-inscrits', data, options);
new Chartist.Pie('.ct-online', {
    labels: ['En ligne','Hors ligne'],
    series: [3, 2]
  });
var options = {
    showPoint: false,
    lineSmooth: false,
    fullWidth: true,
    showArea: true,
    axisX: {
    showGrid: false,
  },
    axisY: {
    showGrid: false,
        offset: 20
  }
};
new Chartist.Line('.ct-posts', {
    labels: ['L', 'M', 'M', 'J', 'V', 'S', 'D'],
    series:[
        [300, 430, 530, 480, 560, 620, 740]
    ]
}, options);</script>
</body>
 
</html>

Modifié par to175 (04 Jul 2016 - 11:27)
Bonjour !

to175 a écrit :
..il y a seulement la moitié de la page qui est stylisé


Ça ressemble à une erreur sémantique, il faut essayer de repérer à partir d'où l'ordinateur a été planté en regardant ce qu'il a déjà pu charger.

Smiley smile
Sujet clos
Aller à