Header now features an additional slider

I recently noticed a strange issue on my website - I have a slider positioned in the middle of the page, which displays correctly. However, there is also an unexpected duplicate slider that appears at the top of the page. You can visit my site at and observe this by waiting a moment for the duplicate slider to appear at the top.

Below is the HTML code:

<!DOCTYPE html>
<html lang='en-us'>

<html>
    <head>
        <meta charset='utf-8'/>
        <title>Homepage | JC Web and Graphic</title>
        <link rel='icon' type='image/png' href='images/favicon.png'/>
        <meta name='keywords' content='jc web and graphic, web designer, graphic designer, web design, graphic          design, cheap, inexpensive, affordable, awesome, beautiful, vancouver washington, portland oregon,          hotspot, host, hosting, domain, domains, domain registration, cheap, affordable'>
        <meta name='description' content='Web and Graphic Design, Hosting, Domains, and more!'>
        <link rel='stylesheet' type='text/css' href='styles.css'>

        <script src='jquery-awesomeness.js'></script>

        <!-- Slider Link -->
        <script src='responsiveslides.min.js'></script>

        <script>
            // Slider Functions
            $(function() {
                $('.rslides').responsiveSlides({
                    speed: 1200,
                    timeout: 3000
                });
            });

            //Google Analytics
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-52983504-1', 'auto');
            ga('send', 'pageview');
        </script>
    </head>



    <body>
        <!-- header -->
        <header id='home'>
            <div id='logo'>
                <img src='images/logo-1000.png'>
            </div>
        </header>

        <!-- More HTML Code ... -->

    </body>
</html>

CSS Styles:

/* ==============================        CSS Styles for JC Web and Graphic        ============================== */
/* 
    This is the intellectual property of JC Web and Graphic. All Rights Reserved.
*/

/* Specific CSS styles listed here... */

Answer №1

Your presentation slides are set in absolute positions, but the containing div must have a relative position to prevent the slides from moving out of place. All you need to do is add "position: relative;" to your #slider

#slider{
  width: 100%;
  background-color: #cccccc;
  position: relative;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to continuously loop an image from left to right and right to left indefinitely using JavaScript?

As part of the challenge, I am tasked with creating a Pacman game using HTML, CSS, and JavaScript. One key aspect is to control the movement of the ghosts throughout the game. However, I am facing an issue with the current function that controls the ghost& ...

What is the formula for finding the distance from the top-left corner of an HTML element to the top-left corner of the window?

Looking for a simple way to accomplish this? Take into account properties such as border and padding. Will this approach be effective even with box-sizing set to content-box or border-box? ...

The user interface in IE9 is sluggish when handling JavaScript and jQuery interactions

Has anyone else encountered significant performance issues with javascript/JQuery in IE9? Specifically with menus, the Accordion control (Ajax control toolkit), etc. I find this completely unacceptable and believe that Microsoft is heading down the wrong ...

Retrieve the ID of a specific row within a table in a datatables interface by selecting the row and then clicking a button

My goal is to have a table displayed where I can select a row and then have the option to edit or delete that row with a query. To achieve this, I need a primary key that won't be visible to the user. This is how my table is set up: <table id=&apo ...

Guide to dynamically update table column information using jquery/ajax and store it in a MySQL database

Currently, I am utilizing the code below to modify a data table on the fly within an admin interface. It functions smoothly with just two columns, but as soon as I add more columns, I face issues editing and saving the data to MySQL. Can someone assist me ...

Utilizing jQuery to automatically populate fields in an Android WebView when loading a URL

I have been able to achieve the desired output by using the following code in JS: mWebView.loadUrl("javascript:{document.getElementsByName('emailaddress')[0].value = '"+username+"'; document.getElementsByName('password')[0].v ...

When slides overlap in jQuery, the div elements are stacked on top of each other

Here we have implemented a functionality where the divs automatically slide after every 5 seconds. $(document).ready(function(){ var refreshId = setInterval( function() { $('.box&a ...

Modify the content and display of a stationary div based on vertical positions

I am interested in creating a vertical website that features multiple divs appearing at specific y-points on the page. These divs will contain text and will always be positioned fixed at 20% from the left and about 250px from the top. My goal is to have t ...

What is the reason behind PHP disregarding ajax POST requests?

The following code snippet can be found in the file index.php: <head> <?php if(isset($_GET['text1'])) { some_function(); } ?> </head> <body> <form id="form"> <input type="text" id="text1" name="text1"/> < ...

Replace the css variables provided by the Angular library with custom ones

Having an angular library with a defined set of css variables for colors applied to components, which are globally set like this: :root { -color-1: #000000; -color-2: #ffffff; ... } In my application utilizing this library, I need to override ...

What is the best way to incorporate a Thymeleaf message stored in message.properties into my JavaScript file?

Is there a way to insert messages from a message.properties file into a javascript file similar to how it's done in an HTML file? For example, on my home page I have a title listed as: <h1 th:text="#{home.screen.title}"></h1> Where home ...

The bottom section of the main page

I've successfully implemented a footer that sticks to the bottom of each page as intended. However, I'm facing an issue when there's a large amount of text on a particular page that requires scrolling. The scroll continues beyond the footer, ...

What is causing the image to move to the following line?

(https://i.stack.imgur.com/5oi7s.png) The image appears to be shifting to the next line inexplicably. I have experimented with various methods to address this issue, including utilizing the built-in Image component which seemed to show improvement. However ...

What is causing the divs to remain stationary instead of floating away with BootStrap?

My divs aren't aligning properly as expected when using the BootStrap Grid System. For example, if I have 4 columns and then another 2 columns, the second div should take up the next 4 columns but instead it's appearing below in the same column r ...

jCarousel jQuery plugin malfunctioning on iPhone devices

I am currently implementing a vertical carousel to showcase video thumbnails using sorgalla.com/projects/jcarousel/. When the thumbnails are clicked, the source of the larger video changes accordingly. My website has two versions - one with Flash navigati ...

PHP - Is there a way to transfer data between two PHP files using variables?

I have two unique files named index.php and get.php. The purpose of index.php is to serve as a web page. However, get.php is not designed to be accessed by the user as it is not intended to function as a web page; its sole purpose is to echo some HTML cod ...

Verify form input data using jquery prior to submission

When I submit a form, I use JavaScript to check the length of the Title field and the number of attached files. If either condition is not met, I prevent submission and display an error notification. Here's an example snippet of my code. $(document ...

Guide to fetching JSON data with Ajax from a Python WSGI web app

Here's an example of my Python application: from wsgiref.simple_server import make_server import json def application(environ, start_response): result = [{"name":"John Johnson","street":"Oslo West 555","age":33}] response_body = json.dumps(res ...

implementing a properly aligned nested button group with Bootstrap 4 framework

My button group control looks like this. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" ...

What is the best way to adjust the underline with Bootstrap?

Is there a way to add an underline to text without using CSS? I've tried using <p><u>text</u></p> and class="text-decoration-underline">, but neither provide an option to adjust the vertical position of the underli ...