...

View Full Version : Need Help with creating Button in box with text/image



hyper
08-02-2012, 02:15 PM
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?

http://i.imgur.com/mHg0o.jpg

Any help welcome. :)

tempz
08-02-2012, 05:12 PM
You want to make those titles on the right hand side buttons?

hyper
08-02-2012, 09:30 PM
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
08-02-2012, 09:32 PM
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
08-02-2012, 09:34 PM
Here is what i want to achive-

http://i.imgur.com/TXXnY.png
But how to make individual title hyper linked? whatt css/html should do this?

tempz
08-02-2012, 09:37 PM
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
08-03-2012, 01:16 AM
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
08-03-2012, 01:18 AM
It's also possible to use the area tag, but css is better :thumbsup:, 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
08-03-2012, 01:22 AM
It's also possible to use the area tag, but css is better :thumbsup:, 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
08-03-2012, 01:30 AM
or try it yourself? http://www.w3schools.com/tags/tag_area.asp :P

Adding a temporary css-outline will also help :thumbsup:


area {
outline: 1px solid gray;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum