Ik ben bezig met het maken van een dashboard.
Maar ik heb ergens een fout in mijn code zitten waardoor sommige elementen niet goed worden weergeven.
Tevens werk ik voor het eerst met procenten in plaats van pixels.
Kan iemand mij helpen?
Alvast bedankt!
Met vriendelijke groet,
Dimitri Geers
<html>
<head>
<title>Dashboard | Dimitri Geers CMS</title>
<link href="dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Dimitri Geers CMS" />
<meta name="author" content="Dimitri Geers" />
</head>
<body>
<div class="sidebar">
<div class="logo">
<img src="logo-wit.png" />
</div>
<div class="titel">Menu</div>
<ul>
<li>Home</li>
<div class="divider"></div>
<li>Pagina</li>
<div class="divider"></div>
<li>Menu</li>
<div class="divider"></div>
<li>Nieuws</li>
<div class="divider"></div>
<li>Agenda</li>
<div class="divider"></div>
<li>Portfolio</li>
<div class="divider"></div>
</ul>
<div class="titel">Admin Menu</div>
<ul>
<li><i class="icon-user"></i> Gebruikers</li>
<div class="divider"></div>
<li><i class="icon-sort-by-attributes"></i> Rangen</li>
<div class="divider"></div>
<li><i class="icon-pencil"></i> Website</li>
<div class="divider"></div>
<li><i class="icon-screenshot"></i> Logs</li>
<div class="divider"></div>
</ul>
</div>
<div class="container">
<div class="header">
<div class="profiel"><div style="
width: 80px;
height: 80px;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
background: url(http://www.dimitrigeers.nl/cms/profiel.png) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
float: left;
"></div> <div class="tekst">Dimitri Geers</div></div>
<div class="menu"><i class="icon-cog"></i> Instellingen | <i class="icon-signout"></i> Afmelden</div>
</div>
<div class="stats">
<div class="stats-oranje">
<div style="font-size: 23px;margin-bottom: 1%;"><b>4</b></div>
<div style="font-size: 18px;">Geregistreerde sites</div>
<div style="font-size: 15px;">in jouw beheer</div>
</div>
<div class="stats-groen">
<div style="font-size: 23px;margin-bottom: 1%;"><b>1810</b></div>
<div style="font-size: 18px;">Gebeurtenissen</div>
<div style="font-size: 15px;">in de logs</div>
</div>
<div class="stats-lichtblauw">
<div style="font-size: 23px;margin-bottom: 1%;"><b>5</b></div>
<div style="font-size: 18px;">Gebruikers</div>
<div style="font-size: 15px;">beheren dezelfde sites</div>
</div>
<div class="stats-donkerblauw">
<div style="font-size: 23px;margin-bottom: 1%;"><b>18324</b></div>
<div style="font-size: 18px;">Aantal keer bekeken</div>
<div style="font-size: 15px;">alle sites die jij beheert</div>
</div>
</div>
<div class="versie-message">
Uw CMS draait op de volgende versie: V3.0.0. Update's worden automatisch uitgevoerd!
</div>
</div>
</body>
</html>body {
font-family: "Helvetica Neue", Helvetica, "Noto Sans", sans-serif, Arial, sans-serif;
padding: 0px;
margin: 0px;
}
/* Begin sidebar */
.sidebar {
height: 100%;
width: 20%;
background-color: #2F3543;
color: #949494;
float: left;
position: fixed;
}
.sidebar .logo {
width: 90%;
height: auto;
margin: 0px auto;
}
.sidebar .logo img {
width: 100%;
height: auto;
margin-top: 6%;
}
.sidebar .titel {
background-color: #282B34;
width: 90%;
height: auto;
padding: 4%;
padding-left: 5%;
padding-right: 5%;
font-size: #17px;
color: #FFF;
border-top: 1% solid;
border-bottom: 1% solid;
border-color: #212832;
margin-top: 6%;
}
/* sidebar menu */
.sidebar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.sidebar ul li {
width: 100%;
height: auto;
font-size: 15px;
padding: 4%;
padding-left: 5%;
padding-right: 5%;
}
.sidebar ul li:hover {
width: 90%;
background-color: #404759;
}
.sidebar ul .divider {
height: 0.25%;
width: 100%;
background-color: #404759;
}
/* Begin main content */
.container {
width: 70%;
height: auto;
margin-left: 25%;
margin-top: 1%;
position: absolute;
}
/* Header */
.header {
width: 100%;
height: auto;
color: #6C6C6E;
margin-bottom: 4%;
}
.header .profiel {
width: 50%;
height: auto;
float: left;
clear: both;
}
.header .profiel .tekst {
width: 40%;
height: auto;
float: left;
margin-left: 5%;
margin-top: 7%;
}
.header .menu {
width: 50%;
height: auto;
margin-top: 3.5%;
text-align: right;
float: left;
}
/* Statistieken */
.stats {
width: 100%;
height: auto;
margin-top: 4%;
}
.stats .stats-oranje {
background: #F26C4F;
width: 21.5%;
margin-right: 2%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
.stats .stats-groen {
background-color: #00A652;
width: 21.5%;
margin-right: 2%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
.stats .stats-lichtblauw {
background-color: #00BFF3;
width: 21.5%;
margin-right: 2%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
.stats .stats-donkerblauw {
background-color: #0072BD;
width: 21.5%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
/* Versie bericht */
.versie-message {
background-color: #2F3543;
width: 98%;
height: auto;
margin-top: 2%;
color: #949494;
padding: 1%;
}
