What could be causing the images within these unordered list items not to appear in a straight line horizontally?

I am having trouble creating a carousel to display images in a horizontal row using an unordered list. The issue I'm facing is that the list items are not aligning inline as expected. The problem lies in the images within the unordered list not appearing horizontally on the screen. Below you can find the HTML and CSS code that I have used:

        * {
            box-sizing: border-box;
        }
        
        section.hero {
            margin: 0;
            padding: 24px;
            color: #3f3f3f;
            width: 100%;
            height: 93vh;
            background-color: #F9CDAD;
            text-align: center;
        }
        .left {
            float: left;
            width: 2%;
            height: 75%;
            padding-top: 15%;
        }
        .hero_images {
            height: 85%;
            width: 96%;
            float: left;
            position: relative;
        }
        #landmark {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        #landmark ul {
            list-style-type: none;
            height: 100%;
        }
        #landmark ul li {
            display: inline;
            width: 100%; 
            height: 100%;
        }

        .clear-left {
            clear: left;
        }
        .left a { text-decoration: none; color: #3f3f3f; }
    <section class="hero">

        <div class="left"><a href="#"><h1 id="left"><</h1></a></div>

        <div class="hero_images">

            <div id="landmark">
<ul>
<li><img src="https://buildingontheword.org/wp-content/uploads/2016/08/cat.jpg" /></li>
<li><img src="https://media.istockphoto.com/photos/small-orange-kitten-lie-on-the-bed-picture-id465257035?k=6&m=465257035&s=612x612&w=0&h=ao7AXh-3zDStrPYWZFbbp5kI-wpW8M1y2BHwYcXjvuA=" /></li>
</ul>
            </div>

        </div>
        
        <div class="left"><a href="#"><h1 id="right">></h1></a></div>

        <h2 id="pos" class="clear-left">Hello</h2>

    </section>

htmlcss

Answer №1

After spending over 2 hours tinkering with it, I believe I have managed to create a functioning version of what you had in mind. I had to make some adjustments to the HTML structure to ensure that the divs worked correctly for resizing and positioning purposes. However, the code works flawlessly on my localhost without any issues.

var currentPicture;
var pictures;

function nextPicture() {
  currentPicture++;
  if(currentPicture >= pictures.length) {
    currentPicture = 0;
  }

  changeDisplay();  
}

function previousPicture() {
  currentPicture--;
  if(currentPicture < 0) {
    currentPicture = pictures.length - 1;
  }

  changeDisplay();  
}

function changeDisplay() {
  for(var i = 0; i < pictures.length; i++) {
    if(i == currentPicture) {
      $(pictures[i]).show();

    } else {
      $(pictures[i]).hide();
    }

  }
}

$(function (){
  currentPicture = 0;
  pictures = $("li");
  changeDisplay();

  $("#left").click(previousPicture);
  $("#right").click(nextPicture);
});
* {
  box-sizing: border-box;
}
        
.hero {
  margin: 0;
  padding: 24px;
  color: #3f3f3f;
  width: 100%;
  height: 93vh;
  background-color: #F9CDAD;
  text-align: center;
}
.caravel {
  display: flex;
  height: 90%;
}
.left {
  flex: 1;
  margin: auto;
}
.hero_images {
  flex: 8;
}
.hero_images ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 100%;
}
.hero_images ul li {
  padding: 0;
  width: 100%;
  height: 100%;
}
.clear-left {
  text-align: center;
}
.left a { 
  text-decoration: none; 
  color: #3f3f3f;
}
img{
  max-width: 100%;
  height: 100%;
}
<!DOCTYPE html>

  <head>
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
  </head>

  <body>
    <section class="hero">
      <div class="caravel">
        <div class="left"><a href="#"><h1 id="left"><</h1></a></div>

        <div class="hero_images">
          <ul>
            <li><img src="https://buildingontheword.org/wp-content/uploads/2016/08/cat.jpg" /></li>
            <li><img src="https://media.istockphoto.com/photos/small-orange-kitten-lie-on-the-bed-picture-id465257035?k=6&m=465257035&s=612x612&w=0&h=ao7AXh-3zDStrPYWZFbbp5kI-wpW8M1y2BHwYcXjvuA=" /></li>
          </ul>
        </div>

        <div class="left"><a href="#"><h1 id="right">></h1></a></div>
      </div>
      <h2 id="pos" class="clear-left">Hello</h2>
    </section>
  </body>
</html>

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

Encountering a 404 error while trying to use the autolinker

I have been struggling with this issue for the past day and can't seem to solve it on my own. Essentially, I am attempting to use Autolinker.js to automatically convert URLs into clickable hyperlinks in my chat application. However, every time I try ...

javascripthtmlnode.js

jQuery Toggle and Change Image Src Attribute Issue

