Trouble with displaying inline images using <div> tag

I am trying to display 9 images in a WordPress footer side by side horizontally. Here is the HTML code I used:

<div id="sponsers">
<ul>
<li><img src="http://mysite.com/image1.png" width=257 height=67></li>
<li><img src="http://mysite.com/image2.png" width=217 height=29></li>
<li><img src="http://mysite.com/image3.png" width=178 height=49></li>
<li><img src="http://mysite.com/image4.png" width=64 height=68></li>
<li><img src="http://mysite.com/image5.png" width=103 height=162></li>
<li><img src="http://mysite.com/image6.png" width=66 height=56></li>
<li><img src="http://mysite.com/image7.png" width=121 height=85></li>
<li><img src="http://mysite.com/image8.png" width=134 height=36></li>
<li><img src="http://mysite.com/image9.png" width=162 height=61></li>
</ul>
</div>

The CSS code looks like this:

.sponsers ul {
    margin: 0; padding: 0; 
    display: inline;
    list-style-type: none; list-style-image: none;
}
.sponsers li {
    isplay: inline;
    padding-right: 0px;
    width: 900px;
    list-style-type: none; list-style-image: none;
}

Despite styling with CSS, the images are still showing up vertically with bullet points. It seems like the CSS rules are being ignored. Any suggestions on what I might be doing wrong?

htmlcss

Answer №1

In the realm of CSS, a . signifies a class, however, in your HTML code snippet, the <div> is equipped with an ID rather than a class attribute. To rectify this issue, simply adjust your CSS selector to target the ID by using #sponsers instead.

(On a side note, there is no necessity to set the display property of the <ul> to inline — solely style the individual <li> elements as needed.)

Answer №2

To improve the layout, remove inline styles from both the ul and li. Instead, apply float: left to the li elements. Add overflow: hidden to the sponsors div. Another important correction is to use #sponsors instead of a dot for an id.

Check out this example for reference: http://jsfiddle.net/rutwick/NG2nF/

The CSS code snippet I applied:

#sponsors{
    overflow: hidden;
}

#sponsors ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#sponsors ul li{
    float: left;
    padding: 0 5px;
}

#sponsors ul li img{
    height: 50px;
    width: 50px;   
}

Answer №3

There are a couple of things that need to be addressed.
In your CSS, you have referenced the class as .sponsers while using an ID in your markup. This inconsistency will prevent any styles from being applied correctly.
Additionally, to display the <li> inline, you need to include display:inline, but currently, there is a typographical error as the letter D is missing in DISPLAY!

Therefore, the corrected code should look like this:

.sponsers ul {
margin: 0; padding: 0; 
display: inline;
list-style-type: none; list-style-image: none;
}

.sponsers li {
display: inline;
padding-right: 0px;
width: 900px;
list-style-type: none; list-style-image: none;
}

Also, in the markup section, make sure it looks like this:

<div class="sponsers"> <!--You should use class instead of ID here-->

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

The functionality of jQuery is not properly integrating with Materialize for hiding select options

For a project I'm working on, I have implemented two Select elements in the HTML code. The second select should only be enabled when the first select meets certain conditions. You can check out the JSfiddle link for reference. $(document).ready(f ...

javascriptjquerycsshtml-selectmaterialize

The height of each list item should expand based on the size of the div contained within it

The HTML markup I am working with looks like this: <ul data-role="listview" data-inset="true" class="stuff site-content lists"> <li> <div class="nearby"> 20 </div> <h1> name</h1> </li> ...

htmlcss

Animating content through CSS and jQuery to reveal its unfolding effect

Just stumbled upon the amazing quote-expansion animation in the OSX Mail app and I am completely impressed. I am on a mission to bring that same magic to the web (or at least close to it), but unsure if anyone has done something similar yet. A couple of ...

javascriptjquerycss

Forwarding to another servlet based on the action of an HTML page

There are 2 servlets included in my code snippet @WebServlet("/Login") public class Login extends HttpServlet { ......... ......... } @WebServlet("/Create") public class Create extends HttpServlet { ......... ......... } Accompanied by an HTML page ...

javahtmlservlet-3.0

Lowest value malfunctioning

I have encountered an issue with setting minimum values for 4 things. All 4 things are supposed to have the same minimum value as the first thing, but when moving the slider, everything goes back to normal and works fine. Where could the problem be origina ...

javascriptjqueryhtmlcssminimum

Verify the existence of the linked page's href url

