Issue
I'm trying to get a horizontal menu to function in HTML and CSS.
<section class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<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 class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel">
<!-- Single Album -->
<div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<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 class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<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 class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel owl-loaded owl-drag">
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<!-- Single Album -->
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-1368px, 0px, 0px); transition: all 0.75s ease 0s; width: 3876px;"><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div></div><div class="owl-item" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div><div class="owl-item active" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div></div><div class="owl-item" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div></div><div class="owl-item cloned" style="width: 198px; margin-right: 30px;"><div class="single-album">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div></div></div></div><div class="owl-nav"><div class="owl-prev"><i class="fa fa-angle-double-left"></i></div><div class="owl-next"><i class="fa fa-angle-double-right"></i></div></div><div class="owl-dots disabled"></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?
Solution
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 class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<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 class="latest-albums-area section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-heading style-2">
<p>See what’s new</p>
<h2>Latest Albums</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<div class="ablums-text text-center mb-70">
<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 class="row">
<div class="col-12">
<div class="albums-slideshow owl-carousel">
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/kali/k-1.png" alt="">
<div class="album-info">
<a href="#">
<h5>The Start</h5>
</a>
<p>begeaners</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a2.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Sam Smith</h5>
</a>
<p>Underground</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a3.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Will I am</h5>
</a>
<p>First</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a4.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Cure</h5>
</a>
<p>Second Song</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a5.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>DJ SMITH</h5>
</a>
<p>The Album</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a6.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>The Ustopable</h5>
</a>
<p>Unplugged</p>
</div>
</div>
<!-- Single Album -->
<div class="single-album" style="display:inline; float:left; padding-right:20px">
<img src="img/bg-img/a7.jpg" alt="">
<div class="album-info">
<a href="#">
<h5>Beyonce</h5>
</a>
<p>Songs</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Answered By - MFerguson Answer Checked By - Robin (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.