After researching and modifying a show/hide jQuery code I discovered, everything is functioning correctly except for the HTML img attribute not being replaced when clicked on. The jQuery code I am using: <script> $(document).ready(function() { ...

javascriptjqueryhtmlcss

When a user repeatedly clicks the "see more" button, they will continue to receive no results multiple times

I have created a partial view and added the rendering in the Index page. A button (See More) triggers an AJAX call to the controller each time it is clicked, appending new data to the screen. The issue arises when there are no results left to display, and ...

htmlajaxmodel-view-controllerrazorappend

Make sure that your inline-block elements are aligned with both the left and right edges of their

Explaining what I'm attempting can be a bit tricky, but I'll do my best. I have X number of categories that I need to organize. Each category needs to be enclosed in a box with a grey border. I want the category boxes to be displayed "inline-bl ...

htmlcss

Adding a semi-transparent layer to cover half of the canvas while still allowing the canvas to be visible

I'm struggling with overlaying a div on top of a canvas while keeping the canvas visible. Currently, I can only get the div to cover the canvas and hide it. If anyone has an example to share, that would be greatly appreciated. var canvas = document ...

csshtmlcanvashtml5-canvas

Ensure that CSS is integrated correctly

I have a main Django template that incorporates another template for the navigation bar. I currently have separate CSS files for both the main page and the navbar. My query is: what is the correct method to include the CSS from the navbar in the main p ...

htmlcssdjangodomdjango-templates

Tips for correctly loading all elements on an HTML page before making CSS modifications

This question has been asked several times in the past. I am asking because when I used the on ready callback in jQuery, it did not change the placeholder text of my element "search_input". $( document ).ready(function() { $("#search_input").attr(' ...

javascriptjquerycssesriarcgis-js-api

The Asp button fails to initiate the function

One area of concern I have is with the signup page for my project, particularly regarding the following code: <input type="email" id="email" title="invalid email!" runat="server" placeholder="email" /> ...

c#htmlasp.netweb

What is the best way to create rotational movement for an object in a-frame?

Is there a way to have my entity rotate/spin on the Y-axis? I attempted the following: <a-entity position="-1 0.5 3" animation="property: rotation; to: 0 0 0 ; loop: true; elasticity:1000; dur: 10000" rotation="90 0 0"> <a-box position="1 0 ...

javascripthtmlaframe

Learn how to create a visually stunning CSS menu by centering a background image from the website cssmenumaker

I found a ready-made dropdown menu on . The menu is working well, but I would like to center the buttons. Is there a way to do this? Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); /* Menu CSS */#cssmenu, #cssmenu ...

cssdrop-down-menucenteringready

Python script for extracting data from tables by selecting various options from a dropdown menu

I'm currently attempting to extract data from this website: Although the default year is set to 2018, I am interested in scraping data for all available years on the site. A similar inquiry was raised four years ago, but the proposed solution does n ...

pythonhtmlselenium-webdriverbeautifulsoup

Different ways to automatically trigger a function in JavaScript

There are various ways to trigger a function automatically in javascript when a page loads. I am interested in knowing which method is considered the most effective and reliable. If you have a unique approach that differs from others, please share it here ...

javascripthtml

Using attribute value for CSS background-image styling is a handy technique to

In my current situation, the design calls for the use of two different images as background images - one for desktop and another for mobile. These images are uploaded through a CMS, allowing me to retrieve the URLs for both using PHP. Is there a way to pa ...

phphtmlcssattributes

Structured data for question and answer pages

I've been working on incorporating schema.org tags into my website, specifically for a Q&A page. However, I'm encountering issues when trying to add all three tags within the same HTML page - they seem to be overlapping. My goal is to structu ...

htmlschema.org

The animation unexpectedly resets to 0 just before it begins

Currently, I am developing a coverflow image slider with jQuery animate. However, there are two issues that I am facing. Firstly, when the animation runs for the first time, it starts at `0` instead of `-500`. Secondly, after reaching the end and looping b ...

javascriptjquerycssjquery-animatecss-transforms

Loading an animated SVG sprite file in real-time

Recently, I received an SVG sprite file from our designers to use in my app. The specified convention is to load the sprite at the top of the <body> element and then render icons using a specific code snippet: <svg class="u-icon-gear-dims"> ...

javascripthtmlcsssvg

Is the link's clickable area bigger than its corresponding image?

After countless attempts and experimenting with various solutions, I am still facing a persistent issue related to the size of the clickable area of an image linked to a video. The problem seems to be that the clickable area extends beyond the actual imag ...

cssimagehyperlink

Unable to modify SVG color to a white hue

I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...

htmlcsssvgsass

adjust the value of an attribute in a dynamic stylesheet using jquery

I'm trying to create a dynamic stylesheet using a combination of jquery, css, php, and html. My approach involves making an ajax request (using jquery) to pass the width of my screen to a php css file. However, I am facing an issue where the php css f ...

phpjqueryhtmlcssajax

Horizontal Screen Sharing on iPad

Currently, I have a two-column website set up using Wordpress. However, I am facing an issue with the right side column scrolling over on iPads. While the page behaves properly on desktops, on iOS devices, the div is able to scroll over the navigation ba ...

ioscsswordpresswebkit