0
Im пытается создать веб-сайт, который является только одной длинной страницей, которая прокручивается после щелчка по ссылкам навигации. Тем не менее, я не могу заставить веб-сайт прокручивать или получить навигационную панель, чтобы оставаться неподвижной наверху. Пример того, что я пытаюсь достичь здесь: studio89.orgВеб-сайт не прокручивается
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="description" content="Youth Volunteering Organization">
<meta name="author" content="Vibhas Vatve">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Youth | Society</title>
<! -- BOOTSTRAP LINKS -- >
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<! -- Mobile META tags -- >
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<! -- CSS FILE -- >
<link rel="stylesheet" href="no.css">
</head>
<header>
<div class="nav">
<ul class="first">
<li><a href="#intro" class="smoothScroll">Home</a></li>
<li><a href="#about" class="smoothScroll">Team</a></li>
</ul>
<ul class="second">
<li><a href="#event" class="smoothScroll">Event</a></li>
<li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>
</div>
</header>
<body>
<div class="container">
<div class="row">
<div class="who">
<h2>Who Are We?</h2>
<p>YES is an organization founded by youth for youth to help make a positive change within society. By supporting a large variety of organizations both big and small within the community, youth not only get the opportunity to explore their interests, but are able to gain a voice in society. If you are interested, our weekly meetings will begin in 2015.</p>
</div>
</div>
<div class="row">
<div class="why">
<h2>Why YES?</h2>
<p>We strive to provide youth (anywhere within Peel) with new experiences, help youth explore their interests, provide opportunities for them to socialize with other youth and provide them with activities to do which will help them in gaining volunteer hours. We will most likely have weekly meetings where we will discuss issues regarding a specific topic, which will be different every month! We will work together to create awareness about these topics by doing activities related to the topic and fundraising for an organization that supports or represents the topic. YES is a great way to gain your 40 hours and get exposure to many amazing organizations and activities!</p>
</div>
</div>
</body>
<footer>
<div class="navbar navbar-default navbar-custom navbar-fixed-bottom">
<div class="copy">
<img src=img/facebook.png>
<img src="img/twitter-wrap.png">
<p>©Youth Engagement in Society. All Rights Reserved</p>
</div>
CSS:
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
/* vertical-align: baseline;*/
background: transparent;
}
body {
background-color: #262626;
}
/* NAVIGATION */
header {
background-color: rgba(132,132,132,0.5);
overflow: hidden;
}
.nav li {
text-align: center;
display: inline;
padding:60px;
}
.nav {
background-color: rgba(132,132,132,0.5);
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 40px;
position: fixed;
}
.nav a {
text-decoration: none;
color:black;
}
.nav ul {
padding:166px;
display: inline;
}
/* FOOTER */
footer img {
height:50px;
width: 50px;
}
footer {
margin-top: 550px;
clear: both;
}
footer p {
color: black;
padding-left: 100px;
}
@media all and (max-width: 580px) {
footer p {
padding-left:0px;
}
}
@media all and (max-width: 480px) {
footer p {
padding-left:0px;
font-size: 10px;
}
}
.copy {
background-color: #464646;
}
.copy p {
display: inline;
}
Ваш HTML недействителен. –
'header' и' footer' должны находиться в 'body'. – prodigitalson
спасибо! Я новичок в кодировании, поэтому я этого не понимал. –