Placing a graphic above every list item within my navigation bar

I want to customize my navigation menu by adding an image above the text. The image should be displayed above the text for each navigation item.

Here is my HTML code:

<ul class="nav">
    <li class="whoweare"><a href="#">who we are</a></li>
    <li class="services"><a href="#">services</a></li>
    <li class="contact"><a href="#">contact</a></li>
</ul>

This is my CSS code:

ul.nav {
    list-style: none; 
    border-top: 20px solid #FFF; 
}

ul.nav li {
    float: left;
    text-align:center;
    width: 23%;
}
htmlcss

Answer №1

Check out this fiddle: http://jsfiddle.net/pixelass/YxkPz/

If you want the image to be clickable, just place it WITHIN the <a> tag

Take a look here: http://jsfiddle.net/pixelass/YxkPz/1/

The image should have display:block;

HTML

<ul class="nav">
  <li class="whoweare"><img src="http://lorempixel.com/150/50/sports/9/"><a href="#">who we are</a></li>
  <li class="services"><img src="http://lorempixel.com/150/50/sports/4/"><a href="#">services</a></li>
  <li class="contact"><img src="http://lorempixel.com/150/50/sports/1/"><a href="#">contact</a></li>
</ul>

CSS

ul.nav {
  list-style: none; 
  border-top: 20px solid #FFF; 
}

ul.nav li {
  float: left;
  text-align:center;
  width: 23%;

}
ul.nav li img{
  display:block;
}

Answer №2

Another way to incorporate an image into a link is by using the background-image:url('paper.gif') property and setting the text-indent:-9999px; 

.mission{
      background-image:url('image_location');
      text-indent:-9999px;
     }
 .values{
       background-image:url('image_location');
      text-indent:-9999px;
     }
 .vision{
      background-image:url('image_location');
      text-indent:-9999px;
     }

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

Seeking to implement a feature where Javascript adds input from a form into an HTML table in real-time?

Attempting to achieve this goal involves creating an array that holds an object with instance variables related to form input. After that, the next step is to add whatever was submitted from the form to the table. However, upon calling the function to acco ...

javascripthtmlcssbootstrap-4

I encountered a frustrating issue with saving user input data using localStorage

One of my goals is to store the current inputs even if the user refreshes or closes the browser. The issue I'm facing is that when I select Yes in the radio button, then refresh the page or close the browser and reopen it, the No button is checked wh ...

javascriptjqueryhtmllocal-storage

What is the best way to adjust the canvas size within a list item?

I have successfully created a 3D model with Zdog that dynamically resizes based on the screen size. The model includes a dome and brim, which rotate smoothly as intended. Here is the code snippet: const TAU = Zdog.TAU; let hat = new Zdog.Illustration({ ...

htmlcsshtml5-canvashtml-lists

Enhance user interactivity on your website by incorporating jQuery and CSS for

<table id="tab"> <tr aaa="one" bbb="ooo"><td>xxx</td><</tr> <tr aaa="two" bbb="one"><td>xxx</td><</tr> <tr aaa="three" bbb="one"><td>xxx</td><</tr> ...

javascriptjqueryhtmlcss

The Prism code block disrupts the fluidity of responsive design (which utilizes flexbox)

I created a design for a webpage that is fully responsive and adjusts smoothly to smaller screens. However, when I inserted a code block (and used prism.js to format it), the responsiveness of the layout was compromised. The code box and text content overf ...

cssflexboxresponsive-designviewportprismjs

Show fixed position buttons

My Angular HTML form includes a grid setup, defined as follows: .grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2%; grid-auto-rows: 90%; } This grid creates two parallel rectangles. I have divs ...

htmlcssangularbootstrap-4angular8

Prioritize loading iframes before other webpage content

My webpage includes an iframe, but the content within it only loads after all other content on the page has loaded. Is there a way to prioritize loading the iframe content before the rest of the page? Thanks! ...

javascriptjqueryhtmliframe

What causes this div to move downwards when new content is inserted?

My 5x5 grid seems to shift down when I add content to the div. Can someone help me understand why this is happening? Here's an example on Codepen: Risk Matrix ...

css

Retrieving a Selection from a dropdown menu that pulls data from an SQL database

I have successfully populated a drop down from my MySQL Database. Now, I need to extract the value from this dropdown. However, every time I try to extract the value, it only returns the position value of the selected item in the list. Below is the code f ...

phphtmlinputdrop-down-menuhtml-select

There appears to be an issue with the webpage retrieved through Python's requests post method

My current project involves utilizing the Python requests module to fill out a web form and then using BeautifulSoup to parse the resulting webpage in order to extract a specific image link (in FITS format) from it, which I then save. The website where I ...

pythonhtmlbeautifulsouppython-requests

Change the colors of a dynamic row in an HTML table using various options

I have successfully implemented a dynamic table using HTML and JavaScript. However, instead of applying alternate row colors, I want to assign a unique color to each row. How can I achieve this? <!DOCTYPE HTML> <html> <head> ...

javascriptjqueryhtmlcss

Including an <a> element in a flexbox layout causes everything to go haywire

How can I add links for each box without causing issues with the "a" tag? What am I doing wrong? .services-area { padding: 120px 0; } .container3 { display: flex; width: 100%; min-height: 500px; background-color: #fff; flex-wrap: ...

htmlcssflexbox

JS method for gradually reducing the opacity of various div elements

I currently have two divs with background images styled using CSS. My goal is to create a loop that fades them in and out continuously. While attempting to achieve this effect, I encountered some issues and the following code snippet doesn't seem to ...

javascriptjqueryhtmlcss

Continuous updates triggered by mouse movement with jQuery

Can someone help me figure out why my custom description isn't following my mouse pointer during the 'mousemove' event on an image? I've provided the HTML code below: <!DOCTYPE html> <html lang="en> <head> ...

javascriptjquerycss

Ways to incorporate audio files into an HTML webpage

My code snippet is as follows: <embed src="upload/audiofile/<?php echo $row['filename']; ?>" height="12px" width="150px" controller="true" autoplay="false" autostart="false" /> I have utilized this code to play audio files on a web ...

jqueryhtmlcssaudioxhtml

Using jQuery to retrieve the location of an element with a specific class

I am working on a slider that adds a class (.current-item) to each active tab and removes it when it's inactive. I am looking to incorporate the LavaLamp effect for the menu, but I am having trouble getting the position of each element with the curren ...

jquerycss

Switch the background image to a new one when the checkbox is selected

I am currently working on implementing a fading animation that transitions between background images of a div when a checkbox is checked. You can view a live example here Here is my jQuery code: $(function(){ $('#check').on('change' ...

jquerycssanimationcheckboxfade

React forms are experiencing issues with characters overlapping

Having trouble with overlapping label and input letters in my React form. Looking for: The appearance shown in the top image Experiencing: What is displayed in the bottom image Any solutions on how to resolve this issue? https://i.sstatic.net/Y3W2m.png ...

cssreactjs

Creating a unique custom bottom position for the popover and ensuring it is fixed while allowing it to expand

Creating a customized popover similar to Bootstrap's popover, I have successfully implemented popovers in all directions except for the top direction. My challenge lies in fixing the popover at the bottom just above the button that triggers it, and en ...

javascripthtmlcss

Looking for easy-to-use HTML partials, templates, and layouts for your server-side needs?

Currently, I am collaborating with two students on the creation of several HTML pages, including a homepage and two secondary page layouts. These pages will eventually be integrated into a larger CMS. I am interested in finding a way to separate out commo ...

htmlrubynode.jsbuild-processpartial