PDA

View Full Version : website clickable buttons not showing up (newbie here)


missdrika05
01-25-2009, 09:39 AM
first, I created my layout in photoshop then sliced it and imported it into DW. I have been having this button problem like forever, trying to figure out how to make them clickable. I tried to just do the simple way, just click the image button and link it. That didnt work, it would break up the page and leave a bluish like border around the images. So, I tried the hotspot tool, which I know is for if my header wasnt sliced, but I tried it anyway and that seem to work, at least when previewing it in DW. I had other problems with trying to get my site live on the web, but it finally is on the web, but you can view the home page fine but when you click on the other links, it doesnt display the image buttons, why is that? my site www.dezignxgfx.com (http://www.dezignxgfx.com) (this is my first attempt at doing a website, just learning) I know I shouldnt have did it the photoshop route and should have just learn css/html, which I am currently and will redo the site once I grasp the coding.

Does anyone have any other suggestions on how to make the buttons clickable?? how to make the buttons show up?

Corrosive
01-25-2009, 09:55 AM
first, I created my layout in photoshop then sliced it and imported it into DW. I have been having this button problem like forever, trying to figure out how to make them clickable. I tried to just do the simple way, just click the image button and link it. That didnt work, it would break up the page and leave a bluish like border around the images. So, I tried the hotspot tool, which I know is for if my header wasnt sliced, but I tried it anyway and that seem to work, at least when previewing it in DW. I had other problems with trying to get my site live on the web, but it finally is on the web, but you can view the home page fine but when you click on the other links, it doesnt display the image buttons, why is that? my site www.dezignxgfx.com (http://www.dezignxgfx.com/) (this is my first attempt at doing a website, just learning)

Does anyone have any other suggestions on how to make the buttons clickable?? how to make the buttons show up?

OK, first up. Welcome to the forums. Second, really cool design 8-) Love it.

Thirdly (and this is the painful part) don't use the photoshop method to build websites. It gives your whole site in tables and these are really, really outdated. You need to learn CSS based web design to do this properly.

Quick hint. You get the 'blue border' because Internet Explorer gives linked images a border by default. You can add img {border: 0;} to your stylesheet and this will 'cure' the problem. You won't get the blue border in compliant browsers...it's just that IE is a dog.

Go and find some tutorials on CSS based design (there are some on this site) and begin your journey to compliant, accessible and table free web design. We will help all we can. :)

Corrosive
01-25-2009, 09:56 AM
I know I shouldnt have did it the photoshop route and should have just learn css/html, which I am currently and will redo the site once I grasp the coding.

Looks like you read my mind as I was typing there :wink:

missdrika05
01-25-2009, 10:15 AM
LOL...Thanks & Thanks for responding

I really really need to learn css. Im trying though

I had read somewhere to set the border to 0. Did that and the buttons were fine only it messed the bottom of my page up. It had the home button image a hundred times at the bottom.

Maybe I'll go back and undo the hotspot tool and try removing the border again to see. Will post when I am done

But looks like imma have to start all over and without photoshop. I would really like a design close to the one I have but I just dont see me being able to do it. I have the design in mind but I dont know how to do it in dreamweaver. I maybe see myself being able to do a simple graphicless and colorless looking site in dreamweaver, maybe one close to a site as if u would use a website builder.

urbanrays
01-25-2009, 11:22 AM
Hi

Can I just add a little more to the comments you already have.
Try and stay away from hotspots too.
Your site is very good and to be honest shouldnt be too much of a problem to do in css. If you are new to css though the only thing I could see personally you would struggle with is your navigation at the top of the page.
But i am sure someone will be able to help you here with that.
I found when starting out with css the best way to learn is download a couple of templates and mess about with them until you start to understand how they work.
This one would be a good one for you to start with
I LOVE COCKTAIL on this page
http://www.free-css.com/free-css-templates/page88.php

It will help you grasp how to get your bubbled effect down the sides of you main page get the large header image in. ANd for the time being have a straight edged navigation.

Hope this helps

missdrika05
01-25-2009, 05:02 PM
Thanks and imma go through those templates too

