SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clickable(link) div not working how i thought. where am i going wrong

    hi Im trying to make a button div. but it must be transparent because i have it all set up in the image for the background in the body on css
    so what im trying to achive is for a transparent box to be set in a position that looks like youre clicking on the image.

    Problem:
    The Div i have created is making the whole line clickable.
    I just want the 50px by 50px box to be clickable

    Here is the code im using:

    CSS

    #button1{
    margin:122px 0px 0px 221px;
    display:block;
    height:50px;
    width:50px;
    background-color:#FFFFFF;
    }

    HTML

    <a href="example.com"><div id="button1" ></div></a>

    where have i gone wrong for this to not work how i want it too?
    thanks

    p.s sorry the link is not alowed so ignore the website in the a href part

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DeathToLems View Post
    Problem:
    The Div i have created is making the whole line clickable.
    I just want the 50px by 50px box to be clickable

    Here is the code im using:

    CSS



    HTML

    <a href="example.com"><div id="button1" ></div></a>

    where have i gone wrong for this to not work how i want it too?
    The problem is that you have invalid markup. An inline element such as a <a> can't hold a block element such as a <div>

    Switch your markup up
    Code:
    <div id="button1" ><a href="example.com">text</a></div>
    Then use this CSS
    Code:
    #button1{
    margin:122px 0px 0px 221px;
    display:block;
    height:50px;
    width:50px;
    background-color:#FFFFFF;
    }
    #button1 a{
    display:block;/*will fill up the 50px width with this*/
    height:50px;/*needs display:block; first in order to accept heights*/
    }
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you rock. thank you so much!! it was well worth signing up to this website after so long.
    nice one!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Your welcome . If you have any more questions just ask.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i do actually.
    *edit*
    i've made two more of these "buttons"
    but they are not coming up as links like the 1st one.
    why?
    the coding is the same

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    1) You are setting a TOP margni.

    margin:122px 0 0 0; is the same as
    Code:
    margin-top:122px;
    margin-right:0;
    margin-bottom:0;
    margin-left:0;
    All 3 have the same top margin thus they are next to each other.

    If you wnat space give a left margin. Also I would float the <li>'s instead of display:inline; it.

    Also look at your #button a{}. You have a \ after each one. Remove them.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea i sorted it out. i think im good now. cheers anyway. i'll be back if i have any more problems


Bookmarks

Posting Permissions

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