image is partly clickable around the edges

**pillsbury** · Jan 27, 2009 19:02

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&#37;;
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>

**canassassin** · Jan 28, 2009 00:33

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?

**pillsbury** · Jan 28, 2009 01:18

Originally Posted by canassassin

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;
}

**canassassin** · Jan 28, 2009 01:56

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.

**pillsbury** · Jan 28, 2009 07:41

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?

**pillsbury** · Jan 28, 2009 07:48

Originally Posted by pillsbury

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!

**canassassin** · Jan 28, 2009 10:41

No problem.

Glad it works.

**Belfast75** · Jan 28, 2009 11:14

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

**canassassin** · Jan 28, 2009 15:37

Originally Posted by Belfast75

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.

User Tag List

Thread: image is partly clickable around the edges

Thread Tools

Display

image is partly clickable around the edges

Bookmarks

Bookmarks

Posting Permissions