When I try to validate my html code, it tells me this: Error : Element style not
ID: 3825981 • Letter: W
Question
When I try to validate my html code, it tells me this:
Error: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
The style term is messing it up, however how do I call it if i were to put it in a js folder? Or how do I fix this? I need the style to make my js slider to work.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Shan Shazad -- Home</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="topnav" id="myTopnav">
<h1>Shan Shazad</h1><a href="index.html">Home</a> <a href="about.html">About me</a> <a href="resume.html">Resume</a>
</div>
<h2>Welcome!</h2>
<p>I am a person who is positive about every aspect of life. There are many things I like to do, to see, and to experience.</p>
<!-- #region Jssor Slider Begin -->
<script src="js/jquery-1.11.3.min.js" type="text/javascript">
</script>
<script src="js/jssor.slider-23.1.5.mini.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_SlideoTransitions = [
[{b:0,d:600,y:-290,e:{y:27}}],
[{b:0,d:1000,y:185},{b:1000,d:500,o:-1},{b:1500,d:500,o:1},{b:2000,d:1500,r:360},{b:3500,d:1000,rX:30},{b:4500,d:500,rX:-30},{b:5000,d:1000,rY:30},{b:6000,d:500,rY:-30},{b:6500,d:500,sX:1},{b:7000,d:500,sX:-1},{b:7500,d:500,sY:1},{b:8000,d:500,sY:-1},{b:8500,d:500,kX:30},{b:9000,d:500,kX:-30},{b:9500,d:500,kY:30},{b:10000,d:500,kY:-30},{b:10500,d:500,c:{x:87.50,t:-87.50}},{b:11000,d:500,c:{x:-87.50,t:87.50}}],
[{b:0,d:600,x:410,e:{x:27}}],
[{b:-1,d:1,o:-1},{b:0,d:600,o:1,e:{o:5}}],
[{b:-1,d:1,c:{x:175.0,t:-175.0}},{b:0,d:800,c:{x:-175.0,t:175.0},e:{c:{x:7,t:7}}}],
[{b:-1,d:1,o:-1},{b:0,d:600,x:-570,o:1,e:{x:6}}],
[{b:-1,d:1,o:-1,r:-180},{b:0,d:800,o:1,r:180,e:{r:7}}],
[{b:0,d:1000,y:80,e:{y:24}},{b:1000,d:1100,x:570,y:170,o:-1,r:30,sX:9,sY:9,e:{x:2,y:6,r:1,sX:5,sY:5}}],
[{b:2000,d:600,rY:30}],
[{b:0,d:500,x:-105},{b:500,d:500,x:230},{b:1000,d:500,y:-120},{b:1500,d:500,x:-70,y:120},{b:2600,d:500,y:-80},{b:3100,d:900,y:160,e:{y:24}}],
[{b:0,d:1000,o:-0.4,rX:2,rY:1},{b:1000,d:1000,rY:1},{b:2000,d:1000,rX:-1},{b:3000,d:1000,rY:-1},{b:4000,d:1000,o:0.4,rX:-1,rY:-1}]
];
var jssor_1_options = {
$AutoPlay: 1,
$Idle: 2000,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{d:2000,b:1000}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 600);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*responsive code end*/
});
</script>
<style>
/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div (normal)
.jssorb01 div:hover (normal mouseover)
.jssorb01 .av (active)
.jssorb01 .av:hover (active mouseover)
.jssorb01 .dn (mousedown)
*/
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 12px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
/* jssor slider arrow navigator skin 02 css */
/*
.jssora02l (normal)
.jssora02r (normal)
.jssora02l:hover (normal mouseover)
.jssora02r:hover (normal mouseover)
.jssora02l.jssora02ldn (mousedown)
.jssora02r.jssora02rdn (mousedown)
.jssora02l.jssora02lds (disabled)
.jssora02r.jssora02rds (disabled)
*/
.jssora02l, .jssora02r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url('img/a02.png') no-repeat;
overflow: hidden;
}
.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02l.jssora02ldn { background-position: -3px -33px; }
.jssora02r.jssora02rdn { background-position: -63px -33px; }
.jssora02l.jssora02lds { background-position: -3px -33px; opacity: .3; pointer-events: none; }
.jssora02r.jssora02rds { background-position: -63px -33px; opacity: .3; pointer-events: none; }
</style>
<div id="jssor_1">
<!-- Loading Screen -->
<div data-u="loading">
<div></div>
<div></div>
</div>
<div data-u="slides">
<div>
<img data-u="image" alt = "shazad" src="img/1.png">
<div data-t="0" data-u="caption">
School of Applied Technology
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/2.png">
<div data-3d="1" data-t="1" data-u="">
time lined layer animation
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/3.png">
<div data-t="2" data-u="">
finger catchable right to left
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/4.png">
<div data-t="5" data-u="">
tons of transition type
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/5.png">
<div data-t="5" data-u="">
tons of transition type
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/6.png">
<div data-t="5" data-u="">
tons of transition type
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/7.png">
<div data-t="5" data-u="">
tons of transition type
</div>
</div>
<div data-b="0">
<img data-u="image" alt = "shazad" src="img/8.png">
<div data-t="7" data-u="">
play in and play out
</div>
</div>
<div data-p="112.50">
<img data-u="image" alt = "shazad" src="img/9.png">
<div data-3d="1" data-t="8" data-u="">
<div data-t="9" data-u="">
A Child Layer
</div>
</div>
</div>
<div data-p="112.50">
<img data-u="image" alt = "shazad" src="img/10.png">
<div data-3d="1" data-t="10" data-u="">
<div>
</div>
</div>
</div>
</div><!-- Bullet Navigator -->
<div class="jssorb01" data-u="navigator">
<div data-u="prototype"></div>
</div><!-- Arrow Navigator -->
<span class="jssora02l" data-autocenter="2" data-u="arrowleft"></span> <span class="jssora02r" data-autocenter="2" data-u="arrowright"></span>
</div><!-- #endregion Jssor Slider End -->
<footer id="footer">
<p>© Shan Shazad (2017)</p>
</footer>
</body>
</html>
Explanation / Answer
I have observed that, you have placed the style tag inside body tag which should not be the case. Remove the style tag from body and place it in head tag as follows (shown in bold text).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Shan Shazad -- Home</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<style>
/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div (normal)
.jssorb01 div:hover (normal mouseover)
.jssorb01 .av (active)
.jssorb01 .av:hover (active mouseover)
.jssorb01 .dn (mousedown)
*/
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 12px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
/* jssor slider arrow navigator skin 02 css */
/*
.jssora02l (normal)
.jssora02r (normal)
.jssora02l:hover (normal mouseover)
.jssora02r:hover (normal mouseover)
.jssora02l.jssora02ldn (mousedown)
.jssora02r.jssora02rdn (mousedown)
.jssora02l.jssora02lds (disabled)
.jssora02r.jssora02rds (disabled)
*/
.jssora02l, .jssora02r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url('img/a02.png') no-repeat;
overflow: hidden;
}
.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02l.jssora02ldn { background-position: -3px -33px; }
.jssora02r.jssora02rdn { background-position: -63px -33px; }
.jssora02l.jssora02lds { background-position: -3px -33px; opacity: .3; pointer-events: none; }
.jssora02r.jssora02rds { background-position: -63px -33px; opacity: .3; pointer-events: none; }
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<h1>Shan Shazad</h1><a href="index.html">Home</a> <a href="about.html">About me</a> <a href="resume.html">Resume</a>
</div>
<h2>Welcome!</h2>
<p>I am a person who is positive about every aspect of life. There are many things I like to do, to see, and to experience.</p>
<!-- #region Jssor Slider Begin -->
<script src="jquery-ui.min.js" type="text/javascript">
</script>
<script src="jssor.slider-23.1.5.mini.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_SlideoTransitions = [
[{b:0,d:600,y:-290,e:{y:27}}],
[{b:0,d:1000,y:185},{b:1000,d:500,o:-1},{b:1500,d:500,o:1},{b:2000,d:1500,r:360},{b:3500,d:1000,rX:30},{b:4500,d:500,rX:-30},{b:5000,d:1000,rY:30},{b:6000,d:500,rY:-30},{b:6500,d:500,sX:1},{b:7000,d:500,sX:-1},{b:7500,d:500,sY:1},{b:8000,d:500,sY:-1},{b:8500,d:500,kX:30},{b:9000,d:500,kX:-30},{b:9500,d:500,kY:30},{b:10000,d:500,kY:-30},{b:10500,d:500,c:{x:87.50,t:-87.50}},{b:11000,d:500,c:{x:-87.50,t:87.50}}],
[{b:0,d:600,x:410,e:{x:27}}],
[{b:-1,d:1,o:-1},{b:0,d:600,o:1,e:{o:5}}],
[{b:-1,d:1,c:{x:175.0,t:-175.0}},{b:0,d:800,c:{x:-175.0,t:175.0},e:{c:{x:7,t:7}}}],
[{b:-1,d:1,o:-1},{b:0,d:600,x:-570,o:1,e:{x:6}}],
[{b:-1,d:1,o:-1,r:-180},{b:0,d:800,o:1,r:180,e:{r:7}}],
[{b:0,d:1000,y:80,e:{y:24}},{b:1000,d:1100,x:570,y:170,o:-1,r:30,sX:9,sY:9,e:{x:2,y:6,r:1,sX:5,sY:5}}],
[{b:2000,d:600,rY:30}],
[{b:0,d:500,x:-105},{b:500,d:500,x:230},{b:1000,d:500,y:-120},{b:1500,d:500,x:-70,y:120},{b:2600,d:500,y:-80},{b:3100,d:900,y:160,e:{y:24}}],
[{b:0,d:1000,o:-0.4,rX:2,rY:1},{b:1000,d:1000,rY:1},{b:2000,d:1000,rX:-1},{b:3000,d:1000,rY:-1},{b:4000,d:1000,o:0.4,rX:-1,rY:-1}]
];
var jssor_1_options = {
$AutoPlay: 1,
$Idle: 2000,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{d:2000,b:1000}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 600);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*responsive code end*/
});
</script>
<div id="jssor_1">
<!-- Loading Screen -->
<div data-u="loading">
<div></div>
<div></div>
</div>
<div data-u="slides">
<div>
<img data-u="image" alt = "shazad" src="img/1.png">
<div data-t="0" data-u="caption">
School of Applied Technology
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/2.png">
<div data-3d="1" data-t="1" data-u="">
time lined layer animation
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/3.png">
<div data-t="2" data-u="">
finger catchable right to left
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/4.png">
<div data-t="5" data-u="">
tons of transition type
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/5.png">
<div data-t="5" data-u="">
tons of transition type
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/6.png">
<div data-t="5" data-u="">
tons of transition type
</div>
</div>
<div>
<img data-u="image" alt = "shazad" src="img/7.png">
<div data-t="5" data-u="">
tons of transition type
</div>
</div>
<div data-b="0">
<img data-u="image" alt = "shazad" src="img/8.png">
<div data-t="7" data-u="">
play in and play out
</div>
</div>
<div data-p="112.50">
<img data-u="image" alt = "shazad" src="img/9.png">
<div data-3d="1" data-t="8" data-u="">
<div data-t="9" data-u="">
A Child Layer
</div>
</div>
</div>
<div data-p="112.50">
<img data-u="image" alt = "shazad" src="img/10.png">
<div data-3d="1" data-t="10" data-u="">
<div>
</div>
</div>
</div>
</div><!-- Bullet Navigator -->
<div class="jssorb01" data-u="navigator">
<div data-u="prototype"></div>
</div><!-- Arrow Navigator -->
<span class="jssora02l" data-autocenter="2" data-u="arrowleft"></span> <span class="jssora02r" data-autocenter="2" data-u="arrowright"></span>
</div><!-- #endregion Jssor Slider End -->
<footer id="footer">
<p>© Shan Shazad (2017)</p>
</footer>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.