Thats what I was thinking, that my most trouble would be with the navigation.

Someone had pointed out that I needed to make sure all my paths were correct,because when they went to the site, say for instance http://www.dezignxgfx.com/services.html (http://www.dezignxgfx.com/services.html)

the images are not showing. For example, the path to the image in my code for my "Home" button was showing as file:///C|/Users/Shandrika/Desktop/DezignX/sliced%20page/images/home.gif when it should be something like http://www.dezignxgfx.com/images//home.gif (http://www.dezignxgfx.com/images//home.gif).


So, I went and changed the path to all my images, which it did point as desktop etc... but the problem still exists.

I went and changed each image path src down in the properties to images/home.gif ( I basically just selected the point to file button to get the image src) The problem still exists. But, I noticed that the only one that is showing up is the update/news & f.a.q buttons. When on the web on my website, I right clicked on the properties for the update/news & f.a.q button and it shows a url of http://dezignxgfx.com/images/updatesnews.gif (http://dezignxgfx.com/images/updatesnews.gif) and http://dezignxgfx.com/images/faq.gif (http://dezignxgfx.com/images/faq.gif) , when I do the other buttons it shows as unavailable. I have the same src file as I have for the other buttons, so I dont know why those are the only two showing up.


<td rowspan="3">
<a href="index.html"><img src="images/logo.gif" alt="" width="241" height="244" border="0"></a></td>
<td colspan="3" rowspan="2">
<img src="images/headerleftspace.gif" width="225" height="150" alt=""></td>
<td colspan="2">
<a href="updates_news.html"><img src="images/updatesnews.gif" width="125" height="35" border="0"></a></td>
<td colspan="2">
<a href="f.a.q.html"><img src="images/faq.gif" width="60" height="35" border="0"></a></td>
<td colspan="2">
<a href="links.html"><img src="images/links.gif" alt="" width="62" height="35" border="0"></a></td>
<td>
<img src="images/headerrightspace2.gif" width="67" height="35" alt=""></td>
<td>
<img src="file:///C|/Users/Shandrika/Desktop/DezignX/sliced page/images/spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/headerrightspace1.gif" width="314" height="115" alt=""></td>
<td>
<img src="file:///C|/Users/Shandrika/Desktop/DezignX/sliced page/images/spacer.gif" width="1" height="115" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<a href="index.html"><img src="images/home.gif" alt="" width="59" height="95" border="0"></a></td>
<td rowspan="2">
<a href="about.html"><img src="images/about.gif" alt="" width="76" height="95" border="0"></a></td>
<td rowspan="2">
<a href="services.html"><img src="images/services.gif" alt="" width="90" height="95" border="0"></a></td>
<td rowspan="2">
<a href="rates.html"><img src="images/rates.gif" alt="" width="68" height="95" border="0"></a></td>
<td colspan="2" rowspan="2">
<a href="samples.html"><img src="images/samples.gif" alt="" width="95" height="95" border="0"></a></td>
<td colspan="2" rowspan="2">
<a href="order.html"><img src="images/order.gif" alt="" width="76" height="95" border="0"></a></td>
<td colspan="2" rowspan="2">
<a href="contact.html"><img src="images/contact.gif" alt="" width="75" height="95" border="0"></a></td>
<td>

urbanrays
01-26-2009, 11:57 AM
A friendly reply

Do not want to sound like I am being funny, so dont take this the wrong way.
You have had 2 pieces of advice regarding the problems with your links and having trouble etc etc
The best advice that you have been given is to stay away from photoshop to slice your images and create the website in CSS.
People will be reluctant to help when they read the advice then you post code and you are still using tables.
I have put this together for you, like I said in the previous post I am not sure how you will get your navigation like you have it. (someone on here might know if at all its poss or how to do it)

http://www.urbanrays.co.uk/grafix.htm

By all means download this to your system and have a play.

But please do yourself a massive favour stay away from tables, you will spend all your time then find you get it right in lets say ie7 and look at it in another browser and it looks a complete mess. (you have been warned)

Hope this helps