When a div is placed over an ul list, the list becomes hidden

I've been experiencing an issue across various platforms where I try to place a ul list on top of a div (image or background), but the list doesn't appear. I suspect it may be appearing behind the elements. I even tried adding z-index.

Check out the JSFiddle example here

CSS

.toolbar p{ text-align: right; padding: 10px 180px 0 0; color: #fff; font-size: 26px; z-index: 1; }
.toolbar { width: auto; height: 50px; background-color:  #cc1e2c; z-index: 1;}
.social-icons { z-index: 2;}

HTML

<div class="col_full toolbar"> 
            <p>CALL NOW: +1 555.555.1234</p>
            <ul class="social-icons">
                <li> <a href="graphics/twitter_icon.jpg" target="_blank"> </a></li>
                <li> <a href="graphics/instagram_icon.jpg" target="_blank"> </a></li>
                <li> <a href="graphics/facebook_icon.jpg" target="_blank"> </a></li>
            </ul>
        </div>
htmlcsshtml-listsz-index

Answer №1

The reason for the lack of visibility is due to the absence of any accompanying text with the links. If you were to include some text, the list would be displayed as follows:

<div class="col_full toolbar"> 
            <p>CALL NOW: +1 555.555.1234</p>
            <ul class="social-icons">
                <li> <a href="graphics/twitter_icon.jpg" target="_blank">Twitter </a></li>
                <li> <a href="graphics/instagram_icon.jpg" target="_blank"> Instagram</a></li>
                <li> <a href="graphics/facebook_icon.jpg" target="_blank"> Facebook</a></li>
            </ul>
        </div>

In this instance, I increased the height to demonstrate that the links are indeed present.

If you wish to view the images, you must utilize the image tag in the following manner:

<li> <a href="path/to/twitter.com" target="_blank"><img src="path/to/your/twitter_image.jpg"/> </a></li>

JSFiddle

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

I am having trouble with Node.js not properly handling POST requests and instead throwing a 505 error

I am a newcomer to nodejs and facing a roadblock in completing my project. I have been stuck for almost 2 days trying to resolve an issue with POST requests not being listened to by nodejs. Despite console logging, I keep getting a 405 error page. Here&ap ...

htmlnode.jsexpress

What is the most frequently employed syntax for a template rendering system?

Creating a template engine is my current project, which involves adding data to a template to generate a document. This concept is commonly seen in Active Server Pages, JavaServerPages, PHP, shell/bash scripts, ant, and Word form letters. Here are a few e ...

htmlxmltemplates

Content hidden by spoiler buttons may overlap with other spoiler buttons

I've created some spoilers that reveal information when clicked on. When I clicked on spoiler1, the content slid underneath the other spoilers strangely. Here's an example of what happened: http://gyazo.com/4571423534e2442dc960d119c668dfa8 Why ...

jquerycssposition

Having trouble with CSS3 radio buttons not functioning properly on Firefox?

Does anyone know why my CSS3 pseudo elements are working fine in Chrome, but reverting back to default styling in Firefox for my radio button? Any suggestions? Check out this JSFIDDLE link for reference: JSFIDDLE Here is the HTML code snippet: <input ...

htmlcssfirefoxradio-button

Is it possible to create interlinked HTML pages from markdown files?

Is it possible to create documentation using multiple .md files that reference each other and then utilize a tool like Dillinger to convert these .md files into separate html pages with interlinking? For instance, can I automatically transition (via Dilli ...

htmlmarkdownmultimarkdown

Awesome C# PDF Printing Solution [closed]

This question does not comply with our Q&A standards and guidelines. To maintain the integrity of our platform, we require answers to be factual, supported by references or expertise. However, this question may provoke debates, arguments, polls, or pro ...

c#htmlpdfpdf-generation

Executing code upon the completion of jquery's slideUp() function

Is there a method to trigger the execution of html() only after the completion of slideUp()? <p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor elit</p> $(".test").slideUp().html(""); I attempted using ...

javascriptjqueryhtmlslideup

Retrieve the content outside of the quotation marks in an HTML document through web scraping

I need help extracting specific information from a web page using Python. The data I want is not within quotation marks, as shown below: nummber = page_soup.findAll("span", {"id": "referenznummer"}) nummber # result [<span ...

htmlseleniumweb-scrapingbeautifulsoup

Updating displayed images in HTML using Python and Flask based on passed data

return render_template('homepage.html',imgName=filenameD) PYTHON <img src= {{ name }} alt="something" style="width:500px;height:600px;"> HTML I am attempting to dynamically change the image displayed on my website usi ...

pythonhtmlflaskweb

Resizing nested elements while maintaining consistent padding dimensions

If you're looking to create a sleek foundation for a 200px wide, 30px high editable combobox that can be easily used with angular binding or other JavaScript data-binding solutions, consider the following HTML code. However, there's a desire to m ...

javascripthtmlcsslayoutcombobox

What is the best way to interpret a line break within a string variable in TypeScript?

Realtime Data base contains data with \n to indicate a new paragraph. However, when this data is retrieved and stored in a String variable, the website fails to interpret the \n as a paragraph break: https://i.stack.imgur.com/tKcjf.png This is ...

htmlreactjstypescript

Ways to create a clickable anchor tag without using any text

I am currently designing my own website and incorporating links to various social media platforms using icons. However, I am facing an issue where the links are not clickable. For a detailed look at my problem, you can refer to this JSFiddle: http://jsfid ...

javascriptjqueryhtmlcss

quickest method for attaching a click listener to dynamically added elements in the document object model

When adding multiple elements to the DOM, how can we ensure that these elements also have a click handler attached to them? For instance, if there is a click handler on all elements with the "canvas-section" class, and new "canvas-section" elements are con ...

javascriptjqueryhtml

Building a versatile memoization function in JavaScript to cater to the needs of various users

There is a function in my code that calculates bounds: function Canvas() { this.resize = (e) => { this.width = e.width; this.height = e.height; } this.responsiveBounds = (f) => { let cached; return () => { if (!cache ...

javascripthtmlnode.js

Tips for deactivating dropdown values based on the selection of another dropdown

There are two dropdown menus known as minimum and maximum, each containing numbers from 1 to 25. If a value is selected from the minimum dropdown (e.g. 4), the maximum dropdown should only allow values that are equal to or greater than the selected value ...

javascriptjqueryhtmlhtml-select

The dropdown options for the input type file in Vuejs PWA are not appearing

I have created a Vue.js progressive web app that allows users to easily upload images from their mobile phones. While the app typically functions well, there is an issue where upon downloading the app to the homescreen, the image upload feature sometimes b ...

javascripthtmliosvue.jsprogressive-web-apps

Having trouble getting custom select to work with CSS in Firefox?

I want to customize the button (down arrow) located in the right corner of the select box. The HTML code is as follows: <div class="buscaSelect"> <select name="oper"> <option value="value1">Value 1</option> < ...

htmlcssfirefox

What is the best method to detect a change in scroll position on a webpage using JavaScript?

Is there a way to trigger an event when the page's scroll position changes? I'm interested in creating a dynamic table of contents similar to (where the active item changes as you scroll). Can this be achieved without directly accessing the cu ...

javascriptcss

Initiate a page break at the beginning of the table in case there are not enough lines on the first page

Does anyone know how to ensure that a table starts on a new page when printing, rather than continuing at the bottom of the previous page? I have tables with repeating headers and many rows, and sometimes a new table will start at the very end of a page. ...

htmlcss

Discover the key steps to extracting codes within a string in React or Javascript

I am currently developing an application that could potentially receive a string from the backend server. The string might look something like this: If you were to fold a piece of paper in half 50 times, its width would be three-quarters of the distance fr ...

javascripthtmlreactjs