0
Actuellement, ma barre de navigation apparaît sur le côté gauche de la page plutôt que sur le haut de la page. J'ai inclus un codepen de ce que mon site ressemble et aussi une image de comment je voudrais que la barre de navigation soit montrée. Je voudrais que la barre de navigation apparaisse en haut de la page, l'enquête à gauche et les résultats sur le côté droit. Si quelqu'un pouvait l'aider, ce serait très apprécié!Navbar - Essayer d'afficher la barre de navigation au-dessus de la page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- <link rel="stylesheet" href="flexbox.css"> -->
</head>
<body>
<main class="content" role="main">
<header class="main-header">
<h1 class="name"><a href="#">KeyPath Survey</a></h1>
<ul class="main-nav">
<li><a href="#">My Profile</a></li>
<li><a href="#">Scores</a></li>
<li><a href="#">Favorites</a></li>
</ul>
</header><!--/.main-header-->
<div class="grid-100">
<form action="">
<div class="contained">
<div class="grid-100">
<!-- <h3>KeyPath Survey</h3> -->
</br>
<fieldset>
<div>
<label for="">1. Mixtape put a bird on it sartorial?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">2. Williamsburg unicorn tumeric?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">3. Keytar raclette green juice?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">4. Edison bulb iceland af pug?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">5. Sriracha mumblecore typewriter?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">6. Tote bag shabby chic cred?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">7. Thundercats organic bushwick plaid?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">8. Vexillologist drinking vinegar food truck?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">9. Distillery tbh gastropub DIY austin?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">10. Godard thundercats raw denim four dollar?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
<div class="form-footer">
<button class="button primary submit">Submit Survey</button>
</div>
</form>
</div>
<div class="graph">
<canvas id="myChart"></canvas>
</div>
</main>
<!-- <div>
Score: Verbal <span id="verbal">0</span>
Non-Verbal <span id="non-verbal">0</span>
Written <span id="written">0</span>
</div> -->
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<script src="main.js"></script>
</html>
.wrapper {
width:90%;
margin-right: auto;
margin-left: auto;
}
.content {
display: flex;
}
.grid-100, .graph {
flex: 1 0 0;
margin-left: 20px;
}
.grid-75 {
padding-top: 15px;
padding-bottom: 15px;
}
.button {
background-color: #5fcf80;
border: solid 2px #5fcf80;
font-size: 14px;
height: 40px;
line-height: 36px;
padding: 0 15px;
margin-top: 20px;
color: #fff;
margin-left: 40px;
}
fieldset {
margin-bottom: 20px;
}
.form-footer .button {
margin: 0 10px 10px 0;
}
div.chosen-container a.chosen-single {
background: #e8ebed;
border: 2px solid #e8ebed;
outline: none;
font-size: 14px;
padding-right: 40px;
height: 44px;
color: #4b5658;
box-shadow: none;
border-radius: 5px;
transition: background 0.25s ease;
}
.graph {
margin-top: 30px;
}
/*Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
font-size: 1.35em;
margin: 0;
}
.main-nav {
margin-top: 5px;
}
.name a,
.main-nav a {
text-align: center;
display: block;
padding: 10px 15px;
}
.main-nav a {
font-size: .95em;
color: #3acec2;
text-transform: uppercase;
}
.main-nav a:hover {
color: #093a58;
}
/* ---- Layout Containers ---- */
.main-header {
padding-top: .5em;
padding-bottom: .5em;
}
.banner,
.main-footer {
text-align: center;
}
.banner {
color: #fff;
background: #3acec2;
padding: 3.2em 0;
margin-bottom: 48px;
}
.col {
padding-right: 1em;
padding-left: 1em;
}
.main-footer {
background: #d9e4ea;
padding: 2em 0;
margin-top: 30px;
}
/* ---- Page Elements ---- */
.logo {
width: 190px;
}
.headline {
margin-bottom: 0;
}
.feat-img {
border-radius: 5px;
}
/* =================================
Media Queries
==================================== */
@media (min-width: 769px) {
.main-header,
.row {
width: 90%;
margin: 0 auto;
}
.tagline {
font-size: 1.4em;
}
}
@media (min-width: 1025px) {
.main-header,
.row {
width: 80%;
max-width: 1150px;
}
}
var $selects = $("select"),
data,
ctx = $("#myChart"),
config = {
selected: 0,
type: "pie",
options: {
responsive: true,
pieceLabel: {
render: function(args) {
var selected = function() {
var out = 0;
for (var i = 0; i < data.length; i++) {
out = out + data[i];
}
return out;
};
var percentage = Math.round(args.value/selected() * 100) + "%";
$('#'+args.label).text(percentage);
return percentage;
},
fontSize: 14,
fontStyle: "bold",
fontColor: "#fff",
fontFamily: '"Lucida Console", Monaco, monospace'
}
},
data: {
labels: ["verbal", "non-verbal", "written"],
datasets: [
{
data: [0, 0, 0],
backgroundColor: ["#09c", "#c00011", "green"]
}
]
}
};
myChart = new Chart(ctx, config);
$(".submit").on("click", function(e) {
var results = { v: 0, n: 0, w: 0 },
hasSelected = 0;
e.preventDefault();
$selects.each(function() {
var val = $(this).val();
if (val) {
results[val]++;
hasSelected = 1;
}
});
if (hasSelected) {
data = [];
$.each(results, function(k, v) {
data.push(v);
});
} else {
data = JSON.parse(localStorage.getItem("data"));
}
config.data.datasets[0].data = data;
myChart.update();
localStorage.data = JSON.stringify(data);
});
très agréable. Maintenant, comment puis-je avoir mes résultats (mon graphique à secteurs) à la droite de l'enquête au lieu de ci-dessous? –
Enveloppez les questions et le graphique dans une nouvelle div et définissez-le pour afficher: flex-updated codepen. La raison pour laquelle le graphique est trop grand est l'iframe a défini des mesures de pixel – sol
Parfait! Merci beaucoup pour votre contribution. J'apprécie vraiment cela! –