Question

What I want to achieve is something like this.

::::::::::
…hi….
……….
……….
The hi is in the middle of the 2 colors.

I have it working for 1 color, and another color underneath, but would like the colors to split up in the middle of the text. (I’ll be using button images if no one can come up with a solution using css (Trying to avoid using images)

EDIT: Of course the css result has to be across browsers (ie 7+, FF3.0+, chrome, opera (newest))

Thanks

Answer 1

HTML:

<div class="fancyButton">
    <div class="background top"></div>
    <div class="background bottom"></div>
    <p>hi</p>
</div>

CSS:

.fancyButton
{
    width:100px;
    position:relative;
}

.fancyButton .background
{
    width:100%;
    height:50%;
    position:absolute;
}

.fancyButton .background.top
{
    top:0;
    background-color:red;
}

.fancyButton .background.bottom
{
    bottom:0;
    background-color:blue;
}

.fancyButton p
{
    position:relative;
    text-align:center;
}

Tested, and hopefully copy-pasted correctly. It uses a div that takes it’s height from the <p> inside of it. The two backgrounds are set to the top and the bottom of the button div and are 50% of it’s height so they meet nicely in the middle, no matter what height the button is. You can take out the fixed width and replace it with a left-right padding declaration for the button div if you want, so that the width is determined by the <p> too. (just realizing this and don’t want to retest)

Nothing fancy; just solid, robust css!