Make Custom Bullet Image Part of Clickable Link - html

Question

I am trying to code a horizontal navigation menu in CSS with custom bullet images.
I can get most things working, but the problem is that the custom bullet image (which is different for each navigation item) is not part of the clickable link.
I know I can move the A tag outside of the LI tag, but that is poor coding practice.
Does anyone know how I can make the custom bullet image be part of the clickable link? My gut instinct was to make sure of display:block, but then it messes up the horizontal layout.
Here is what I've got so far:
CSS:
#navlist {
list-style: none;
margin: 0;
padding: 20px 0 0px 20px;
}
#navlist ul {
margin: 0;
padding: 0;
}
#navlist li {
display:inline;
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 35px;
margin: 0 20px 0 .4em;
}
#navlist li a {
text-decoration:none;
}
#navlist li.contact {
background-image: url(img/contact.png);
}
#navlist li.about {
background-image: url(img/about.png);
}
HTML:
<ul id="navlist">
<li class="contact">Contact Us</li>
<li class="about">About Us</li>
</ul>

Answer 1

I'm assuming that your custom bullets are your background images applied to #navlist li.contact and #navlist li.about.
My suggestion would be to remove the padding from your li's and add the padding to your a's. This will force the spacing that is used to see the bullet to be within your a tag and "clickable".

Answer 2

To get it working as you describe try to use
display: inline-block;
and change left padding/margin as below:
#navlist li {
display: inline-block;
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 0;
margin: 0 20px 0 .4em;
}
#navlist li a {
text-decoration: none;
padding-left: 35px;
}

Answer 3

There are different ways to achieve what you want:
1. THE LI WAY (not advised)
<ul id="navlist">
<li class="contact">Contact Us</li>
<li class="about">About Us</li>
</ul>
In that case, li a {float:right; width:<fixedwidthforall>;}. So you'd have to give all anchors a fixed width, float them right, and make sure the background-image on liis visible.
Lots of trouble, and you'll have a harder time changing the bullet image on :hover.
2. THE PREFERRED WAY (advised)
<ul id="navlist">
<li>Contact Us</li>
<li>About Us</li>
</ul>
The most common practice is to put some padding to your anchors and move the background-image to the anchors (not the li's). That means also moving the classes to the anchors.
3. THE OKAY WAY
<div id="navlist">
Contact Us
About Us
</div>
For a small website with absolutely no need for extensible navigation, a div with anchors with the following styling is just fine. No need to complicate things needlessly.
<style>
#navlist a {
display: block;
float: left;}
</style>
4. THE REBEL WAY
If you feel like doing something unconventional, rebellious, go for this kind of markup:
<ul id="navlist">
<li><a href="#" class="contact">Contact Us
<img src=""></img></a></li>
<li><a href="#" class="about">About Us
<img src=""></img></a></li>
</ul>
Why not add an image in the navigation link huh? Or why not the entire page as a display:none and show it on hover. No one does it, but there's always gotta be a pioneer!
BOTTOMNOTICE
"I know I can move the A tag outside of the LI tag, but that is poor coding practice."
There are a lot of different ways to style your navigation links. There are conventions and good coding, but it's not a law. Often times, people who deviate from the standards are the new innovators.
If your navigation contains two links, is it worth the trouble creating a ul, li's and a's while you could do much faster, and with the same quality with a's?
PS: Classes are used for recurring elements, id's for unique ones. Unless you re-use the same styling on other elements, they should be id's... But again, that's a convention. You're free to choose!

Answer 4

I not sure if you try this way move the background-image in <a>
#navlist {
list-style: none;
margin: 0;
padding: 20px 0 0px 20px;
}
#navlist ul {
margin: 0;
padding: 0;
}
#navlist li {
display:inline;
}
#navlist li a {
text-decoration:none;
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 35px;
margin: 0 20px 0 .4em;
}
#navlist li.contact a{
background-image: url(img/contact.png);
}
#navlist li.about a{
background-image: url(img/about.png);
}
working demo hope this help

Answer 5

Add
#navlist li {
list-style-position: inside;
}

Answer 6

Just style the a instead of the li and apply the background-image to that. This is also way more semantic. The changed code would be:
#navlist li {
display:inline;
}
#navlist li a {
text-decoration:none;
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 35px;
margin: 0 20px 0 .4em;
display: inline-block; // to make the padding work
}
#navlist li.contact a {
background-image: url(img/contact.png);
}
#navlist li.about a {
background-image: url(img/about.png);
}