Front-end Web Developer | Tampa, FL

 

First image:

 

 

Second image:

 

Note: I created first image with length 609px, you can create with any width, but i don’t think that the button will be more than this.

 

Now we crate HTML:

 

{CODE type:php;}
<div class=”button”>
    <a href=”/” title=”Sample Button Text”>Sample Button Text</div>
</div>
<div class=”clr”></div>
{/CODE}

Explanations:

I use DIV with class=”clr” for clearing “button” div with style FLOAT: LEFT;

 

And now add CSS:

 

{CODE type:php;}
.button {
background: url(images/stretch-button-bg.png) no-repeat top left;
height: 59px;
float: left;
padding-left: 24px;
line-height: 260%;
}
.button a {
background: url(images/stretch-button-end.png) no-repeat top right;
height: 59px;
padding-right: 24px;
display: block;
text-decoration: none;
color: #4d4d4c;
}
.clr {
clear: both;
height: 0;
overflow: hidden;
margin: -1px 0 0 0;
}
{/CODE}

 

Explanations:

I use line-height: 260% – this is for centered text by height – you can play with % value.

 

In next sample i will show how to create stretch box and it will be stretch by X and Y.

 

Here what we have to get:

 

 

ts the same what we did with stretch button background inside background, but here we will use it three times:

 

1. For the header of Box – two image (fist image stretch-box-bg.png is stretch background with length 1000px, second stretch-box-end.png is the end of our box)
2. For the context background (i use only one image stretch-box-content-bg.png for left and right side, because left and right side the same)
3. For the footer of Box (image stretch-box-btm-bg.png is stretch background with length 1000px, second stretch-box-btm-end.png is the end of our box in footer)

 

So first is our HTML:

 

{CODE type:php;}
<div class=”bigBox”>
    <div class=”titleBox”>
        <h1>Stretch box title</h1>
    </div>
    <div class=”contextBackgroundLeft”>
        <div class=”contextBackgroundRight”>
            <div class=”clr”></div>
            <p>Sample text</p>
            <div class=”clr”></div>
        </div>       
    </div>
    <div class=”bottomBox”>
        <div></div>
    </div>
</div>
{/CODE}

 

and CSS code:

 

{CODE type:php;}
.bigBox {
width: 100%;
}
.titleBox {
height: 35px;
overflow: hidden;
background: url(images/stretch-box-bg.png) no-repeat top left;
}
.titleBox h1 {
margin: 0;
padding: 0;
height: 35px;
background: url(images/stretch-box-end.png) no-repeat top right;
line-height: 260%;
}
.contextBackgroundLeft {
background: url(images/stretch-box-content-bg.png) repeat-y top left;
}
.contextBackgroundRight {
background: url(images/stretch-box-content-bg.png) repeat-y top right;
padding: 0 10px;
}
.bottomBox {
background: url(images/stretch-box-btm-bg.png) no-repeat top left;
height: 22px;
}
.bottomBox div {
background: url(images/stretch-box-btm-end.png) no-repeat top right;
height: 22px;
}
.clr {
clear: both;
height: 0;
overflow: hidden;
margin: -1px 0 0 0;
}
{/CODE}

 

Some tricks that i used in this tutorial:

 

{CODE type:php;}
<div class=”contextBackgroundRight”>
    <div class=”clr”></div>
    <p>Sample text</p>
    <div class=”clr”></div>
</div>       
{/CODE}

 

As you can see i used DIV with class=”clr”. If you remove it, you will see white spaces in top and bottom. This happen because we use tag < p > (or h1, h2, h3, ul….) all tags that have margin or padding will broke the box without DIV from top and bottom.

 

That is it. If you have any questions, feel free to ask me. I hope it will be helpfull