I need some Help with my navbar, i am trying to use one image and have it repeat across the the navbar and it works. but then i was wondering how to make it so that if they can click on the picture or the words without problem. because right now it only works if u click on text
- Code: Select all
/*NAVBAR STYLE*/
ul.navbar {
padding: 0px;
margin: 0;
width: 0;
display: inline;
border: none;
}
ul.navbar li {
margin:0px;
text-align: center;
vertical-text-align:bottom;
font-size: 20px;
float: left;
border: 1px solid;
width: 134px;
height: 48px;
background-image: url('navigation_button.PNG');
}
ul.navbar li:hover {
margin:0px;
text-align: center;
vertical-text-align:bottom;
font-size: 20px;
float: left;
border: 1px solid;
border-color:white;
width: 134px;
height: 48px;
background-image: url('navigation_button.PNG');
}
ul.navbar a {
color: white;
padding: 0;
margin: 0;
}
ul.navbar a:hover {
color: dark blue;
padding: 0;
margin: 0;
width: 0;
}
div {
background-color: transparent;
border:0; }
#navbar {
width: 900px;
height: 50px;
margin: 0;
padding: 0px;
z-index: 1;
background-color:#356AA0;
position:absolute;
top:146px;
left:0px;
}
/*END NAVBAR STYLE*/
- Code: Select all
<!--Navigation-->
<div id="navbar">
<ul class="navbar">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contacts</a></li>
<!-- <li><img alt="" src="blanknavbar.PNG" /></li>-->
</ul>
</div>