My goal is to create a unique page layout where the header, navigation bar, buttons, headings, paragraphs, and other content are all displayed on a slideshow. However, I'm facing an issue where when I add content to the div container or body, it doesn't show up properly on the slideshow. Can anyone offer some guidance on what steps I should take to address this problem?
Below is the code snippet:
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //JQuery code for fade slideshow
$('.pics').cycle('fade');
});
</script>
<style type="text/css">
.pics { //Container style that holds images
height: 100%;
width: 100%;
position:absolute;
left:0;
top:0;
margin-right:0;
}
.pics img { //Style of images within the container
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h3>This is a heading</h3>//Heading not displaying correctly
<div class="pics"> //HTML code for the image container
<img src="adv1_wheels_ferrari_f430-HD.jpg" width="100%" height="500" />
<img src="kepler_motion-HD.jpg" width="100%" height="100%" />
<img src="nissan_gt_r_gold-HD.jpg" width="100%" height="100%" />
<p>This is a paragraph</p>//Paragraph inside the div also not displaying properly
</div>
</body>
</html>