CODEWITHSUNDEEP
htmlcss
Dynamiite
Dynamiite

Reputation: 1499

HTML ,CSS Navigation Menu using images

I have an image 78x26 px that i want to use as buttons for my navigation bar. What would be the most suitable way of doing this?

I want the image to keep its original size at the moment it doesnt

#navbar li {
    background-image:url("../images/btns.png");
}

Im aware that i can do something like this but then again how do i place the text over the images

<li><a href="#"><img src="images/btns.png"></a></li>

Upvotes: 0

Views: 189

Answers (3)

Timidfriendly
Timidfriendly

Reputation: 3284

I believe this to be the standards ways:

<nav class="navbar" role="navigation">
    <ul class="main-nav">
        <li class="menu-1"><a href="#">Menu-Link-text</a></li>
        <li class="menu-2"><a href="#">Menu-Link-text</a></li>
        ....
        </li>
    </ul>
</nav>

.navbar {
    overflow:hidden /* trick to force the navbar to wrap the floated <li>s */
} 
.main-nav li {
    float: left;
    display: inline; /* bug fix for older IE */
} 
.main-nav a {
    display:block; /* bigger click area */
    width: 78px;
    height:26px;
    text-indent: 100%; /* Text in the link for search engines and assistive technologies */
    whitespace: nowrap; /* see above */
    background: #yourFallBackBackgroundColor url("../images/btns.png") no-repeat 0 0; /* use a sprite with all images in one file and move them within background as required */
}
.menu-1 {
    background-position:0 0;
}
.menu-2 {
    background-position:-78px 0;
}
.menu-3 {
    background-position:-156px 0;
}

Upvotes: 1

user1477388
user1477388

Reputation: 21430

You must also specify your width and height of the <li>. Please try this:

#navbar li {
    background-image:url("../images/btns.png");
    width: 78px;
    height:26px;
}

<li> elements, I believe, are inline and therefore you must do something like this to make them appear side by side:

#navbar li {
        background-image:url("../images/btns.png");
        width: 78px;
        height:26px;
        float: left;
    }

Upvotes: 2

TKrugg
TKrugg

Reputation: 2405

background-image alone does not scale the image. If you feel like it's not rendering at the original size, it's probably because it's repeating.

use this instead:

background:url("../images/btns.png") no-repeat;

And then

<li><a href="#">Your text here</a></li>

You might now need to resize the li to fit your design

It could be better if you load your code online, like on codepen.io

Upvotes: 1

Related Questions