How do I slow down this menu-CodePudding

I'm trying to get a horizontal menu to function in HTML and CSS.

    <section >
    <div >
        <div >
            <div >
                <div >
                    <p>See what’s new</p>
                    <h2>Latest Albums</h2>
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    <p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
                </div>
            </div>
        </div>

        <div >
            <div >
                <div >
                    <!-- Single Album -->
                    <div >
                        <img src="img/kali/k-1.png" alt="">
                        <div >
                            <a href="#">
                                <h5>The Start</h5>
                            </a>
                            <p>begeaners</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div >
                        <img src="img/bg-img/a2.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Sam Smith</h5>
                            </a>
                            <p>Underground</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div >
                        <img src="img/bg-img/a3.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Will I am</h5>
                            </a>
                            <p>First</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div >
                        <img src="img/bg-img/a4.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>The Cure</h5>
                            </a>
                            <p>Second Song</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div >
                        <img src="img/bg-img/a5.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>DJ SMITH</h5>
                            </a>
                            <p>The Album</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div >
                        <img src="img/bg-img/a6.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>The Ustopable</h5>
                            </a>
                            <p>Unplugged</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div >
                        <img src="img/bg-img/a7.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Beyonce</h5>
                            </a>
                            <p>Songs</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

However, when I run it on the server it transforms into this:

<section >
    <div >
        <div >
            <div >
                <div >
                    <p>See what’s new</p>
                    <h2>Latest Albums</h2>
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    <p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
                </div>
            </div>
        </div>

        <div >
            <div >
                <div >
                    <!-- Single Album -->
                    

                    <!-- Single Album -->
                    

                    <!-- Single Album -->
                    

                    <!-- Single Album -->
                    

                    <!-- Single Album -->
                    

                    <!-- Single Album -->
                    

                    <!-- Single Album -->
                    
                <div ><div  style="transform: translate3d(-1368px, 0px, 0px); transition: all 0.75s ease 0s; width: 3876px;"><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a3.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Will I am</h5>
                            </a>
                            <p>First</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a4.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>The Cure</h5>
                            </a>
                            <p>Second Song</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a5.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>DJ SMITH</h5>
                            </a>
                            <p>The Album</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a6.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>The Ustopable</h5>
                            </a>
                            <p>Unplugged</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a7.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Beyonce</h5>
                            </a>
                            <p>Songs</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/kali/k-1.png" alt="">
                        <div >
                            <a href="#">
                                <h5>The Start</h5>
                            </a>
                            <p>begeaners</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a2.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Sam Smith</h5>
                            </a>
                            <p>Underground</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a3.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Will I am</h5>
                            </a>
                            <p>First</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a4.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>The Cure</h5>
                            </a>
                            <p>Second Song</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a5.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>DJ SMITH</h5>
                            </a>
                            <p>The Album</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a6.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>The Ustopable</h5>
                            </a>
                            <p>Unplugged</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a7.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Beyonce</h5>
                            </a>
                            <p>Songs</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/kali/k-1.png" alt="">
                        <div >
                            <a href="#">
                                <h5>The Start</h5>
                            </a>
                            <p>begeaners</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a2.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Sam Smith</h5>
                            </a>
                            <p>Underground</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a3.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Will I am</h5>
                            </a>
                            <p>First</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a4.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>The Cure</h5>
                            </a>
                            <p>Second Song</p>
                        </div>
                    </div></div><div  style="width: 198px; margin-right: 30px;"><div >
                        <img src="img/bg-img/a5.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>DJ SMITH</h5>
                            </a>
                            <p>The Album</p>
                        </div>
                    </div></div></div></div><div ><div ><i ></i></div><div ><i ></i></div></div><div ></div></div>
            </div>
        </div>
    </div>
</section>

How do I slow the menu down so it doesn't move every 15s? I have looked for the class in all of the CSS and Javascript but could not find a way to do so. Do I need to make a new class with the movement?

CodePudding user response：

You can format your list of albums into a horizontal row by adding display:inline and float:left to the div tags like so:

<div  style="display:inline; float:left; padding-right:20px">
     <img src="img/kali/k-1.png" alt="">
     <div >
               <a href="#">
                    <h5>The Start</h5>
                </a>
           <p>begeaners</p>
     </div>
</div>

You can also add "padding" to your divs so they aren't directly adjacent to each other using the padding-right attribute.

Your modified code:

  <section >
    <div >
        <div >
            <div >
                <div >
                    <p>See what’s new</p>
                    <h2>Latest Albums</h2>
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    <p>Nam tristique ex vel magna tincidunt, ut porta nisl finibus. Vivamus eu dolor eu quam varius rutrum. Fusce nec justo id sem aliquam fringilla nec non lacus. Suspendisse eget lobortis nisi, ac cursus odio. Vivamus nibh velit, rutrum at ipsum ac, dignissim iaculis ante. Donec in velit non elit pulvinar pellentesque et non eros.</p>
                </div>
            </div>
        </div>

        <div >
            <div >
                <div >
                    <!-- Single Album -->
                    <div  style="display:inline; float:left; padding-right:20px">
                        <img src="img/kali/k-1.png" alt="">
                        <div >
                            <a href="#">
                                <h5>The Start</h5>
                            </a>
                            <p>begeaners</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div  style="display:inline; float:left; padding-right:20px">
                        <img src="img/bg-img/a2.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Sam Smith</h5>
                            </a>
                            <p>Underground</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div  style="display:inline; float:left; padding-right:20px">
                        <img src="img/bg-img/a3.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Will I am</h5>
                            </a>
                            <p>First</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div  style="display:inline; float:left; padding-right:20px">
                        <img src="img/bg-img/a4.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>The Cure</h5>
                            </a>
                            <p>Second Song</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div  style="display:inline; float:left; padding-right:20px">
                        <img src="img/bg-img/a5.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>DJ SMITH</h5>
                            </a>
                            <p>The Album</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div  style="display:inline; float:left; padding-right:20px">
                        <img src="img/bg-img/a6.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>The Ustopable</h5>
                            </a>
                            <p>Unplugged</p>
                        </div>
                    </div>

                    <!-- Single Album -->
                    <div  style="display:inline; float:left; padding-right:20px">
                        <img src="img/bg-img/a7.jpg" alt="">
                        <div >
                            <a href="#">
                                <h5>Beyonce</h5>
                            </a>
                            <p>Songs</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>