I am having trouble getting the background image divider to display properly on my CSS menu

I have a CSS menu with an image divider, but for some reason the last one after the contact button won't display..

    <div id="menu">
<ul>
<li><a href="index.html"><span class="used">Home</span></a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contect.html">Contact</a></li>
<img src="img/divider.png" alt="" style="margin-left: auto; margin-right: auto;" />
</ul>
</div>

This is my menu setup (the 'divider.png' image placement below the menu), and here is my corresponding CSS.

.header #menu {
word-spacing: 60px;
font: 17px 'Source Sans Pro', sans-serif;
font-weight: 400;
color: #333;
margin: 40px auto 0 auto;
width: 1024px;
overflow: hidden;
}

ul {
list-style: none;
display: block;
text-align: center;
}

li {
list-style: none;
width: 239px;
height: 69px;
display: inline-block;
vertical-align: baseline;
overflow: hidden;
background: url(../img/nav-divider.png) no-repeat 0 100%;
}

The background image serves as the divider and works for all list items except after the contact item. Any insights on why it's not showing up would be greatly appreciated! It's been quite frustrating for me.

Thank you!

htmlcssimagelistmenu

Answer №1

To include an image in your project, simply use the following code:

background-image: background-image:url('images/image.png');

Feel free to reach out if you need further assistance.

Answer №2

When I removed the css properties from the img tag, like so

<img src="img/divider.png" alt="" style="margin-left: auto; margin-right: auto;"/>

and changed it to

<img src="img/divider.png" alt=""/>

Alternatively, replacing the img tag with an empty list item <li></li> also resolved the issue.

Answer №3

Verify your image path and follow these steps: if you are adding styles in a CSS file,

try using this : 

background: url(../img/nav-divider.png) no-repeat 0 100%;

If you are writing directly in an HTML page, try this : 

background: url(img/nav-divider.png) no-repeat 0 100%;

<style type="text/css" media="screen">
    #menu {
        font: 17px 'Source Sans Pro', sans-serif;
        font-weight: 400;
        color: #333;
        margin: 40px auto 0 auto;
        width: 1024px;
        overflow: hidden;
    }

    ul {
        list-style: none;
        display: block;
        text-align: center;
    }

    li {
        list-style: none;
        width: 19%;
        height: 69px;
        display: inline-block;
        vertical-align: baseline;
        overflow: hidden;
        background: url(../img/nav-divider.png) no-repeat 0 100%;
    }
    
    a{
        color: white;
        line-height: 69px;
        text-decoration: none;
    }
</style>

 <div id="menu">
    <ul>
        <li><a href="index.html"><span class="used">Home</span></a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contect.html">Contact</a></li>
        <li><a href="contect.html">Contact2</a></li>
        <li><a href="contect.html">Contact3</a></li>
    </ul>
 </div>

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

Conceal a certain element in development using CSS

Is there a way to hide the footer section from my webpage without affecting the rest of the content? For example, using something like: "div class="poweredby" display: none", but I'm unsure of the correct method... Here is the spe ...

javascripthtmlcss

Customize one header to display different banners on each page using PHP conditionals

I created my website for entertainment purposes and I decided to use different banners on each page. Currently, in my header section, random banners appear using the following code: <div style=' height:145px; background-image:url(images/banners/ba ...

phphtmlif-statementheaderbanner

What is the best way to decrease the spacing between buttons?

I've been working on creating a welcome banner for my index page, but I'm facing an issue where the buttons need to be closer to each other. However, I can't seem to figure out how to achieve this. The buttons should be aligned to the right ...

htmlcsstwitter-bootstrapbootstrap-4

Enhancing webpage styles with AngularJS

Just starting out with AngularJS and eager to get the best approach to tackle this challenge. Describing my dilemma: I have an anchor element that, when clicked, needs to toggle between classes "show-all" and "hide-all" while also updating the styling of ...

javascripthtmlcssangularjsstyling

Issue with Dropdown Menu functionality while using multiple dropdown options

I am currently experimenting with dropdown menus from W3Schools and have encountered an issue when trying to implement two dropdown options. The code works fine for a single dropdown, but when I try to add a second one using GetElementsByClassName instead ...

javascripthtmlcsstwitter-bootstrap

Animating or transitioning CSS keyframes to an inline value when the page is initially loaded

