CSS Arrow Help!

[Ratee]

Okay so i want to align my arrows like the image below...

 

 

 

this is my html &' css...

 

HTML

<div style="width:800px;text-align:right; overflow:hidden;">
<form method=post> 
<button type='submit' value='Search' id='post_comment' name='search' style="border: 0px; background: transparent">
<div class="images"><img src="/arrows/arrowleftup.gif" alt="submit"/>
<img src="/arrows/arrowup.gif" alt="submit" />
<img src="/arrows/arrowrightup.gif" alt="submit" />
<img src="/arrows/arrowright.gif" alt="submit" />
</button>
</form>
</div>
</div>

 

 

CSS

.images {
    overflow: hidden;
}

.images img {
    float: left;
    margin: 0px;
}

please help me i have no idea how to do this..

 

Thank you for your time.

[Jessica]

It would be a lot easier to have 1 image and do an image map.

[Ratee]

i dont understand what you mean... please explain more..

[Jessica]

Instead of having 8 images, combine them into one image just like the image you posted.

Then if you need each arrow clickable, which why wouldn't you, put an image map on it.

[Ratee]

i understand now thankyou for your time:)