Customize your CSS menu by adding a unique image or icon to each button

After creating an HTML menu with links to Football, Basketball, and Baseball pages, I have the following CSS file:

#main-nav a
{     
   display: block;
   float: left;
   margin: 125px 0px 0px 0px;
   color: #666666;
   border: 1px #C0C0C0 solid;
   background-color: #EEEEEE;
   font-family: Arial;
   font-size: 13px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   width: 106px;
   height: 78px;
   vertical-align: middle;
   line-height: 78px;
   text-align: center;
}
#main-nav a:hover, #main-nav .active
{
   color: #666666;
   background-color: #C0C0C0;
   border: 1px #C0C0C0 solid;
}

To enhance this menu, I want to add 30x30 icons of football, basketball, and baseball to the corresponding buttons. My initial attempt involved placing each image in a DIV and positioning it within the button, but this method proved to be fragile and inefficient.

Can anyone suggest a better approach to achieve this design enhancement?

htmlcss

Answer №1

If you're looking to implement a navigation bar with icons, you can use the following code:

    <div id='main-nav'> <a href="./football.html">Football<div class='icon'></div></a>

<a href="./basketball-.html">Basketball<div class='icon'></div></a>

<a href="./baseball.html">Baseball<div class='icon'></div></a> 
</div>

To style it accordingly, you can apply this CSS:

#main-nav a {
    display: block;
    float: left;
    margin: 125px 0px 0px 0px;
    color: #666666;
    border: 1px #C0C0C0 solid;
    background-color: #EEEEEE;
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    width: 106px;
    height: 78px;
    vertical-align: middle;
    line-height: 78px;
    text-align: center;
    position : relative;
}
#main-nav a .icon {
    height: 30px;
    width : 30px;
    background : red;//change this for the img.
    position : absolute;
    top : 0;
    left  : 35px;
}
#main-nav a:hover, #main-nav .active {
    color: #666666;
    background-color: #C0C0C0;
    border: 1px #C0C0C0 solid;
}

To change the red background to an image, use background: url(/path/to/image)

For a visual representation and testing, check out this jsFiddle link.

Note: While placing a <div> inside an <a> tag is valid in HTML5, it may not be supported in HTML 4.01. More information can be found here.

Answer №2

Give this a shot

    #main-nav a
    {     
       display: block;
       float: left;
       margin: 125px 0px 0px 0px;
       color: #666666;
       border: 1px #C0C0C0 solid;
       font-family: Arial;
       font-size: 13px;
       font-weight: normal;
       font-style: normal;
       text-decoration: none;
       width: 115px;
       height: 78px;
       vertical-align: middle;
       line-height: 78px;
       text-align: center; 
        background:url(http://img6a.flixcart.com/image/ball/4/g/g/vector-x-football-england-100x100-imade784dbrjbdzp.jpeg) no-repeat 50% 99% #EEEEEE;
        background-size:25px
    }
#main-nav a:nth-child(2){
    background:url(http://www.iconshock.com/img_jpg/BRILLIANT/sports/jpg/128/american_football_icon.jpg) no-repeat 50% 99% #EEEEEE;
    background-size:25px
}
#main-nav a:nth-child(3){
    background:url(http://www.iconshock.com/img_jpg/BRILLIANT/sports/jpg/128/archery_icon.jpg) no-repeat 50% 99% #EEEEEE;
    background-size:25px
}

Check out the demo here

Updated version of the demo available

Answer №3

Give this a shot in your HTML

<div id="main-nav">
  <a href="#" class="football">Football</a>
  <a href="#" class="cricket">Cricket</a>
  <a href="#" class="tennis">Tennis</a>
</div>

Here's the accompanying CSS

#main-nav a
 {     
  display: block;
  float: left;
  margin: 125px 0px 0px 0px;
  color: #666666;
  border: 1px #C0C0C0 solid;
  background-color: #EEEEEE;
  font-family: Arial;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 106px;
  height: 78px;
  vertical-align: middle;
  line-height: 78px;
  padding-left:50px;
 }

 #main-nav a.football{
background:url("http://icons.iconarchive.com/icons/ampeross/qetto/32/icon-developer-icon.png") no-repeat 10px;
}
 #main-nav a.cricket{
background:url("http://icons.iconarchive.com/icons/deleket/3d-cartoon/32/Axialis-Icon-Workshop-icon.png") no-repeat 10px;
}
#main-nav a.tennis{
background:url("http://icons.iconarchive.com/icons/deleket/mac-folders/32/Blue-Apple-icon.png") no-repeat 10px;
}
#main-nav a:hover, #main-nav .active
 {
  color: #666666;
  background-color: #C0C0C0;
  border: 1px #C0C0C0 solid; 
}

Check out my fiddle http://jsfiddle.net/ponrajpaul/4VMa4/

If you wish to use the same icon for all links, simply remove the class names from the 'a' tags and do as follows

<div id="main-nav">
 <a href="#">Football</a>
 <a href="#">Cricket</a>
 <a href="#">Tennis</a>
<div>


#main-nav a{
background:url("http://icons.iconarchive.com/icons/deleket/3d-cartoon/32/Axialis-Icon-Workshop-icon.png") no-repeat 10px;
}

The 'a:nth-child(numbers)' method will not be supported in IE6. If you don't need support for old IE browsers, then the nth-child method is ideal for you.

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

Enhance your website by adding a <select> element using an AJAX call that

Encountering challenges in dynamically generating <select> elements and then populating them with values from an XML file. The jQuery script appends a <div> containing a select element and adds options based on the data obtained from XML. Thi ...

jqueryhtmlxmlajax