In my current project, I am working on creating HTML and CSS-based bar representations of percentage values. The structure of the code is as follows: Using HTML: <div class="chart"> <div class="bar" style="width:43%"></div> </div&g ...

jquerycsscss-transitionscss-animations

Tippy.js tooltips are not adapting to CSS styling as expected

My experience with tippy.js in my browser had been smooth until this morning. All of a sudden, they stopped responding to any CSS styling and simply defaulted to a dark grey background with border radius. However, they still respond to changes in the scrip ...

javascripthtmlcsstippyjs

Is there a way to eliminate the additional gap found at the bottom of a div element?

I've been encountering some difficulty when trying to insert an image into a div without any padding. The issue I'm facing is that the sizing doesn't seem to be correct; there's unnecessary extra space at the bottom. Despite my efforts ...

htmlcss

Alter the top property of CSS using JavaScript

Hey there! I'm currently working on a project where I want to gradually change the background when a button is clicked on my website. Below you'll find snippets of JavaScript and HTML code that I'm using for this purpose. Can you take a look ...

javascripthtmlcss

Toggle textboxes using jQuery depending on the radio button choice

I'm trying to make specific textboxes appear when a particular radio button is clicked on my form, but I want them to remain hidden otherwise. Here's an example of what I've implemented: HTML: Radio buttons: <p>Show textboxes<inpu ...

javascriptjqueryhtmlonclickradio-button

challenges arise when using star icons to rate items visually, as the corresponding hidden values for backend processing are linked to radio input types

Hello, I am trying to retrieve the value of an input type radio by clicking on a star image visually. I have been successful in this, but I am having trouble resetting the star image in another row. You can view a demo of this here. I will explain what I ...

jqueryhtmlcssdefault-valuerating

Problem with the visibility of the drop-down menu when hovering over it

I am currently developing a ReactJS application using reactstrap. One of the components I have created is a dropdown with submenus nested inside. My goal is to make the submenus appear when hovering over the dropdown, and if there are multiple dropdowns ( ...

cssreactjstwitter-bootstrapreactstrapmegamenu

.when('User Input') real-time modifications and enhancements

I am currently facing an issue with my HTML number inputs that have unique ID's YXS, YSM, YMED My goal is to retrieve the values from each input, add them together, and display the result in #output. The problem arises when the inputs are not enter ...

javascriptphpjqueryhtmlcalculator

It is not possible to modify the CSS styles within the PrimeFaces Ultima template

Within my JSF project, I am utilizing the ultima template's latest version (ver. 2.0.2). Following the recent update of the project, there seems to have been a change in the CSS due to the presence of this selector: * { -moz-box-sizing: border-box ...

cssprimefacessass

Tips to prevent caching in the web console while reviewing the code document

Currently troubleshooting a PHP file with a syntax error using Firefox web console. I ensured the Disable Cache option is set and observed that changes to the file take effect immediately. However, despite displaying the syntax error in the console, clicki ...

phphtmlweb-console

Tips for successfully passing a variable in the data property of apexcharts

After assigning the array variable Managerslt to Apexcharts, I expected some output to appear but unfortunately nothing happens when the code is executed. series: [{ name: 'Favouritism', data: [managerslt] }, ...

htmlmodel-view-controllerapexcharts

Creating a form that displays only three questions simultaneously

My survey form consists of 13 questions, all displayed on one page. However, I would like to only show 3 questions at a time and then have the next set of 3 questions appear on the following page. I am not sure how to accomplish this. Any assistance would ...

javascriptjqueryhtmlcss

Unveiling concealed content with JQuery

Here is a link to my pen: http://codepen.io/anon/pen/IszKj I am looking to achieve the functionality where clicking on either "any status" or "any date" will reveal a hidden div containing a list of options. My main query is about the best approach to ta ...

javascriptjqueryhtmlcss

"Can I align a div in the center using inline-block with an

Despite my efforts, I still can't figure this out. My apologies for the duplication. I attempted to use text-align: center, margin: 0 auto;, and display: flex;, but none of them worked as expected in the end. I apologize for the messy formatting. ...

htmlcss

Exploring "Additional resources" using Selenium and Python

I am looking to extract text from the "Further reading" section of a Wikipedia article. My current code can open Google, input a request (such as 'Bill Gates'), and then find the URL of the corresponding Wikipedia page. Now I need help parsing th ...

htmlpython-3.xseleniumparsingselenium-webdriver