'Adding an Image for Button on a Navigation Bar in CSS/HTML

I need to use an image for my navigation buttons inside of my navigation bar. Right now, I have it set as a color, and when hovered over, it changes color.

However, instead of a color, I need an image. I have sized the button image to the exact height and width as I have set it inside of my css.

For each of the ul's: About Me, Photo Edits, Video Edits, Writing, I must have a button. I have the image and it is correct on its width and height.

Here is my HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CHANGE ME!</title>
<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="all">
<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>

<!--Start Container for Whole Site-->
<div id="container">

  <!--Start Header Content-->
  <div id="header">
    <div id="logo">
         <a href="index.html"><img src="images/logo.png" width="350" height="80" alt="My
          Logo" border="0" /></a></div>


  </div><!--End Header Content-->

      <!--Start Navigation ontainer-->

<div id="wrapper">
  <div id="navMenu">


    <ul>
    <li><a href="#">About Me</a>
    </li>
    </ul>



    <ul>
    <li><a href="#">Photo Edits</a>
    </li>
    </ul> 



    <ul>
    <li><a href="#">Video Edits</a>
    </li> 
    </ul>

    <ul>
    <li><a href="#">Writing</a>
    <ul>
    <li><a href="#">Samples</a></li>
    <li><a href="#">Recognition</a></li>
    </ul> <!--end inner UL-->
    </ul><!--End main ul-->



<br class="clearFloat" />




</div> <!--End Navigation Container-->
</div> <!--End wrapper div-->


      <!--Start Media Area-->
  <div id="media">
        <h1>Images/Rich Media</h1>
      <p>(470 x 550)</div>
  <div id="text">
    <h1>Main Body Text</h1>
      <p>(470 x 400)</p>

      </div><!--End Text Area Here-->

  <!--Start Footer Here-->
  <div id="footer">
        <h1>Footer (50 x 1024)</h1>
            <p> 
                <a href="http://voo2do.com/pub/module_6_Evan_Higgins">Voo2Do Public Task List</a> &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://students.cpcc.edu/~ehiggin1/web_140/images/sitemap_original.png">Sitemap Public Image</a> &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.gliffy.com/go/publish/9966553">Wireframe Public Image</a> &nbsp;&nbsp;&nbsp;&nbsp;
            </p>



      </div> <!--End Footer Here-->

</div><!--End Container for whole site-->


    <div id="w3"><!--Start HTML 5 Validation Button Here-->
    <p>
    <a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_html5.gif"  alt="Valid HTML 5" height="31" width="88" style="border:0px;" /></a></p></div><!--End HTML 5 Validation Button Here-->

      </body>
      </html>

And here is my CSS Code for the Navigation Bar:

#navMenu {
    margin:0;
    padding:0;


}

#navMenu ul {
    margin: 0;
    padding:0;
    line-height: 30px;

}

#navMenu li {

    margin: 0;
    padding:0;
    list-style:none;
    float: left;
    position: relative;
    background-color: #C0C0C0;

}

#navMenu ul li a {

    text-align: center;
    text-decoration: none;
    height: 35px;
    width: 254px;
    display:block;
    color: #FFF;
    border: 1px solid #FFF;
    text-shadow: 1px 1px 1px #000;
}

#navMenu ul ul {

    position:absolute;
    visibility: hidden;
    top:32px;
}

#navMenu ul li:hover ul {

    visibility:visible;

}

#navMenu li:hover {

    background: #09f;
}

#navMenu ul li:hover ul li a:hover {

    background: #CCC;
    color: #000;
}

#navmenu a:hover {

    color:#000;

}


.clearFloat {

    clear:both;
    margin:0;
    padding:0;
}

I have tried to put url(images/navbutton.jpg) inside #navMenu and that didnt work. No matter what selection I put the image under, nothing happens. And then on top of all that, I also have to have a rollover image for my buttons that is different from my background image. So i'm having two images. One image will be the button, and the second image will appear when hovered over. I'm going cross-eyed, ugh. Can someone please help me? note I am not using JS or JQ.

htmlcssnavigation


Solution 1:[1]

Just add the images in HTML instead of CSS, and then style them.

Assuming you don't want the labels "About Me, Photo Edits, Video Edits, Writing"...Just add add this inside your <a> tags:

<img src="/images/about-me.jpg" alt="About Me">

Then in your CSS just target the image:

#navMenu ul li a img { width: 254px; height: 35px; }

You then just need to add any styles for positioning.

For the hover effect, just add another image right next to the first one, add a class to it and then in CSS apply display: none; to that image. On hover of the <a> tag, just display: none; the first image and display: block; the second image.

You will also need to add relative positioning to the containing <a> tag and absolute positioning to the images so that they can sit on top of each other for when you hover on and off of them.

If you would like more specific info please create a codepen or jsfiddle with your current state of things.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mr Lister

Related Questions