Is there an elegant way to verify if a hyperlink on a website directs to a page that returns an HTML 200 code? I'd like to give users the ability to input their own links in a model, but I also want to block any links leading to a 500 or 404 error pag ...

jqueryhtmlruby-on-railsruby

Pressing Ctrl + S enables you to preserve the webpage for future

Is there a way to save an entire webpage, including all the HTML files, using Ctrl + S in Chrome? I have tried two different methods for saving the page, but so far, neither of them has worked: from selenium import webdriver from selenium.webdriver.common ...

pythonhtmlseleniumsave

Utilize Selenium to load the innerHTML of the HTML body tag

Looking for a way to load the HTML body into a selenium bot? html.body.innerHTML = .responseText ' Set bot = New Selenium.ChromeDriver bot.Get HERE Wondering if it's possible to accomplish this task without saving the html body to a file first ...

htmlexcelvbaseleniumhtml-tbody

What is the best way to maximize the use of the space available until reaching a div with varying dimensions each time

I have a div on the left that displays a name, and it can vary in length. On the right, there is another div with buttons. The number of buttons may change, so I am unsure how many will be displayed. Is there a way to utilize only CSS to make sure the fi ...

htmlcssposition

What is the best way to incorporate a button that can toggle the visibility of the sidebar on my post page?

Check out this post of mine I noticed a button on someone's page that could hide their sidebar and expand it again when clicked. How can I implement this feature? Is it a simple task? ...

javascripthtmljekyll

"Enhancing user experience: Rotating hamburger menu icons with a simple click

I'm facing an issue with my hamburger menu, specifically with the icons. Here's how my HTML is structured: <input type="checkbox" id="check"/> <header class="IndexHeader"> <nav class="navigat ...

htmljquerycsshamburger-menu

Is there a way to dynamically change the height in jQuery/JavaScript?

I am encountering an issue with my embed code where the height changes randomly after a few seconds, depending on certain parameters. Here is an example of the code I am using: $( <embed></embed>) .attr("src", "http://www.bbs.com") ...

javascriptjqueryhtmlcss

What steps can be taken to troubleshoot issues with "responsive-design mode" on mobile devices specific to a Wordpress theme?

Currently using a Wordpress theme in responsive design mode. The website looks great on iPad, including the desktop version, but when viewed on an iPhone it gets messy. I need assistance in replicating the iPad style for all mobile devices, as well as non- ...

iphonecsswordpressresponsive-design

The embedding feature is malfunctioning in the React application

I am trying to incorporate an HTML embed code into my React app. Here is the button within my functional component: import React from 'react' import './SideshiftStyle.css' export default function Sideshift() { return ( <div ...

htmlreactjs

The alignment of Font Awesome Icons within a Bulma menu is not as expected

Is there a way to properly align font awesome icons with text in a Bulma menu without the need for custom CSS? Icons align correctly in a Bulma navbar item, but appear misaligned in a Bulma menu. https://i.sstatic.net/EpmSe.png <!DOCTYPE html> ...

htmlcssfont-awesomebulma

Cursor-hugging tooltip

My tooltip creation works when hovering over an icon, but there's a slight issue - it doesn't always follow the cursor and can get stuck at times. To see a demo of this in action, click here: fiddle Here's the code I'm using: HTML & ...

javascripthtmlcsstooltip

The width property is not being passed down to the table

I'm experiencing difficulties with the scaling of my body content. When the page is initially opened, it scales to 100%. However, when I resize the screen to make it wider, the content gets bigger but when I try to make it smaller again, it remains a ...

htmlcssnetsuite

Angular and Bootstrap work hand in hand to provide a seamless user experience, especially

I have been exploring ways to easily close the modal that appears after clicking on an image. My setup involves using bootstrap in conjunction with Angular. <img id="1" data-toggle="modal" data-target="#myModal" src='assets/barrel.jpg' alt=&a ...

htmlangulartypescriptbootstrap-4

Guide to generating an HTML table with database information employing jquery and ajax

I am faced with the challenge of creating a table using information retrieved from a database. Despite being able to view all the data through console.log, I am struggling to convert that into a table format. My latest version now displays at least one op ...

jqueryhtmlmysqlajax

Submit the chosen choice via the get method to navigate to a different page

I'm having an issue with a dropdown select option and a button. When the button is clicked, the selected option should be sent to another page called "update.php" so it can be accessed there. However, I am facing difficulties as the new page is not lo ...

htmlajax