Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile Need Help with creating Button in box with text/image

    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.

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    You want to make those titles on the right hand side buttons?

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tempz View Post
    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

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    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.

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Here is what i want to achive-


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

  • #6
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    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?

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    It's also possible to use the area tag, but css is better , and easier to control.

    Code:
    <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>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by AndrewGSW View Post
    It's also possible to use the area tag, but css is better , and easier to control.

    Code:
    <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

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by tempz View Post
    Adding a temporary css-outline will also help

    Code:
    area {
        outline: 1px solid gray;
    }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •