SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image is partly clickable around the edges

    hi,

    can't understand why my image is clickable only around the edges. i wanted to make the entire thing clickable, but i can't figure out why. it's willheader.png. any ideas?

    thanks.

    Code:
    /*
    CSS for Will Portfolio site
    */
    
    html {
    margin:-10px;
    padding: 0px;
    height: 1000px;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    }
    
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }
    a {
      font-weight: light;
      color: black;
      text-decoration: none;
    }
    
    a:link {
      color: black;
      text-decoration: none;
    }
    
    a:visited {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: none;
      color: #ec008c;
    }
    
    a: active {
      color: aqua;
      background-color: navy;
    }
    
    li {
    list-style-type: none;
    }
    #bodycontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 25px;
    font-weight:normal;
    width: 200px;
    clear: left;
    padding-top: 34px;
    }
    div#navigation {
    height: 30px;
    width: 100%;
    margin: -47px 0 0 105px;
    padding: 0 0 0 20px;
    float: right;
    }
    div#navigation ul{
    white-space: nowrap;
    }
    div#navigation li{
    display: inline;
    float: right;
    margin: 0 5px 0 0;
    width: 70px;
    text-align; left;
    }
    div#header img{
    float:left;
    width: 150px;
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight:bold;
    padding: 18px;
    }
    div#container {
    margin: 0px auto;
    width: 800px;
    }
    div#links li{
    margin: 0 0 0 -23px;
    }
    a img {
    border-style: none;
    display: block;
    }
    Code:
    	<div id="container">
    	<head>
    	  <title>Welcome to William Design</title>
    	  <meta http-equiv="Content-Type"
    	  	content="text/html; charset=utf-8"/>
    	  	<link href="style1.css" rel="stylesheet" type="text/css" />
    	 </head>
    
    	<body>
    	<div id="header">
    	<img src="images/willheader.png">
    	</div>
    	<div id="navigation">
    	</div><!--end of navigation div-->
    	<div id="bodycontent">
    
    	  </body>
          </div>
    
    	 </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well i'll try your code and see what i come up with, but right away i notice this: "<div id="container"><head>." Div tags are used to structure your page with css, but are used in the body of the page(not around the head), so you might want to start with that.

    ps. you need an opening html tag, or did you just miss it when you pasted?

  3. #3
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by canassassin View Post
    Well i'll try your code and see what i come up with, but right away i notice this: "<div id="container"><head>." Div tags are used to structure your page with css, but are used in the body of the page(not around the head), so you might want to start with that.

    ps. you need an opening html tag, or did you just miss it when you pasted?
    hi,
    thanks for checking it out! i got an opening html tag, but i accidentally cut if off since this site wont let me post links since i'm a newb.

    i actually made a few changes to the css sheet. i increased the width of the div header img...tried to change the display to block. the image is larger now but there are still some nonclickable areas. thanks for your help!

    div#navigation {
    height: 30px;
    width: 100%;
    margin: -47px 0 0 0;
    padding: 0 0 0 0px;
    float: right;
    }
    div#navigation li{
    display: inline;
    float: right;
    margin: 0 0 0 0;
    padding: 0 0 0 10px;
    width: 75px;
    text-align; right;
    }
    div#header img{
    float:left;
    width: 300px;
    display: block;
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I found the issue. You had set the margin of your header div to move up 47px. This was placing it partly on top of your image and blocking the link. Simply changing that margin solved it for me on firefox and chrome(didn't check IE). I also fixed a few errors in your code but didn't check it thoroughly.

    Code:
    <html>
    	<head>
    	  <title>Welcome to William Design</title>
    	  <meta http-equiv="Content-Type"
    	  	content="text/html; charset=utf-8"/>
    	  	<style type="text/css">
    		/*
    CSS for Will Portfolio site
    */
    
    html {
    margin:-10px;
    padding: 0px;
    height: 1000px;
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    }
    
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }
    a {
      font-weight: light;
      color: black;
      text-decoration: none;
    }
    
    a:link {
      color: black;
      text-decoration: none;
    }
    
    a:visited {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: none;
      color: #ec008c;
    }
    
    a: active {
      color: aqua;
      background-color: navy;
    }
    
    li {
    list-style-type: none;
    }
    #bodycontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 25px;
    font-weight:normal;
    width: 200px;
    clear: left;
    padding-top: 34px;
    }
    div#navigation {
    height: 30px;
    width: 100%;
    margin: 0 0 0 105px;
    padding: 0 0 0 20px;
    float: right;
    }
    div#navigation ul{
    white-space: nowrap;
    }
    div#navigation li{
    display: inline;
    float: right;
    margin: 0 5px 0 0;
    width: 70px;
    text-align; left;
    }
    div#header img{
    float:left;
    width: 150px;
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight:bold;
    padding: 18px;
    }
    div#container {
    margin: 0px auto;
    width: 800px;
    }
    div#links li{
    margin: 0 0 0 -23px;
    }
    a img {
    border-style: none;
    display: block;
    }
    		</style>
    	 </head>
    
    	<body>
        <div id="container">
    	<div id="header">
    	<img src="images/willheader.png" height="100" width="100">
    	</div>
    	<div id="navigation">
    	</div><!--end of navigation div-->
    	<div id="bodycontent">
    	</div>
        </div>
    	  </body>
    
    	 </html>
    Try that, it should work.

    I included the style in the file cause its easier to edit in one file while problem solving. Hope this helps.

  5. #5
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your help! unfortunately, now the positioning of the contents of the navbar are too low. is there another way to solve this?

  6. #6
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pillsbury View Post
    thank you for your help! unfortunately, now the positioning of the contents of the navbar are too low. is there another way to solve this?
    never mind, i think i solved it. i decreased the width of the navigation bar from 100% to 150px...then i increased the padding from the top.

    thank you!

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem.

    Glad it works.

  8. #8
    SitePoint Addict Belfast75's Avatar
    Join Date
    Oct 2005
    Location
    London, England
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This was placing it partly on top of your image and blocking the link.
    I use the Web Developer tool bar for firefox and it includes an 'outline images' option that can make it really easy to spot if an image over laps something when it shouldn't

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Belfast75 View Post
    I use the Web Developer tool bar for firefox and it includes an 'outline images' option that can make it really easy to spot if an image over laps something when it shouldn't
    Yah, I found it by using the firebug addon for firefox.


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
  •