How to create this model for my template?

[d.crysty23]

 I want to change the order steps in the checkout page, like in the link below. I really like the model created in this template. I want to learn to do it and apply it for my template, but I don't know what to do. I've noticed that the css code in this template is very different from mine. Can you explain to me what I should do in order to get a similar model with that one? I've posted several illustrative images and their respective codes. I don't understand what's with the order_step.png image... Why does it have such a large size (550x280) and what use does it have?

 

code Template wine:

#order_steps {
    background-image: url("../img/order_steps.png");
    background-repeat: no-repeat;
    height: 56px;
    margin: 20px 0 0;
    overflow: hidden;
    width: 550px;
}

my template:

ul#order_step {
    background-color: #FFFFFF;
}

[vekia]

any chance to see them live? both your website, and page, where the correct "order steps" is

[d.crysty23]

 sorry, I forgot to post the links

 

http://www.3bwine.com/CRISTY/prestashop/index.php?controller=order

http://www.templatemonster.com/demo/42846.html