Need Help with creating Button in box with text/image

[hyper]

Hi, Hope everyone fine on cf. i need a help with creating a button in box with html and css. What code (html/css) to use for achieve this kind of button in box?



Any help welcome.

[tempz]

You want to make those titles on the right hand side buttons?

[hyper]

Originally Posted by tempz

You want to make those titles on the right hand side buttons?

Hi tempz! Yes i want make those titles on the right hand side button with hyperlink with it. the width of the button will be 280px . how to code this with css that, it will have bakground image for every title. I will have 4 titles like this. Thanks

[tempz]

Can I have your website address?

If it's not online - Please zip your website up and upload it to putlocker or sockshare

so I can download it.

[hyper]

Here is what i want to achive-


But how to make individual title hyper linked? whatt css/html should do this?

[tempz]

I cannot do nothing with images, I need some code because I cant randomly start coding, it might not match what code you already have.

You see?

[AndrewGSW]

One approach is to use the images as backgrounds for table cells. You'll probably want to put this table within a div and, perhaps, float it to the right.

Remove margins and padding for the table cells, and make them the same size as the background image(s);
insert two a-links (perhaps within divs) into each cell;
change the display to inline-block for the a-links, so they expand to fill their parent div, and also do this for the divs;
use height, width and margins for the divs so that they sit on top of the correct parts of the background image.

Use a css class for the first (left-sided) divs, as they all seem to be in the same position, although not exactly the same size: this will save you setting the css-metrics four times over.

[AndrewGSW]

It's also possible to use the area tag, but css is better , and easier to control.

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

[tempz]

Originally Posted by AndrewGSW

It's also possible to use the area tag, but css is better , and easier to control.

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

or try it yourself? http://www.w3schools.com/tags/tag_area.asp :P

[AndrewGSW]

Originally Posted by tempz

or try it yourself? http://www.w3schools.com/tags/tag_area.asp :P

Adding a temporary css-outline will also help

area {
    outline: 1px solid gray;
}