Question

I have created an image to illustrate my problem:

As you can see. I have a large rounded button. it consists of 3 images. One image is on the right side, another on the left size and another one in the middle.

The left and right images are quite wide because there is a gradient going on in the button so I cannot make them just 5px wide. The problem now is, that the text inside is limited to the middle area. I would like it to stretch across the entire button.

Here are my styles:

#index-navigation ul li a {
    height: 96px;
    line-height: 96px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    color: #333;
    background: url('/images/[e-mail]') right center no-repeat;
    padding-right: 100px;
}
#index-navigation ul li a span.left {
    background: url('/images/[e-mail]') left center no-repeat;
    padding-left: 100px;
}
#index-navigation ul li a span.middle {
    background: url('/images/[e-mail]') left center repeat-x;
}

How to edit the style to be able to have the anchor take the entire width of the button? Like this:

Answer 1

You have to move your text to a separate span to be able to stretch it across the whole a. Just give your .left and .right the appropriate backgrounds, let the a hold the main bg – http://jsfiddle.net/JutRB/3/

a {
    height: 96px;
    width: 350px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    color: #333;
    background: beige;
    border: 2px solid #000;
    display: inline-block;
    position: relative;
}

a span.left, a span.right {
    float: left;
    background: yellow;
    height: 96px;
    width: 100px;
    display: inline-block;
}

a span.right {
    float: right;
    background: pink;
}

a span.text {
    position: absolute;
    display: block;
    text-align: center;
    top: 30px;
    width: 100%;
}
​

UPDATE

Or if you want a CSS3 solution and don’t care about the older IE-s then you can use the :before and :after pseudo-elements with much cleaner markup – http://jsfiddle.net/JutRB/4/