Replace list item with image

Question

I would like to replace a list item with an image.

The list item I wish to replace is the first list item class="main-logo".

My questions are as follows.

1.Do I do the replacement on the .main-logo or on the .logo? 2.What is the best technique to replace the list item with image? 3. If i wish to adjust the line-height of the list items, do i adjust the li class, the nav class or the a class?

thanks!

http://jsfiddle.net/codermax/fe0L3d08/4/

<nav class = "side-bar">
        <ul class ="main-bar">
            <li class="logo"><a href="#" class="main-logo">Logo</a></li>
            <li class="user-nav"><a href="#" class="big-box">User</a></li>
            <li class="main-nav"><a href="#">Home</a></li>
            <li class="main-nav"><a href="#">Visitor List</a></li>
            <li class="main-nav"><a href="#">Visualization</a></li>
            <li class="main-nav"><a href="#">History</a></li>
            <li class="divider-nav"><a href="#">Manage</a></li>
            <li class="manage-nav"><a href="#">Agents</a></li>
            <li class="manage-nav"><a href="#">Departments</a></li>
            <li class="manage-nav"><a href="#">Shortcuts</a></li>
            <li class="manage-nav"><a href="#">Banned Visitors</a></li>
            <li class="manage-nav"><a href="#">Triggers</a></li>
            <li class="divider-nav"><a href="#">Settings</a></li>
            <li class="settings-nav"><a href="#">Widgets</a></li>
            <li class="settings-nav"><a href="#">Personal</a></li>
            <li class="settings-nav"><a href="#">Accounts</a></li>
        </ul>
   </nav>

the css code.

.main-bar li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: auto 0;
    margin: auto 0;
    line-height: 2.5em;
    text-decoration: none;
    color: white;
    text-align: center;
 }

article {
    width: 60%;
    height: 30%;
    float: right;
    position: relative; 
}

.logo {
    height: 4em;
}

a.main-logo {
    background: url(zopim.jpg) no-repeat;
    display: block;
    height: 100%;
    top: 0;
    left: 0;
}

a.big-box {
    line-height: 7em;
    height: 7em;
}

Answer 1

Do I do the replacement on the .main-logo or on the .logo?

Do it on the .logo because it's the list item.

What is the best technique to replace the list item with image?

If you want to replace the content of the list item. From the word logo to an image, then just replace it with an <img> element. Besides it's the navbar you're working on, you most probably have only one navbar per page so it's okay if you don't do it using CSS.

If i wish to adjust the line-height of the list items, do i adjust the li class, the nav class or the a class?

The li class since it's the (and i quote) "list items" you want to adjust.

Answer 2

1.Do I do the replacement on the .main-logo or on the .logo?

I would personally do it on the .main-logo as you have a tags set to block and can control it a little better. And it's the most specific.

2.What is the best technique to replace the list item with image?

How you have it in your CSS already. Then set the line-height to something really high (e.g. 999em) and set overflow:hidden.

3. If i wish to adjust the line-height of the list items, do i adjust the li class, the nav class or the a class?

Doesn't matter a ton, but I would personally do the a as it's the most specific.

Answer 3

1.Do I do the replacement on the .main-logo or on the .logo?

The .logo, of course, You want to style the li, so that's what you need to target

2.What is the best technique to replace the list item with image? It differs from one developer to another, but my personal favorite, and I think the most used one, is the background technique. Like this:

li{list-style-type:none; padding-left:30px; background: transparent url(bullet.png) no-repeat 50% 0; background-size:100% auto /* this could vary depending on your needs */}

3. If i wish to adjust the line-height of the list items, do i adjust the li class, the nav class or the a class?

again, the li element. If you want to target an element, that's what you need to style. Think about this: what if you don't have an a element inside the li? what if the nav has another style (it probably will)? So, again, just style the element you need to style. And this is true in 99% of situations with CSS