Hello, I'm having trouble with my html coding. It is marking some div tags as invalid and my Jquery slideshow isn't working. Everything looks fine to me, but clearly its not.
All that is yellow is where it's invalid in my coding.
And the "<script type="text/javascript">
$(document).ready(
function(){
$('#pictures').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '220px'
});
}
);
</script>"
portion isn't registering.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Apollo Restaurant</title>
<style type="text/css">
@import url("main.css");
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.innerfade.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="logo">
<img src="GFX/apollo_logo.png" alt="Apollo Resautrant Logo"/>
</div>
<div id="bannertop">
<img src="GFX/banner.png" alt="Apollo Banner"/>
</div>
<div id="nav" class="clearfix">
<ul id="button1">
<li class="home"> <a href="#headline1"></a></li>
</ul>
<ul id="button2">
<li class="apollohistory"> <a href="#headline2"></a> </li>
</ul>
<ul id="button3">
<li class="oliveoil"> <a href="#headline3"></a> </li>
</ul>
<ul id="button4">
<li class="menu"> <a href="#headline4"></a> </li>
</ul>
<ul id="button5">
<li class="contact"> <a href="#headline5"></a> </li>
</ul>
</div>
<div id="bannerbottom">
<img src="GFX/banner.png" alt="Apollo Banner"/>
</div>
</div>
<div id="content">
<div id="text">
</div>
<div id="slideshow">
<ul id="pictures">
<li><img src="GFX/Pictures/ApolloResaturant.jpg" alt="Apollo Restaurant"/></li>
<li><img src="GFX/Pictures/Inside-Apollo-Restaurant.jpg" alt="Inside our Dining Area"/></li>
<li><img src="GFX/Pictures/bbqribs.jpg" alt="Our BBQ Ribs"/></li>
<li><img src="GFX/Pictures/Chicken-Parmigiana.jpg" alt="Our Chicken Parmigiana"/></li>
<li><img src="GFX/Pictures/Fettuccine-a-la-poseidon.jpg" alt="Our Fettuccine a la Poseidon"/></li>
<li><img src="GFX/Pictures/Greek-Bruschetta.jpg" alt="Our authentic Greek Bruschetta bread"/></li>
<li><img src="GFX/Pictures/mousaka.jpg" alt="Our authentic Greek Moussaka"/></li>
<li><img src="GFX/Pictures/new-york-steak.jpg" alt="Our New York Steak"/></li>
<li><img src="GFX/Pictures/salmonfillet.jpg" alt="Our Salmon Fillet"/></li>
<li><img src="GFX/Pictures/Souvlaki-and-Greek-Salad.jpg" alt="Our authentic Greek Souvlaki and Greek Salad"/></li>
<li><img src="GFX/Pictures/surf-and-turf.jpg" alt="Our Surf & Turf/></li>
</ul>
<script type="text/javascript">
$(document).ready(
function(){
$('#pictures').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '220px'
});
}
);
</script>
</div>
<div id="footer">
<p>©2012 Apollo Restaurant | Designed by: Erik Mattila</p>
</div>
</div>
</div>
</body>
</html>
All that is yellow is where it's invalid in my coding.
And the "<script type="text/javascript">
$(document).ready(
function(){
$('#pictures').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '220px'
});
}
);
</script>"
portion isn't registering.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Apollo Restaurant</title>
<style type="text/css">
@import url("main.css");
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.innerfade.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="logo">
<img src="GFX/apollo_logo.png" alt="Apollo Resautrant Logo"/>
</div>
<div id="bannertop">
<img src="GFX/banner.png" alt="Apollo Banner"/>
</div>
<div id="nav" class="clearfix">
<ul id="button1">
<li class="home"> <a href="#headline1"></a></li>
</ul>
<ul id="button2">
<li class="apollohistory"> <a href="#headline2"></a> </li>
</ul>
<ul id="button3">
<li class="oliveoil"> <a href="#headline3"></a> </li>
</ul>
<ul id="button4">
<li class="menu"> <a href="#headline4"></a> </li>
</ul>
<ul id="button5">
<li class="contact"> <a href="#headline5"></a> </li>
</ul>
</div>
<div id="bannerbottom">
<img src="GFX/banner.png" alt="Apollo Banner"/>
</div>
</div>
<div id="content">
<div id="text">
</div>
<div id="slideshow">
<ul id="pictures">
<li><img src="GFX/Pictures/ApolloResaturant.jpg" alt="Apollo Restaurant"/></li>
<li><img src="GFX/Pictures/Inside-Apollo-Restaurant.jpg" alt="Inside our Dining Area"/></li>
<li><img src="GFX/Pictures/bbqribs.jpg" alt="Our BBQ Ribs"/></li>
<li><img src="GFX/Pictures/Chicken-Parmigiana.jpg" alt="Our Chicken Parmigiana"/></li>
<li><img src="GFX/Pictures/Fettuccine-a-la-poseidon.jpg" alt="Our Fettuccine a la Poseidon"/></li>
<li><img src="GFX/Pictures/Greek-Bruschetta.jpg" alt="Our authentic Greek Bruschetta bread"/></li>
<li><img src="GFX/Pictures/mousaka.jpg" alt="Our authentic Greek Moussaka"/></li>
<li><img src="GFX/Pictures/new-york-steak.jpg" alt="Our New York Steak"/></li>
<li><img src="GFX/Pictures/salmonfillet.jpg" alt="Our Salmon Fillet"/></li>
<li><img src="GFX/Pictures/Souvlaki-and-Greek-Salad.jpg" alt="Our authentic Greek Souvlaki and Greek Salad"/></li>
<li><img src="GFX/Pictures/surf-and-turf.jpg" alt="Our Surf & Turf/></li>
</ul>
<script type="text/javascript">
$(document).ready(
function(){
$('#pictures').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '220px'
});
}
);
</script>
</div>
<div id="footer">
<p>©2012 Apollo Restaurant | Designed by: Erik Mattila</p>
</div>
</div>
</div>
</body>
</html>