What is the best method for showing the name of the card?

I have developed a game using Angular that displays images of cards, but I am facing an issue in showing their names on the screen. At times, it displays the same name for all the cards or even incorrect names. In my TypeScript class 'Paquet', I ...

htmlangulartypescript

Is it possible to incorporate a variable into an object?

If you are wondering whether it is possible to utilize a variable in the following scenario, the reason for my inquiry is connected to the potential of utilizing an input element to dynamically modify the variable: var str = "pineapples" var cost = { pine ...

javascripthtml

Gauging Screen Size: A Comparison between Media Queries and JavaScript for Adjusting Div Position

I am currently facing an issue with the banner on my website. It contains a slider and has a position set to absolute. The problem arises when viewing it on smaller screens, as only the left side of the wide banner is visible. Initially, I tried using med ...

javascriptcssmobilescreen

Adjust the size of bootstrap card titles to match up with the image on the page

I am facing an issue where the title of the second card is pushing the image down. Is there a way to dynamically resize the card title to align all the images properly? Any help would be appreciated. https://i.sstatic.net/PRRHl.png Bootstrap Card ...

cssimagealignmentbootstrap-5bootstrap-cards

What steps should I take to ensure my navbar functions correctly?

I have recently designed a responsive navigation bar for my website, but I am encountering an issue. When the user reduces the browser size and tries to click the hamburger icon on the side, the navbar does not work as expected. The user needs to refresh t ...

javascripthtmljquerycssbootstrap-4

Restricting the number of ajax requests for each input field

I have implemented an ajax call that sends a value to an endpoint for every input change. This means that with each keystroke, a call is triggered. Although I applied a setTimeout function for 2 seconds to delay the calls, the issue remains as it continue ...

javascripthtmlajax

The error undefinedspan is being thrown when using document.getElementById.value in conjunction with a span tag

While using document.getElementById.value on an input tag, I'm getting the correct value. <td ><input id="testing" data-bind="value: SPL_ApprovalDetailsObj.TgtSales "> </span></td> However, when I try the same with a span tag ...

htmlknockout.js

Issue with submitting form on PHP page

I need some help with my signup form: <h2>Signup</h2> <form action="actions.php"> Email:<br> <input type="text" name="email"> <br> Password:<br> &l ...

phphtml

Avoid changing the styling of the parent element when hovering over it

I am working on a comment box that allows for nested comments and is structured in the following way: <article class="comment"> Level 1 comment <article class="comment"> Level 2 comment </article> <article class="comment"& ...

htmlcss

I am attempting to retrieve the information entered into the textbox, search for it within my database, and display the results beneath the textbox for reference

<!----- fetchCedulaData.php This script retrieves data from the database and performs a search to return results ---------------------------- - --> <?php require("connection.php"); $cedula=$_REQUEST["cedula"]; //$cedula="0922615646"; echo $cedu ...

javascriptphphtmlajax

The CSS on the page does not update when called within a JavaScript function

Just joined and this is my first question, so please go easy :). I've encountered a problem with changing the CSS of elements and their refresh. I'm working on a webforms application with AJAX requests. The issue I'm facing is that when som ...

cssajaxgoogle-chromevisibility

Tips for generating a single CSS file that adapts to various screen sizes without the ability to modify the class names within the library

I am currently learning ReactJs and JavaScript and I have a question on how to optimize this css setup effectively. I am utilizing the react-responsive library to detect screen sizes and determine the best layout for my project. The issue I am facing is ...

javascripthtmlcssreactjs

What is the best way to iterate through my array and display each value within my button element?

I have a challenge where I'm trying to iterate over an array named topics. This array contains the names of various people. Within my loop, my goal is to extract each name and insert it into a button as text. When I use console.log within my loop, I ...

javascriptjqueryhtml

Continuously executing a series of JQuery functions or iterating through them repeatedly

Struggling with a jQuery animation loop issue that has me stuck. I need the animation to repeat continuously, but it's not working despite trying setInterval. Can anyone assist? Here's the fiddle link: https://jsfiddle.net/8v5feL9u/ $(document). ...

javascriptjqueryhtmlfrontend

Utilizing AngularJS to handle the reception and storage of HTML entities

I am having an issue storing and displaying HTML content (using an HTML editor) in my AngularJS WebApp. The problem is that the code appears as plain text. Here is the JSApp code: $scope.SkipValidation = function (value) { var decoded = $("#showtext" ...

phphtmlangularjs

What is the most effective method to exhibit every element within a content wrapper at a specific interval of time?

I am looking for a way to display each div within the content-wrapper after a specific time interval. Currently, I am using individual classes like el1, el2, el3, ... to accomplish this task. However, when dealing with content-wrappers containing multipl ...

javascripthtmljquerycss

Can JavaScript and CSS be used to dynamically style textarea content as it is being typed by the user?

I am wondering if it is possible to apply styling to content in a textarea as a user inputs text. For instance: <textarea>abcdefghijklmnopqrstuvwxyz</textarea> Is there a way to highlight all the vowels in the textarea string above using jav ...

javascriptjqueryhtmlcssforms

saving information into a MySQL database

I am facing an issue where I am trying to write data to MySQL. When I input the data and press the submit button, the console log message from the function indicates that everything is okay. However, upon checking the database, there is nothing saved. Can ...

phphtmlmysqlangularjs

There seems to be an issue with configuring placeholders in Tailwind CSS

After deciding to switch to using only tailwind CSS, I noticed that on a particular page there were inputs with transitions but no icon on the inner left side. Adjusting the colors and position of the placeholder helped prevent collisions between the icon ...

htmltailwind-css